WordPressにはカスタムメニューという機能があります。カスタムメニューはナビゲーションメニューとも呼ばれていますが、WordPressではどちらもメニュー機能のことを言います。
WordPressテーマを自作した場合は、自分でカスタムメニューをテーマに機能追加する必要がありますし、使用するWordPressテーマによってはカスタムメニュー機能が追加していない場合があります。
どちらにしてもカスタムメニューに必要な関数やテンプレートタグを使用して追加と表示ができるのでカスタムメニューの機能追加と表示方法を紹介します。
各ページに表示させるコード
<?php
wp_nav_menu( array(
'theme_location' => 'gloval-navigation', //出力名と合わせる
'depth' => 2, // プルダウンさせる
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-nav', // ulに付けているクラス
'fallback_cb' => '',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
※ header部分のナビゲーション <?php
wp_nav_menu( array(
'theme_location' => 'footer-navigation', //出力名と合わせる
'depth' => 0, // プルダウンしない
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-nav', // ulに付けているクラス
'fallback_cb' => '',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
※ footer部分のナビゲーションWordPressに表示するカスタムメニューの機能追加方法①
WordPressにカスタムメニューを表示するために必要になるカスタムメニューのテーマ機能を追加する方法は「register nav menu」または「register nav menus」というWordPressで用意されている関数を使用します。
2つの関数のどちらかを使うことにより、まだカスタムメニューが有効になっていなく使用できていないWordPressテーマの管理画面の外観には「メニュー」が追加できます。
以下から「register nav menu」と「register nav menus」でカスタムメニューの追加をしていく方法を一つずつ説明していきます。
カスタムメニューをregister nav menuで追加
WordPressにカスタムメニューを追加できる関数の「register nav menu」は1つのカスタムメニューを管理画面のメニューで設定できるように登録できます。
register_nav_menu( 'gloval-navigation', ' ヘッダーナビゲーション ' );WordPressテーマの「functions.php」に記述し保存することで、ワードプレスの管理画面の外観には「メニュー」が追加されているのが確認できます。
「register nav menu」はカスタムメニューを一つしか登録できないので、ヘッダー以外、フッターやサイドバーにもカスタムメニューを複数追加したい場合は以下のようにコードを記述してfunctions.phpに貼り付けます。
register_nav_menu( 'gloval-navigation', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-navigation', ' フッターナビゲーション ' );
register_nav_menu( 'side-nav', 'サイドナビゲーション');もしくは「after_setup_theme()」 にフックしてカスタムメニューの呼び出すタイミングにする方法でも大丈夫です。そのコードが以下のコードです。
function sample_setup_theme() {
register_nav_menu( array(
'gloval-navigation' => 'ヘッダーナビゲーション',
'footer-navigation' => 'フッターナビゲーション',
));
}
add_action( 'after_setup_theme', 'sample_setup_theme' );
※sample_setup_themeは任意の名前でOK「register nav menu」をafter_setup_themeにフックしてafter_setup_themeが処理を実行するタイミングでカスタムメニューの処理が始まります。
initでフックすることもできるようですがafter_setup_themeアクションはfunctions.phpが呼び出された直後に実行され、その後でinitアクションが実行されるので順番からするとafter_setup_theme()でフックした方法のほうが良いかと思います。
参考サイト
https://shu-sait.com/custom-menu-hyouji-tuika/
https://www.youtube.com/watch?v=QJyaUH453ec&list=PL7LtdGFp5DwQiQyDS0pFHthvOF8rL4Hyr&index=3
bootstrap4のメニュー機能表示（プルダウン）
bootstrap4の場合は下記の「class-wp-bootstrap-navwalker.php」を使用しないとプルダウン機能が使えませんので注意してください。
/* bootstrap4のメニュー機能表示 */
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
/* メニュー機能をオンにする */
register_nav_menus(
array(
'gloval-navigation' => 'グローバル',
'side_navigation' => 'サイドメニュー',
'footer-navigation' => 'フッター',
)
);
※必ず「class-wp-bootstrap-navwalker.php」をダウンロードしてディレクトリーに追加すること。