WordPressのカスタムメニューで複数のメニューを切り替えてみる

 静的 HTML のウェブサイトで設置したグローバルメニューに変更があった場合、ひとつひとつのページを手作業でコピー&ペーストした苦労を経験したことがあるかもしれません。その点、WordPress は管理画面から変更するだけで一度にすべてのページに反映されるので、大変便利です。

 しかも複数のメニューを作成しておき、それをテンプレートファイルのソースコードから切り替えることもできます。ページトップとフッターで違うメニューを表示させたり、固定ページとブログ記事でメニューを切り替えるといった使い方もできます。

ブログにグローバルメニューを表示する

おさらいとして、ブログにひとつグローバルメニューを表示する方法を復習しましょう。まずは function.php に次の一行を追加します。

今度はテーマの PHP ファイルを開いて、グローバルメニューを表示したい場所に次の一行を追加します。テーマにもよりますが、多くの場合には header.php ではないでしょうか。

管理画面の「外観」→「メニュー」に移動し、メニューを作成します。メニューに固定ページを追加したい場合は、前もって作成しておく必要があります。メニューの位置の「ヘッダーのナビゲーション」にチェックを入れておいてください。

「メニューを保存」ボタンを押し忘れないようにしてください。

複数のカスタムメニューをメニューを切り替える

まずは複数のメニューを作成しましょう。「新規メニューを作成」リンクをクリックします。

「メニュー名」を入力して「メニューを作成」ボタンを押すのですが、このメニュー名は後ほどソースコードで指定する際に使用するので、見分けがつきやすい名前を付けたほうがよいでしょう。

再度メニューを編集する必要がある場合、編集するメニューを選択から目的のメニューを選んで「選択」ボタンを押せば切り替えることができます。

メニューを編集し終わったら、今度はソースコードの編集です。

テーマの PHP ファイルを開き、次の一行を追加します。wp_nav_menu テンプレートタグの menu プロパティに先ほど付けたメニュー名を指定するだけです。

menu プロパティを指定してカスタムメニューを表示する場合、「ヘッダーのナビゲーション」にチェックが入っていてもいなくても関係ありません。

今度はフッターに違うメニューを設置したい場合を考えてみます。footer.php を開き、次のソースコードを追加します。

ページトップとフッターで別々のカスタムメニューが表示されているでしょうか。ほかにも固定ページとブログ記事などで違うメニューを設置して動作を確認してみてください。

theme_location

ネットで調べていると、wp_nav_menu テンプレートタグの theme_location プロパティを使ってカスタムメニューを切り替える方法がたくさん出てきます。結論から申しますと、私はこのプロパティをどの場面で使うのかがよくわかりませんでした。

このプロパティを使うには、まずは function.php に次のように記述をしておく必要があります。

register_nav_menus テンプレートタグを記述した場合、add_theme_support(‘menus’); は削除しても構いません。書式は次のようになります。

メニューの管理画面が次のように変化します。

カスタムメニューを表示したい場合、次のソースコードをテーマの PHP ファイルに追加します。

この方法は管理画面を見てもらうとわかるように、$location に対応する $description にチェックを入れるひと手間が余計にかかります。たいした手間ではありませんがチェックを入れ間違えることなども考えると、先ほどの menu プロパティにメニュー名を指定する方法のほうがシンプルで私は好きです。

その他

テーマの header.php に次のようにしてカスタムメニューを設置したとします。

このとき出力される HTML は、デフォルトの設定の場合には次のようになります。

register_nav_menus テンプレートタグには、menu や location 以外にも渡すことのできるプロパティがありますが、例えば次のようにカスタマイズしたいとします。

  • ul タグにクラスや ID はいらない
  • ul タグのリストを勝手に div タグで囲んでほしくない

先ほどの header.php を次のように修正します。

function.php を次のように修正しても同じ結果になります。

だいぶスッキリしました。

register_nav_menus テンプレートタグに渡せるプロパティはこれ以外にもあります。結構細かくカスタマイズすることができるので、興味がある人はリンク先を確認してみてください。

テンプレートタグ/wp nav menu – WordPress Codex 日本語版

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP