WordPress自作テーマ-カスタムメニューを設定する

デフォルトのワードプレスは、管理画面からナビゲーションを操作することができません。管理画面からナビゲーションを操作できるようにテンプレートファイルに記述していきます。

ワードプレスでカスタムメニューを有効化する

メニューを動的に生成して、管理画面から操作できるように関数を定義します。
functions.phpに記述することで、カスタムメニューを有効化することができます。

register_my_menus()、またはregister_my_menu()をfunctions.phpに記述します。sをつけることで複数のカスタムメニューを登録することができるようになります。ヘッダーとフッターの2か所に配置してみます。
その他、サイドバーやモバイルメニューなどにも配置できます。

比較的分かりやすい記述ですね。
以下のように記述して管理画面に入ってみると、管理画面からメニューを操作できるようになっていることが分かります。

function register_my_menus()
{
    register_nav_menus(array(
        'main-menu' => 'メインメニュー',
        'footer-menu' => 'フッターメニュー',
    ));
}
add_action('after_setup_theme', 'register_my_menus');

メニューを動的に表示する

functions.phpに関数を定義して管理画面での操作はできるようになりましたが、このままでは動的に出力ができません。wp_nav_menu()を記述することで、メニューを動的に出力できるようにします。

wp_nav_menuのパラメータを指定し、メニュー位置や詳細を指定することができます。ヘッダーには、次のように指定しました。フッターも同様に、theme_locationで位置を指定します。

<?php 
wp_nav_menu( 
array( 
'depth' => 0, 
'theme_location' => 'main-menu', 
'container' => 'nav', 
'menu_class' => 'menu', 
) ); ?>

メニューはリスト形式で、divで囲われて出力されます。さらに、divには自動でcontainerクラスが付与されています。
リスト(ul)をnavで囲いたいので、’container’ => ‘nav’としてdivを変更しておきます。
さらに、menu_class（ul要素に指定するクラス）をmenuとしました。depthは階層数を指定します。0にすることでメニューを全表示できます。

wp_nav_menu（）で吐き出されるメニューは色々あるのですが、あまり使わないものもあって、初めは混乱します。
自動で付与されてくるidやclassが理解できてくると、制作も大分楽になってきます。
いらないidやclassは除去するという方法もあります。