もふふのはてな

メインのブログに書くほどではない雑多な記事を置く場所

WordPressの自作テーマにカスタムメニューを設置する

タイトルの通り、WordPressの自作テーマにカスタムメニューを設置した手順のメモ。

カスタムメニューというのは、WordPressの管理画面から編集することができるメニューのこと。これを使わずテンプレートにベタ打ちでメニューを書くと管理が大変なのです。

functions.phpでカスタムメニューを有効にする

functions.phpに以下の一文を加えます。

<?php register_nav_menu('location', 'description'); ?>

location(識別子)とdescription(説明)はお好みで。たとえば、次のように書くと、管理画面の「外観」に「ヘッダーメニュー」が追加されます。

<?php register_nav_menu('header', 'ヘッダーメニュー'); ?>

識別子はこの後の作業で使います。

メニューを設置する箇所のphpを編集する

次に、header.phpsidebar.phpなど、メニューを設置したい場所に以下のコードを書きます。

<?php wp_nav_menu( array('theme_location' => 'location' ) ); ?>

'location'部分には先ほどfunctions.phpで指定したのと同じ文字列を入れます。例だとこうなります。

<?php wp_nav_menu( array('theme_location' => 'header' ) ); ?>

ここでは沢山のパラメータを設定することができるので、必要に応じてarrayに書き加えましょう。全てのパラメータの一覧はCodexで確認できます。

<?php wp_nav_menu( array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
) ); ?>

管理画面からメニューを編集する

ここまでの作業を終えると管理画面の「外観」/「メニュー」からメニューの中身を編集して、ページに表示させることができるようになります。ここでの操作はデフォルトテーマ(Twentyシリーズ)などを使用したときと同じです。

あとは必要に応じてcssなども編集しましょう。

参考