この記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。
Wordpressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。
用意するもの
まずは以下のファイルをそれぞれダウンロード。（jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード）
jQuery
jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。
Bootstrap
Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。
Bootstrap navwalker
ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。
function.phpに記述すること
// Bootstrap Navwalkerを使えるようにする
require_once('wp_bootstrap_navwalker.php');
// jQuery を使えるようにする
function add_my_scripts() {
if(is_admin()) return;
wp_deregister_script( 'jquery');
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.3.min.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'add_my_scripts');
// カスタムメニューを使えるようにする
add_theme_support( 'menus' );
register_nav_menu( 'primary', 'Header navigation menu' );
header.phpに記述すること
headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。
<link rel="stylesheet" media="all" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。
<nav>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php if( has_nav_menu( 'primary' ) ){
wp_nav_menu ( array (
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'mainmenu',
'menu_class' => 'nav navbar-nav collapse navbar-collapse',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
));
} ?>
</nav>
wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。
具体的なパラメータの設定方法については以下を参照
テンプレートタグ/wp nav menu
footer.phpに記述すること
Bootstrapのjsファイルの読み込み。
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
出力されるHTMLタグの例
<div class="mainmenu">
<ul id="menu-header-menu" class="nav navbar-nav collapse navbar-collapse">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-92 current_page_item menu-item-93 active">
<a title="HOME" href="http://xxx.com/">HOME</a>
</li>
<li id="menu-item-196" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-196">
<a title="Blog" href="http://xxx.com/blog/">Blog</a>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">
<a title="About" href="http://xxx.com/about/">About</a>
</li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-71 dropdown">
<a title="Product" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Product
<span class="caret"></span>
</a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-193" class="menu-item menu-item-type-taxonomy menu-item-object-md_category menu-item-193">
<a title="Product1" href="http://xxx.com/product/procuct1">Product1</a>
</li>
<li id="menu-item-195" class="menu-item menu-item-type-taxonomy menu-item-object-md_category menu-item-195">
<a title="Product2" href="http://xxx.com/product/procuct2">Product2</a>
</li>
</ul>
</li>
</ul>
</div>
コメント