サポート » テーマ » wp_nav_menuを使ってレスポンシブ対応メニューの作成

  • お世話になっておりますUNYORAです。
    テーマを自作する際、wp_nav_menuを使用したとき、メニューをレスポンシブに対応させるにはどうすればいいのでしょうか?
    定石みたいな方法はありますでしょうか?

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • スレッド開始 UNYORA

    (@unyora)

    http://wordpress.hitsuji.me/custom-menu-for-smartphones/#A0.B0.C3.D3.E0.F3
    あ、なるほどこんな感じでタグを合わせればいいのか

    bootstrap3を使う手段もありそうですね
    皆様はどのような手段をとっていられますでしょうか?
    教えていただければ幸いです。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    手早いのは「’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,
    ) );

    スレッド開始 UNYORA

    (@unyora)

    皆様ありがとうございます。
    いろんな方法があると同時に、そのままではliにクラス名がつけられないんですね。
    なかなか難儀ですね(´・ω・`)

    カスタムメニューのliには好きなクラスをつけられますよ

    まず、ダッシュボードの[外観]-[メニュー]のページの右上あたりに[表示オプション▼]とありますので、クリックします。
    [詳細メニュー設定を表示]のなかで「CSSクラス」をチェックします。

    するとメニュー項目の設定に「CSS class (オプション)」を入力するテキストボックスが表示されるようになります。
    ここに好きなクラス名を入力します。ホームならhomeとかですね。

    そうすると、wp_nav_menuで出力したliに指定したクラスが付いてきます。

    おためしください~

    スレッド開始 UNYORA

    (@unyora)

    ありがとうございます!
    こんなところに!?

    テーマを自作する際、wp_nav_menuを使用したとき、メニューをレスポンシブに対応させるにはどうすればいいのでしょうか?
    定石みたいな方法はありますでしょうか?

    あまり難しく、考えなくてもいいのではないでしょうか

    大抵のテーマには、水平方向に並んだwp_nav_menu()と、もう一つ、サイドバーに メニューウィジェットがありますよね。サイドバーもwp_nav_menu()を使っています。

    大ざっぱには、レスポンシブに対応するというのは、水平方向に並んだメニューをサイドバーのメニューウィジェット形式に切り替える作業と考えるといいのではないでしょうか?

    水平方向に並んだ、hoverすると、サブメニューが表示されるメニューのstyleの特徴は、
    主には、float 設定と position:absoluteで、display:noneとhover時のdisplay:blockの切り替えで、それっぽく表現しています。

    モバイルメニューは、float 設定と position:absoluteの設定を上書きして、これらの設定を取っ払って、通常のリスト形式で表示すると考えればいいです。

    デフォルトテーマではこれ以外に、アクセシビリティ設定として(キーボードコントロール)を行うために、jsが使われています。

    実際のスタイル設定は、デフォルトテーマを参考にするといいと思います。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「wp_nav_menuを使ってレスポンシブ対応メニューの作成」には新たに返信することはできません。