WordPress:カスタムメニューを複数表示させる方法

ヘッダーにPC用とスマホ用のナビゲーションを作らないといけない場合があったのでカスタムメニューで複数のナビゲーションを作る方法をメモ。

functions.phpにカスタムメニューの設定の記述を追加

 register_nav_menus( array(
     'menu_pc' => 'PC_MENU_AREA',
     'menu_sp' => 'SP_MENU_AREA',
 ));

その後、header.phpなどにナビゲーションを出力させる記述を追加。
パラメータの値などはCodexのwp nav menuのページを参考にして。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu#.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF

例:PC用のナビの記述

    <?php
        $pcNav = array(
            'menu_class'      => 'menu_pc',
            'container'       => 'div',
            'container_id'    => 'gnav',
            'theme_location'  => 'menu_pc',
        );
        wp_nav_menu( $pcNav );
    ?>

位置の設定だけならこんな風に簡単に書くことができます。

PC用ナビの表示させたい箇所に下記の記述
   <?php
        $pcNav = array(
            'theme_location'  => 'menu_pc',
        );
        wp_nav_menu( $pcNav );
    ?>

SP用ナビの表示させたい箇所に下記の記述
   <?php
        $spNav = array(
            'theme_location'  => 'menu_sp',
        );
        wp_nav_menu( $spNav );
    ?>
 'theme_location' => 'menu_pc', 

この値がナビゲーションを表示させる位置になります。
あとはWordPressのダッシュボードの「外観>メニュー」の中でメニューの作成と位置の設定をおこないます。

今回は
PC用ナビゲーション:nav_pc
SP用ナビゲーション:nav_sp
を作成。

ちなみに位置の管理にはこんな感じで表示されます。

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。