【オリジナル(自作)テーマ制作】WordPressでナビゲーションメニューを作る方法

wordpressプログラミング備忘録
yumeyumeさんによる写真ACからの写真
スポンサーリンク

外観にメニューが無い? WordPressでナビゲーションメニューを作る方法で悩んでいませんか?

どうも、ちゃんカマです。

自分はWordPressのオリジナルテーマの制作において、ナビゲーションメニューを作る方法で悩みました。
そもそも、「外観にメニューの項目が無いし!」と叫んでいました。

そこで、今回はその時に自分がやった方法を書いていきたいと思います。同じようなところでハマっている方は、参考にしてみてください。

外観にメニューの項目を出す

まず最初に、外観にメニューの項目を出していきます。
既存テーマなら当たり前の機能も、オリジナルテーマには最初から無いんですね。

外観の中にメニューの項目が無い
このように外観の中にメニューの項目が無い!

外観にメニューの項目を出すためには、function.phpに以下のように記入します。

function.php
<?php
register_nav_menu();

これで外観にメニューの項目が表示され、メニューの編集が出来るようになります。

外観にメニューの項目が表示されている
外観にメニューの項目が表示されている

メニューの位置を登録

しかし、これだけではダメなんですね。
何がダメなのかというと、メニュー設定のメニューの位置を登録していないんですね。
このメニューの位置を登録していないと、この後に作成したメニューをページに表示させようとしても、どのメニューを表示させるのか指定が出来ないわけなんです。

メニューの位置に何も無い
メニューの位置に何も無い

なので、メニューの位置を登録するために、先程のfunction.phpに以下のように書き加えていきます。

見出し
<?php
register_nav_menus( array(
  'hamburger-navigation' => 'ハンバーガーメニュー',
  'header-navigation' => 'ナビゲーションメニュー',
  'footer-navigation' => 'フッターメニュー',
  'social-links'      => 'ソーシャルリンク'
) );

今回は4つのメニューの位置を登録しています。arrayを使って、連想配列でデータを渡しています。
例えば、

'hamburger-navigation' => 'ハンバーガーメニュー',

この中の、’hamburger-navigation’ の部分はメニューの識別子、スラッグのようなものです。
‘ハンバーガーメニュー’ の部分はメニューの説明文のようなものです。先程のメニューの位置の箇所に、実際に表示される文章になります。

メニューの位置にメニューの説明文が表示される
メニューの位置に、メニューの説明文が表示される

このように表示されます。
メニューを作成したら、どこに使用するメニューなのかによって、この中から1つにチェックを入れてください。

ページのテンプレートファイルにメニュー表示のコードを記入

後は、メニューを表示させたいページのテンプレートファイルに、以下のように記入すれば良いです。

<?php wp_nav_menu( array('menu' => 'ハンバーガーメニュー') ); ?>

上記はハンバーガーメニューとして登録したメニューを表示させるための、コード記入例です。

まとめ

最初は外観にメニューの項目が無くて焦りましたが、自分は上記の方法でメニューの編集とページへの表示が出来ました。
オリジナル(自作)テーマ制作においては、デフォルトで設けられていない機能も多いです。例えば、サイドバーのウィジェットなんかもそうかと。
しかし、今回のようにfunction.phpにコードを書き加えてあげると使用出来るようになったりするんですね。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんカマでした。

コメント

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