WordPressのカスタムメニューで複数のメニューを切り替えてみる

2017年2月2日カテゴリー : WordPress コメント : 0

　静的 HTML のウェブサイトで設置したグローバルメニューに変更があった場合、ひとつひとつのページを手作業でコピー＆ペーストした苦労を経験したことがあるかもしれません。その点、WordPress は管理画面から変更するだけで一度にすべてのページに反映されるので、大変便利です。

　しかも複数のメニューを作成しておき、それをテンプレートファイルのソースコードから切り替えることもできます。ページトップとフッターで違うメニューを表示させたり、固定ページとブログ記事でメニューを切り替えるといった使い方もできます。

ブログにグローバルメニューを表示する

おさらいとして、ブログにひとつグローバルメニューを表示する方法を復習しましょう。まずは function.php に次の一行を追加します。

add_theme_support('menus');

1	add_theme_support('menus');

今度はテーマの PHP ファイルを開いて、グローバルメニューを表示したい場所に次の一行を追加します。テーマにもよりますが、多くの場合には header.php ではないでしょうか。

<?php wp_nav_menu(); ?>

1	<?php wp_nav_menu(); ?>

管理画面の「外観」→「メニュー」に移動し、メニューを作成します。メニューに固定ページを追加したい場合は、前もって作成しておく必要があります。メニューの位置の「ヘッダーのナビゲーション」にチェックを入れておいてください。

「メニューを保存」ボタンを押し忘れないようにしてください。

複数のカスタムメニューをメニューを切り替える

まずは複数のメニューを作成しましょう。「新規メニューを作成」リンクをクリックします。

「メニュー名」を入力して「メニューを作成」ボタンを押すのですが、このメニュー名は後ほどソースコードで指定する際に使用するので、見分けがつきやすい名前を付けたほうがよいでしょう。

再度メニューを編集する必要がある場合、編集するメニューを選択から目的のメニューを選んで「選択」ボタンを押せば切り替えることができます。

メニューを編集し終わったら、今度はソースコードの編集です。

テーマの PHP ファイルを開き、次の一行を追加します。wp_nav_menu テンプレートタグの menu プロパティに先ほど付けたメニュー名を指定するだけです。

<?php wp_nav_menu(array('menu' => 'menu2')); ?>

1	<?php wp_nav_menu(array('menu' => 'menu2')); ?>

menu プロパティを指定してカスタムメニューを表示する場合、「ヘッダーのナビゲーション」にチェックが入っていてもいなくても関係ありません。

今度はフッターに違うメニューを設置したい場合を考えてみます。footer.php を開き、次のソースコードを追加します。

<?php wp_nav_menu(array('menu' => 'menu3')); ?>

1	<?php wp_nav_menu(array('menu' => 'menu3')); ?>

ページトップとフッターで別々のカスタムメニューが表示されているでしょうか。ほかにも固定ページとブログ記事などで違うメニューを設置して動作を確認してみてください。

theme_location

ネットで調べていると、wp_nav_menu テンプレートタグの theme_location プロパティを使ってカスタムメニューを切り替える方法がたくさん出てきます。結論から申しますと、私はこのプロパティをどの場面で使うのかがよくわかりませんでした。

このプロパティを使うには、まずは function.php に次のように記述をしておく必要があります。

register_nav_menus(array(
    'toppage_menu' => 'トップページ用メニュー',
    'blogentry_menu' => 'ブログ記事用メニュー',
    'footer_menu' => 'フッター用メニュー'
));

register_nav_menus(array(

'toppage_menu' => 'トップページ用メニュー',

'blogentry_menu' => 'ブログ記事用メニュー',

'footer_menu' => 'フッター用メニュー'

));

register_nav_menus テンプレートタグを記述した場合、add_theme_support(‘menus’); は削除しても構いません。書式は次のようになります。

register_nav_menus(array($location => $description));

1	register_nav_menus(array($location => $description));

メニューの管理画面が次のように変化します。

カスタムメニューを表示したい場合、次のソースコードをテーマの PHP ファイルに追加します。

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

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

この方法は管理画面を見てもらうとわかるように、$location に対応する $description にチェックを入れるひと手間が余計にかかります。たいした手間ではありませんがチェックを入れ間違えることなども考えると、先ほどの menu プロパティにメニュー名を指定する方法のほうがシンプルで私は好きです。

その他

テーマの header.php に次のようにしてカスタムメニューを設置したとします。

<div class="navigation">
    <?php wp_nav_menu(array('menu' => 'menu2'); ?>
</div><!-- .navigation -->

<?php wp_nav_menu(array('menu' => 'menu2'); ?>

</div>

このとき出力される HTML は、デフォルトの設定の場合には次のようになります。

<DIV class="navigation">
    <DIV class="menu-menu2-container">
        <UL class="menu" id="menu-menu2">
            <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15" id="menu-item-15">
                <A href="http://#">焼肉</A>
            </LI> 
            <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16" id="menu-item-16">
                <A href="http://#">ハンバーグ</A>
            </LI> 
            <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17" id="menu-item-17">
                <A href="http://#">すき焼き</A>
            </LI>
        </UL>
    </DIV>
</DIV><!-- .navigation -->

</LI>

<A href="http://#">ハンバーグ</A>

</LI>

</LI>

</UL>

</DIV>

</DIV>

register_nav_menus テンプレートタグには、menu や location 以外にも渡すことのできるプロパティがありますが、例えば次のようにカスタマイズしたいとします。

ul タグにクラスや ID はいらない
ul タグのリストを勝手に div タグで囲んでほしくない

先ほどの header.php を次のように修正します。

<div class="navigation">
    <?php
    $defaults = array(
        'menu'       => 'menu2',
        'container'  => false,
        'items_wrap' => '<ul>%3$s</ul>',
    );
    wp_nav_menu($defaults);
    ?>
</div><!-- .navigation -->

<?php

$defaults = array(

'menu' => 'menu2',

'container' => false,

'items_wrap' => '<ul>%3$s</ul>',

);

wp_nav_menu($defaults);

</div>

function.php を次のように修正しても同じ結果になります。

function my_wp_nav_menu_args($args = '') {
    $args['menu'] = 'menu2';
    $args['container'] = false;
    $args['items_wrap'] = '<ul>%3$s</ul>';
    return $args;
}
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args');

function my_wp_nav_menu_args($args = '') {

$args['menu'] = 'menu2';

$args['container'] = false;

$args['items_wrap'] = '<ul>%3$s</ul>';

return $args;

}

add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args');

だいぶスッキリしました。

<DIV class="navigation">
    <UL>
        <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15" id="menu-item-15">
            <A href="http://#">焼肉</A>
        </LI> 
        <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16" id="menu-item-16">
            <A href="http://#">ハンバーグ</A>
        </LI> 
        <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17" id="menu-item-17">
            <A href="http://#">すき焼き</A>
        </LI>
    </UL>
</DIV><!-- .navigation -->