WordPress でオリジナルテーマを作る【カスタムメニュー】編

2018年11月11日

WordPressのカスタムメニュー機能を有効化してナビゲーションメニューバーを表示します。

register_nav_menus();

functions.phpにコードを追加します。

// カスタムメニューを設定
function add_custom_menu(){
register_nav_menus(array(
'main-menu' => 'メインメニュー',
'sub-menu' => 'サブメニュー'
));
}
add_action('after_setup_theme','add_custom_menu');

wp_nav_menu();

表示させたい場所にコードを追加します。

<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => 'nav',
'container_class' => 'custom-navi',
'container_id' => 'main-navi',
'menu_class' => 'custom-nav',
'menu_id' => 'main-nav',
'before' => '',
'link_after' => ''
));
?>

theme_location	「main-menu」という『位置』に対応するメニューを出力
container	メニューをdiv要素ではなく「nav要素」で囲む
container_class	nav要素に「custom-navi」というクラスを付ける
container_id	nav要素に「main-navi」というIDを付ける
menu_class	メニューのul要素に「custom-nav」というクラスを付ける
menu_id	メニューのul要素に「main-nav」というIDを付ける
before	リストの前に付ける文字を指定する
link_after	リストの後に付ける文字を指定する

Bootstrap4でカスタムメニューを表示する

register_nav_menus();

functions.phpにコードを追加します。

// Include custom navwalker
require_once('bs4navwalker.php');

// Register WordPress nav menu
register_nav_menu('top', 'Top menu');

register_nav_menuは、すでに説明した複数のメニューの宣言register_nav_menusでも構いません。

// カスタムメニューを設定
function add_custom_menu(){
register_nav_menus(array(
'main-menu' => 'メインメニュー',
'sub-menu' => 'サブメニュー'
));
}
add_action('after_setup_theme','add_custom_menu');

bs4navwalker.php

WordPressのカスタムメニューをBootstrap4のドロップダウンメニューで使用するにはbs4navwalker.phpというファイルが必要です。下記リンクよりbs4navwalker.phpをダウンロードしてテンプレートファイルと同じ階層に置きます。

bs4navwalker.php

require_once(‘bs4navwalker.php’);

bs4navwalker.phpの用意ができたら、functions.phpに以下の記述を追加します。

// Include custom navwalker
require_once('bs4navwalker.php');

wp_nav_menu();

カスタムメニューを表示したい個所に以下のコードを記載します。

<nav class="navbar navbar-expand-md navbar-light bg-faded">
<?php
wp_nav_menu([
'menu' => 'top',
'theme_location' => 'top',
'container' => 'div',
'container_id' => 'bs4navbar',
'container_class' => 'collapse navbar-collapse',
'menu_id' => false,
'menu_class' => 'navbar-nav mr-auto',
'depth' => 2,
'fallback_cb' => 'bs4navwalker::fallback',
'walker' => new bs4navwalker()
]);
?></nav>

設定例

アイコン付きBrandと検索フォームを備えた fixed-top（上部に固定する）のグローバルメニューの設定例です。

<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="https://xxyyzz.com/wp-content/img/aabbcc.png" width="30" height="30" class="d-inline-block align-middle" alt="">
<?php bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu([
'menu' => 'メインメニュー',
'theme_location' => 'main-menu',
'container' => 'div',
'container_id' => 'bs4navbar',
'container_class' => 'collapse navbar-collapse',
'menu_id' => false,
'menu_class' => 'navbar-nav mr-auto',
'depth' => 2,
'fallback_cb' => 'bs4navwalker::fallback',
'walker' => new bs4navwalker()
]);
?>

<span class="collapse navbar-collapse" id="bs4navbar">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">検索</button>
</form>
</span>
</nav>

Bootstrap4 Colors

Bootstrap4の規定のカラーは以下のサイトを参考にしてください。

Bootstrap4 Colors

背景色はカラーコードの指定やopacityの指定も可能です。

<nav class="navbar sticky-top navbar-expand-md navbar-light" style="opacity:0.8;background-color: #eccdb3;">

ドロップダウンメニューの背景色

ドロップダウンメニューの背景色はstyle.cssにて指定しました。

.dropdown-menu {
background-color: #eccdb3;
}