functions.phpで独自のカスタムメニュー機能を追加する方法(コピペ可)

自作のカスタムメニュー

こんにちは、アサル(ASAL)です!

もし、メニューの数が増えたときやメニューの内容を差し替えたい場合に、いちいちテンプレートファイルを書き換えなるなんてめんどくさい…。

また、メニューの数が増えれば増えるほど管理も運用も大変ですよね。

こういった問題を解決してくれるのが、独自のカスタムメニューなんです!

コード量自体も少なく、とても簡単に実装できちゃうんです。

さらに、自分たちやクライアント側にも管理してもらいやすくなるため、取り入れておいて損はありません!

忙しい方に向けて、コピペですぐに使えるので、どうぞ!

ではさっそく、解説していきます。

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

まずは、functions.phpに下記を記述します(ソースコードにカーソルを当てると右上にコピーボタンが表示されます)。

<?php // カスタムメニュー機能を有効化
function register_my_menu() {
  register_nav_menu( 'header-menu','ヘッダーメニュー');
  // 複数追加する場合は下にコピペしていく(今回はヘッダーメニューのみ作成)
  // register_nav_menu( 'footer-menu','フッターメニュー');
  // register_nav_menu( 'side-menu','サイドメニュー');
}
add_action( 'after_setup_theme', 'register_my_menu' );
?>

ヘッダーやフッターなど、複数のメニューを使いたい方は、お好みで追加していきましょう。

今回は、ヘッダーメニューだけを作ります。

カスタムメニューを好きな場所に表示する

下記のコードを記述することで、投稿や固定ページのリンクなどを任意の場所に表示することができるようになります。

<div class="header-menu">
  <?php
  wp_nav_menu(array(
    'theme_location' => 'header-menu', // functions.phpと同じにする
    'container' => 'nav',              // 全体を囲むタグnav※divとかも使える
    'container_class' => 'header-nav', // navにclassをつける
    'container_id' => 'header-nav',    // navにidをつける
    'menu_class' => 'header-nav-list', // ulにclassをつける
    'menu_id' => 'header-nav-list',    // ulにidをつける
    'depth' => 1,                      // 1で親メニューだけを表示(0で全階層表示)
    'fallback_cb' => ''                // メニューが表示されていない場合の値
  ));
  ?>
</div>

出力されるHTML

ちなみに、カスタムメニューで出力されるHTMLは、下記のようになります。

ローカルで作業する際には、これを使えばWordPress化したときでも、デザインの崩れがなくなります。

<div class="header-menu">
  <nav class="header-nav" id="header-nav">
    <ul class="header-nav-list" id="header-nav-list">
      <li><a href=""><!-- ここにメニューが入る --></a></li>
    </ul>
  </nav>
</div>

各値の意味・使い方

それでは、各値の意味を見ていきましょう。

「これ要らないなぁ」って思った値は、コメントアウトにするなどして、消しておきましょう。

'theme_location' => 'header-menu'

functions.phpに記述した値と紐付けます。

ここで、funcitons.phpに記述した値とtheme_locationの値が違うとメニューが表示されないので、必ず同じ値を指定して下さい。

'container' => 'nav'

containerは、メニュー全体を囲むタグを指定します。

今回はnavを指定しているので、メニュー全体が自動的に<nav>~</nav>と出力されます。

divなども指定できます。

'container_class' => 'header-nav'

<nav>に好きなclassを付けることができます。

空白の場合は、classが付きません。

ここでは仮のclassで、header-navとしています。

'container_id' => 'header-nav'

<nav>に好きなidを付けることができます。

空白の場合は、idが付きません。

ここでは仮のidで、header-navとしています。

'menu_class' => 'header-nav-list'

<ul>に好きなclassを付けることができます。

空白の場合は、classが付きません。

ここでは仮のclassで、header-nav-listとしています。

'menu_id' => 'header-nav-list'

<ul>に好きなidを付けることができます。

空白の場合は、idが付きません。

ここでは仮のidで、header-nav-listとしています。

'depth' => 1

メニューを何階層表示するかを指定します。

1で親メニューだけを表示させます。

0を指定すると全階層の表示ができます。

'fallback_cb' => ' '

メニューが表示されていない場合の値を指定します。

初期値では、wp_page_menuとなっており、メニューが設定されてない場合に意図していない要素が出力されてしまいます。

なので、メニューを設定していないときに、何も表示させないように”を指定しておくと良いですね。

まとめ

独自のカスタムメニューの便利さをお分かり頂けましたか?

WordPressでサイトを構築する時に、独自のカスタムメニュー機能を追加しているかしていないかとでは、クライアントにとっても、今後の管理にも大きな違いが現われてくる思います。

これを機に、どんどんワードプレス をカスタマイズしていけるようになりましょう!

以上、ASALでした!

他にもこんな記事があります!