http://wordpress.hitsuji.me/custom-menu-for-smartphones/#A0.B0.C3.D3.E0.F3
あ、なるほどこんな感じでタグを合わせればいいのか
bootstrap3を使う手段もありそうですね
皆様はどのような手段をとっていられますでしょうか？
教えていただければ幸いです。
手早いのは「’container_class’」「’container_id’」「’menu_class’」あたりでメニューにクラスをつけて、そのクラスと出力されるHTMLをみながらCSSを書いていくというやり方でしょうか。
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
Walkerクラスを使ってがっつりカスタマイズも出来るみたいなのですが、
こちらはあまり使ったことがないので分かる方の登場を待ちたいと思います。
liにclassがつけられなくて泣けたので、functions.php にこんなコードを書いて、
add_filter( 'nav_menu_css_class', function ( $classes, $item, $args ) {
if ( ! empty( $args->li_class ) ) {
$classes[] = $args->li_class;
}
return $classes;
}, 10, 3 );
テーマでこんな感じで使ったりしてます。
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'navigation',
'li_class' => 'navigation__item',
'link_before' => '<span class="navigation__text">',
'link_after' => '</span>',
'items_wrap'=> '%3$s',
'container' => false,
) );
皆様ありがとうございます。
いろんな方法があると同時に、そのままではliにクラス名がつけられないんですね。
なかなか難儀ですね（´・ω・｀）
カスタムメニューのliには好きなクラスをつけられますよ
まず、ダッシュボードの[外観]-[メニュー]のページの右上あたりに[表示オプション▼]とありますので、クリックします。
[詳細メニュー設定を表示]のなかで「CSSクラス」をチェックします。
するとメニュー項目の設定に「CSS class (オプション)」を入力するテキストボックスが表示されるようになります。
ここに好きなクラス名を入力します。ホームならhomeとかですね。
そうすると、wp_nav_menuで出力したliに指定したクラスが付いてきます。
おためしください~
テーマを自作する際、wp_nav_menuを使用したとき、メニューをレスポンシブに対応させるにはどうすればいいのでしょうか？
定石みたいな方法はありますでしょうか？
あまり難しく、考えなくてもいいのではないでしょうか
大抵のテーマには、水平方向に並んだwp_nav_menu()と、もう一つ、サイドバーに メニューウィジェットがありますよね。サイドバーもwp_nav_menu()を使っています。
大ざっぱには、レスポンシブに対応するというのは、水平方向に並んだメニューをサイドバーのメニューウィジェット形式に切り替える作業と考えるといいのではないでしょうか？
水平方向に並んだ、hoverすると、サブメニューが表示されるメニューのstyleの特徴は、
主には、float 設定と position:absoluteで、display:noneとhover時のdisplay:blockの切り替えで、それっぽく表現しています。
モバイルメニューは、float 設定と position:absoluteの設定を上書きして、これらの設定を取っ払って、通常のリスト形式で表示すると考えればいいです。
デフォルトテーマではこれ以外に、アクセシビリティ設定として（キーボードコントロール）を行うために、jsが使われています。
実際のスタイル設定は、デフォルトテーマを参考にするといいと思います。
