ナビゲーションメニュー(カスタムメニュー)を表示する方法【WordPress関数】|ためになるWordPressブログ

WordPress

さて今回はナビゲーションメニューの作り方についてです。

ナビゲーションメニューというのは、

このようなウェブサイトの上部にある赤枠のようなメニューのことですね。

WordPressではこのようなナビゲーションメニューがかんたんに作れる以下の2つの関数が用意されています。

register_nav_menus()
wp_nav_menu()

register_nav_menus()でナビゲーションメニューを登録し、wp_nav_menu()で表示するといった使い方になります。

ナビゲーションメニューを登録

まずはregister_nav_menus()でナビゲーションメニューの登録です。

ナビゲーションメニューを登録しておかないとwp_nav_menu()で表示しようとしてもうまくいきません。

function.phpにこのように書いてみましょう。

function.php

function sampletheme_setup() {
register_nav_menus (
[‘main-menu’ => ‘ヘッダーに表示するメニュー’,]
);

}
add_action( ‘after_setup_theme’, ‘sampletheme_setup’ );

register_nav_menus()を登録するためにアクションフックを利用しています。

左側の”main-menu”としている部分がカスタムメニューの名前(スラッグ名)で自分で名前を設定します。
右側の”ヘッダーに表示するメニュー”というのがメニューが表示される位置の説明です。

[‘main-menu’ => ‘ヘッダーに表示するメニュー’,]の部分はarray(‘main-menu’ => ‘ヘッダーに表示するメニュー’,)と書いても構いません。
フッター用やサイドバー用に複数のメニューを登録することも可能です。

これを書いて更新ボタンを押すと管理画面の”外観”のところに“メニュー”というものが表示されます。

このメニューから項目を自分で設定できますのでやってみましょう。

また”外観”の”カスタマイズ”からもメニューの編集ができるよになります。

現在の設定のところに先程function.phpに入力したメニューが表示される位置の説明が反映しています。

ヘッダーにナビゲーションメニューを追加してみよう

ではメニューの登録が完了したのであとは表示させる作業です。
メニューを表示させるにはwp_nav_menu()を使用します。

通常ナビゲーションメニューはヘッダーで使用することが多いのでheader.phpにこのように書いてみましょう。

header.php

<?php $nav = [‘theme_location’ => ‘main-menu’,];
wp_nav_menu($nav);
?>

WordPress Codexに使用できるパラメータの詳細がありますが、register_nav_menus()で登録したメニューを使用する場合は“theme_location”にfunction.phpに登録したスラッグ名を入れ込みます
今回の場合は”main-menu”で登録したのでそれを入力します。

するとナビゲーションメニューメニューが表示されます。

画像ではすでにCSSで見た目を整えてありますのできれいに表示されていますが、何もしていないとリスト形式で出力されます。

Googleのデベロッパーツール等でクラス名を確認してCSSでレイアウトを設定しましょう。

まとめ

ナビゲーションメニューは少しややこしいですね。

設定できるパラメーターも多くあり、私もまだ完全に理解していませんが必要に応じて調べながらでも使えるようにしておきましょう。

基本的にこの2冊とWordPress Codexで理解しながらやっています。

コメント

タイトルとURLをコピーしました