カスタムメニュー設定手順
functions.php
以下のコードをfunctions.php に記入し、カスタムメニュー機能を有効にします。
function my_menu_init() {
register_nav_menus( array(
'main-menu' => 'Main Menu',
'footer-menu' => 'Footer Menu',
) );
}
add_action( 'init', 'my_menu_init' );ここで記載した’main-menu’ は、カスタムメニューを使用する場所をテンプレート内で指定するために使用。
‘Main Menu’は、管理画面上にメニューの位置として表示されます。
管理画面でメニューを作成
管理画面「外観」>「メニュー」で、メニューを作成します。
メニュー設定 で、functions.phpで登録したメニューの位置’Main Menu’を選択。
header.php
表示させたい部分に以下のコードを記載します。
<?php
wp_nav_menu(
array(
'theme_location'=>'main-menu',
'container'=>false
)
);
?>※’container’=>false は出力されるulタグをdivタグで囲まれないようにするための指定。
設定されると、以下のような構造のコードが出力されます。
<ul class="menu">
<li class="menu-item"><a href="">メニュー</a></li>
<li class="menu-item"><a href="">メニュー</a></li>
<li class="menu-item"><a href="">メニュー</a></li>
</ul>※aタグにはクラスが割り当てられない。ここで割り当てられるクラスを参考にしてコーディングしておくこと。
カスタムメニューのアレンジ
個別にクラスを追加する
メニューに個別にcssクラスを追加することもできます。
管理画面右上にある、「表示オプション」というタグをクリックし、
「詳細メニュー設定を表示」の中から、cssクラスにチェックを入れると、個別にクラスを追加できます。
span要素を追加する
デザインの都合上メニュー名をspan要素で囲む必要がある場合などは、header.phpでメニューを呼び出す際、以下のような書き方ができます。
（<li><a href=””><span>メニュー</span></a></li> のようにしたい場合）
<?php
wp_nav_menu(
array(
'theme_location'=>'primary',
'container'=>false,
'link_before'=>'<span>',
'link_after'=>'</span>'
)
);
?>※wp_nav_menuを利用してメガメニューにする方法は以下のブログに詳しく書かれていました！ご参考を！
