ヘッダーに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
を作成。
ちなみに位置の管理にはこんな感じで表示されます。

コメントを残す