WordPressでカスタムメニューを設置する方法

2017.12.13 WordPress
WordPressでカスタムメニューを設置する方法

ほぼ自分用のメモですが、WordPressでカスタムメニューを使う方法。

流れとしては、テーマのfunctions.phpにてカスタムメニューを有効化→テーマの任意の位置にカスタムメニューを表示するためのソースを表示という感じです。

functions.phpでカスタムメニューを有効化

まず、テーマにあるfunctions.phpにてカスタムメニューを有効化します。

/* カスタムメニュー
---------------------------------------------------------- */
register_nav_menus(array(
'global'    => 'グローバルナビゲーション',
'category'  => 'カテゴリーリスト',
'footer'    => 'フッターナビゲーション',
));

このソースでは、以下の3つのメニューを使えるようにしています。

  1. グローバルナビゲーション
  2. カテゴリーリスト
  3. フッターナビゲーション

もっと増やしたい場合には、以下のような要領で追加していけば大丈夫です。

'global'    => 'グローバルナビゲーション',
'category'  => 'カテゴリーリスト',
'footer'    => 'フッターナビゲーション',
'menu_01'   => 'メニュー01',
'menu_02'   => 'メニュー02',
'menu_03'   => 'メニュー03',
'menu_04'   => 'メニュー04',
.
.
.

メニューを表示したい箇所にwp_nav_menuでメニューを表示

メニューを表示するには、テンプレートタグwp_nav_menuを使用します。

テーマ内のカスタムメニューを表示したい箇所に、下記のような感じで記述します。

<div id="global_nav">
<?php wp_nav_menu( array(
'theme_location' => 'global', 
'container'      => false
)); ?>
</div>

詳細な設定方法は参考ページで確認して頂ければと思います。ここでは、よく使いそうな設定だけ簡単に紹介します。

<div id="global_nav">
<?php wp_nav_menu( array(
'menu_class'      => 'menu', //メニューのul要素に付加されるクラス名
'menu_id'         => '{メニューのスラッグ}-{連番}', //メニューのul要素に付加されるID名
'container'       => 'div', //メニューのul要素を囲む要素。divかnav。なしの場合はfalse。
'container_class' => 'menu-{メニューのスラッグ}-container', //メニューのul要素を囲む要素に付加するクラス名
'container_id'    => '', //メニューのul要素を囲む要素に付加するID名
'before'          => '', //リンクテキストの前に挿入するテキスト(aタグ外)
'after'           => '', //リンクテキストの後に挿入するテキスト(aタグ外)
'link_before'     => '', //リンク内のテキストの先頭に挿入するテキスト(aタグ内)
'link_after'      => '', //リンク内のテキストの最後に挿入するテキスト(aタグ内)
'depth'           => 0, //表示するメニュー項目の階層数。0ですべて表示、1で親メニューのみ。
'theme_location'  => '', //register_nav_menuで登録したメニューのうち、どれを表示するか
)); ?>
</div>

参考ページ:テンプレートタグ/wp nav menu

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら