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