カスタムメニューの出力(シンプルバージョン)

<?php
$args = array(
'menu'            => 'gnav',
'menu_class'      => 'menu',
'container'       => 'div',
'container_class' => 'menu-container',
'before'          => '<p>',
'after'           => '</p>',
'link_before'     => '*',
'link_after'      => '**',
'depth'           => 1,
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $args );
?>

▼パラメータ(オプション)

'menu'            => メニューのidまたはslug,
'menu_class'      => 'menu',
'container'       => メニューを囲むタグ。'div'または'nav'。必要ない場合には'false',
'container_class' => 'menu-container',
'before'          => リンクの直前に入れるテキスト,
'after'           => リンクの直後に入れるテキスト,
'link_before'     => リンクの先頭に入れるテキスト,
'link_after'      => リンクの後尾に入れるテキスト,
'depth'           => 何階層まで表示するか。全て出力する場合は0,
'items_wrap'      => %1$sに'menu-{メニューのスラッグ}'、%2$sに'menu_class'、%3$sにメニューの中身
がはいる,
<div class="menu-container">
  <ul id="menu-gnav" class="menu">
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13"><p><a href="http://sample.com" aria-current="page">*ホーム**</a></p></li>
    <li id="menu-item-12" class="menu-item menu-item-type-post_type_archive menu-item-object-book menu-item-12"><p><a href="http://sample.com/book/">*書籍一覧**</a></p></li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><p><a href="http://sample.com/sample-page/">*サンプルページ**</a></p></li>
  </ul>
</div>

パラメータはオプションなので、下のコードのみでも出力されます。
メニューが複数ある際には1つ目のメニューが出力されます。

<?php wp_nav_menu(); ?>

もっと詳しいオプション内容は公式リファレンスを確認してください。

▼関数リファレンス/wp nav menu
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_nav_menu_items

「wp_nav_menu」で表現しきれない!もっと自由な形にしたい!という人や、クラスがごちゃごちゃ入るのを無くしたい!という人は「カスタムメニューを自由な形で出力する その2」をご覧ください。


関連記事