サポート » テーマ » 自作テーマに Bootstrap3 を組み込む

  • kyoheimatsumoto

    (@kyoheimatsumoto)


    ド素人でこんな質問、申し訳ございません。
    掲示板を使うのも初めてでこんな質問をしてよいのか恐縮です。

    現在ブログを始めようと思いテーマを制作しています。
    Bootstrap3を入れてヘッダー部分にドロップダウンのメニューを作ろうと思っております。

    index.phpにheader.phpを張った場合ドロップダウンメニューは降りてきてうまく表示されるのですがsingle.phpにheader.phpを張った場合ドロップダウンメニューが降りてきません。

    悩んで悩んで禿げそうになってしまい初めてこのサイトを使わせて頂く事のにしました。

    何とぞよろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック投稿者 kyoheimatsumoto

    (@kyoheimatsumoto)

    <?php
    if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
    header('X-UA-Compatible: IE=edge,chrome=1');
    ?>
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
        <?php wp_enqueue_script('masonry', '/wp-content/themes/sundaylife/js/masonry.min.js',array(jquery)); ?>
        <?php wp_enqueue_script('sample', '/wp-content/themes/sundaylife/js/masonrytama.js',array(jquery)); ?>
      </head>
      <body <?php body_class(); ?>>
        <div id="header"></div>
          <nav class="navbar navbar-default navbar-fixed-top container" >
          <div class="container-fluid">
          <!-- スマートフォンサイズで表示されるメニューボタンとテキスト -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu-3">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <!--Homeボタン-->
            <a>"><i class="fa fa-home"></i> Home</a>
          </div>
          <!--ナビの中身 -->
          <div class="collapse navbar-collapse" id="nav-menu-3">
            <!-- 各ナビゲーションメニュー横一列にする物 -->
            <ul class="nav navbar-nav">
              <!-- ドロップダウンのカテゴリーメニュ-->
              <li class="dropdown">
                <a href="#"> Category<b class="caret"></b></a>
                <ul class="dropdown-menu">
    
    <li><?php wp_list_categories('title_li='); ?></li>
              <!-- 通常のリンク-->
    
    <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i> Sunday life</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i> Sunday life</a></li>
          </div>
        </div>
      </nav>
    <?php wp_head(); ?>
    トピック投稿者 kyoheimatsumoto

    (@kyoheimatsumoto)


    コチラがheader.phpになります。
    汚いコードで申し訳ございません。

    モデレーター gatespace

    (@gatespace)

    うーん。どこから説明しましょうか。
    というのも根本的な問題としてWordPressテーマとしてのお作法がいろいろ間違ってます。

    手っ取り早いのは公式ディレクトにあるBootstrapベースのテーマをダウンロードして
    ご自分のコードと見比べてみることでしょうか
    https://wordpress.org/themes/search.php?q=bootstrap

    「お作法」については一度Codexを読んだ方が良いですよ
    http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90

    トピック投稿者 kyoheimatsumoto

    (@kyoheimatsumoto)

    ああ、、やっぱりそうなんですね>_<
    調べなおします。
    ありがとうございます!!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「自作テーマに Bootstrap3 を組み込む」には新たに返信することはできません。