【WordPress】ナビメニューをパラメータでカスタマイズする【wp_nav_menu】

メニューのパラメータ-アイキャッチ
2021年04月29日

通常のナビメニューなら以前の記事で書いた方法で作成できますが、CSSを使ったりして機能を細かくカスタマイズすることでさらに拡張性を上げることができます。

【WordPress化】ナビゲーションメニューを作成する【wp_nav_menu】
WordPressで使う基本的なナビゲーションメニューの作成を解説します。
kbyt-programming.com
2021年10月03日
こばゆた
こばゆた

そこで今回はナビメニューのパラメータの説明をします

まずはこちらを一読し、実際に見ながらパラメータを操作してみることをお勧めします。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu
wpdocs.osdn.jp
スポンサーリンク

1.wp_nav_menuの復習と出力されるHTML

<?php wp_nav_menu(); ?>
こばゆた
こばゆた

テンプレートタグを入れると以下のようなHTMLが出力されます。

<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>
こばゆた
こばゆた

これをパラメータで変えていこうということです

<?php $args = array(
    /* ここにパラメータを書く。複数書くこともでき、その場合はカンマで区切って書いていく */
  );

  wp_nav_menu($args); 
?>

arrayというのは配列でそれを変数に入れてwp_nav_menuの引数で読み込むという流れになっています…。

要はarrayの()内に書いたパラメータを読み込むことでアレンジができるという認識で良いと思います。

スポンサーリンク

2.パラメータを操作する

<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>
こばゆた
こばゆた

上にあげたコードがデフォルトでしたね

これにパラメータを操作することで何が変わるかを見ていきましょう

menu

表示するメニュー名

<?php $args = array(
  'menu'  => 'header_menu',
  );
  wp_nav_menu($args);
?>

menu_class

メニューのulタグにクラス名を与える

<?php $args = array(
  'menu_class'  => 'test_nav',
  );
  wp_nav_menu($args);
?>
  • ‘　'(空欄)だと”menu”となる
  • 変える場合は文言を入れる

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul class="test_nav">
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

menu_id

メニューのulタグにID名を与える

<?php $args = array(
  'menu_id'  => 'test_nav',
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul id="test_nav">
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

container

  • ulタグをさらにコンテナで囲うかを指定する。囲う場合は”div”か”nav”かで指定する。
  • 初期値は”div”で囲われている。”false“とすることで”div”を削除することができる。
<?php $args = array(
  'container' => 'nav', /* navで囲う */
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<nav>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</nav>

container_class

囲った場合にクラス名を与える

<?php $args = array(
  'container' => 'nav',
  'container_class' => 'header_nav',
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul id="test_nav">
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

container_id

囲った場合にID名を与える

<?php $args = array(
  'container' => 'nav',
  'container_id' => 'header_nav',
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<nav id="header_nav">
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</nav>

before

リンクの前に挿入する

<?php $args = array(
  'before'  => '<span class="class_name">spanだよ</span>'
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul>
    <li>
      <span class="class_name">spanだよ</span>
      <a href="">リンクA</a>
    </li>

    <li>
      <span class="class_name">spanだよ</span>
      <a href="">リンクB</a>
    </li>

    <li>
      <span class="class_name">spanだよ</span>
      <a href="">リンクC</a>
    </li>
  </ul>
</div>

ややこしいですがaタグの前に入れることができます。

<li><span class=”class_name”>spanだよ</span><a href=””>リンクA</a></li>

after

リンクの後に挿入する

<?php $args = array(
  'after'  => '<span class="class_name">spanだよ</span>'
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul>
    <li>
      <a href="">リンクA</a>
      <span class="class_name">spanだよ</span>
    </li>

    <li>
      <a href="">リンクB</a>
      <span class="class_name">spanだよ</span>
    </li>

    <li>
      <a href="">リンクC</a>
      <span class="class_name">spanだよ</span>
    </li>
  </ul>
</div>

こちらもややこしいですがaタグの後ろに入れることができます。

<li><a href=””>リンクA</a><span class=”class_name”>spanだよ</span></li>

link_before

リンクテキストの前に挿入する

<?php $args = array(
  'link_before'  => '<span id="name">spanその2</span>'
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul>
    <li>
      <a href="">
        <span id="name">spanその2</span>
        リンクA
      </a>
    </li>

    <li>
      <a href="">
        <span id="name">spanその2</span>
        リンクB
      </a>
    </li>

    <li>
      <a href="">
        <span id="name">spanその2</span>
        リンクC
      </a>
    </li>
  </ul>
</div>

さらにややこしくリンクテキストの前(aタグの中)に入ります。

<li><a href=””><span id=”name”>spanその2</span>リンクA</a></li>

link_after

リンクテキストの後に挿入する

<?php $args = array(
  'link_after'  => '<span id="name">spanその3</span>'
  );
  wp_nav_menu($args);
?>

記入前

<div>
  <ul>
    <li><a href="">リンクA</a></li>
    <li><a href="">リンクB</a></li>
    <li><a href="">リンクC</a></li>
  </ul>
</div>

記入後

<div>
  <ul>
    <li>
      <a href="">
        リンクA
        <span id="name">spanその3</span>
      </a>
    </li>

    <li>
      <a href="">
        リンクB
        <span id="name">spanその3</span>
      </a>
    </li>

    <li>
      <a href="">
        リンクC
        <span id="name">spanその3</span>
      </a>
    </li>
  </ul>
</div>

ややこしいシリーズ最後はリンクテキストの後ろ(aタグの中)に入ります。

<li><a href=””>リンクA<span id=”name”>spanその3</span></a></li>

echo

  • メニューをHTMLで出力するかPHPで出力するか
  • HTMLで出力する場合は”true”(初期値)、PHPで出力する場合は”false”を指定する
<?php $args = array(
  'echo'  => 'true'
  );
  wp_nav_menu($args);
?>

depth

  • 階層をいくつ表示するか
  • 数値で指定
  • 初期値は０
<?php $args = array(
  'depth'  => '0'
  );
  wp_nav_menu($args);
?>

3.まとめ

ナビメニューのカスタマイズまとめ
<?php
$args = array(
  'menu'  => '', /* メニュー名 */
  'menu_class' => '', /* ulに与えるクラス名 */
  'menu_id'  => '', /* ulに与えるID名 */
  'container'=> false, /* ulをさらにdivかnavで囲むか(初期値はdivで囲われている。falseでdivを削除できる。) */
  'container_class'  => '', /* ulを囲っているコンテナに与えるクラス名 */
  'container_id'  => '', /* ulを囲っているコンテナに与えるID名 */
  'before'  => '', /* リンクの前に挿入する */
  'after'  => '', /* リンクの後に挿入する */
  'link_before'  => '', /* リンクテキストの前に挿入する */
  'link_after'  => '', /* リンクテキストの後に挿入する */
  'echo'  => '', /* メニューをHTMLで出力するかPHPで出力するか */
  'depth'  => '', /* メニューの深さを指定 */
);
wp_nav_menu($args);
?>
  • “beforeまたは”after”を使うとliタグの入れ子となる
  • “link_before”または”link_after”を使うとaタグの入れ子となる

おまけ

長々と書かれているクラス名を消すには以下のコードをfunctions.phpに記入します。

listの長いクラス名を削除する前
add_filter( 'nav_menu_css_class', 'my_css_attributes_filter', 100, 1 );
add_filter( 'nav_menu_item_id', 'my_css_attributes_filter', 100, 1 );
add_filter( 'page_css_class', 'my_css_attributes_filter', 100, 1 );
function my_css_attributes_filter( $var ) {
  return is_array( $var ) ? array_intersect( $var, array( 'current-menu-item' ) ) : '';
}
listの長いクラス名を削除した後

あら不思議すっきりとしましたね！

スポンサーリンク

コメント