web-dev-qa-db-ja.com

第12子テーマでデスクトップメニューとは異なるモバイルメニューを取得する方法

私のデスクトップWebサイトとは別のメニューを自分のモバイルWebサイトに使用したいです。違うと私は内容ではなくレイアウトを意味します。私はちょうど12のテーマのモバイルメニューを使いたいのです。

私がこれまでにやったこと：

私の子供のfunctions.phpに私は次のコードを追加しました：

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

今私は私のダッシュボードに2つのメニューを作成することができます。 （ダッシュボード>メニュー>地域）

Header.phpでは、何を変更すればよいのか正確にはわかりませんので、メインメニューの代わりにモバイルメニューが読み込まれます。

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

私は<?php _e( 'Menu', 'twentytwelve' ); ?>を<?php _e( 'Menu', 'mobile' ); ?>に変更しようとしました、しかしこれは私のモバイルメニューにメニューコンテンツを変えませんでした。

私はこのコードに慣れていないので、誰かが私を正しい方向に向けることができれば幸いです。

ご協力ありがとうございました！

menusnavigationmobiletheme-twenty-twelve
3
patrick

同様の記事で推奨されているように： https://wordpress.stackexchange.com/a/156494/74343

1.） menu を好きなように作成し、例として " mobile-menu "と " desktop-menu "のように好きな名前を付けます。

2.） 子テーマ header.phpでは、wp_is_mobile（）フラグに従って次のように切り替えることができます。

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

しかし 私は "WP Responsive Menu"プラグインを使いました。これにより私もモバイル用のメニューを選択することができました。 「WPレスポンシブメニュー」の設定では、モバイルに表示しない要素を選択する必要があります。これは、12のテーマの場合は「＃site-navigation」です。

ハッピーコーディング！

5
Nikolai

まだ誰かがこのスレッドを見ているのであれば、私はしばらくこれに苦労していました、これらのどれもうまくいきませんでした...私はCSSでそれをすることができました！

基本的には、モバイルとデスクトップに必要なすべてのアイテムを含む1つの巨大なメニューを作成します。次に、それぞれのメニュー項目に「hide-mobile」と「hide-desktop」のクラスを追加します。

このCSSを使用してください：

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}
0
Jordan

Jordansのコメントに加えて、Wordpressのメニュー項目にクラスを追加する方法を知っておくことが重要です。

CSSクラスをWordPressメニューに追加するには、まずWordPressテーマの[外観]> [メニュー]に進みます。次に、画面の右上にある[画面オプション]タブを見つけます。クリックしてパネルを開き、[CSSクラス]というラベルの付いたボックスをオンにします。編集したいメニューを選択し、CSSクラスを追加したいリンクをクリックします。

0
Jeroen Onstenk