web-dev-qa-db-ja.com

2つに分けて結合 WP モバイルビューでメニューを1つにまとめる

私はしばらくの間、問題に対する適切な解決策を見つけようとしてきました。私が作っているテーマでは、私はいくつかの連絡先リンクとその私の「ロゴエリア」とメインメニューの下にトップの「管理バー」メニューを持っています。

モバイルビューでこれらのメニューを1つのメニューにマージしたいのですが、マージしたときにそれぞれのメニューを何らかの形で制御することができます（各メニューのフォントサイズが異なるなど）。

もちろん、モバイルビューに表示して通常のメニューを非表示にするためだけに必要なすべてのリンクを含む4番目のメニューを作成することもできますが、それがこのシナリオを実行するための本当に最善の方法ですか？

これは私の完全なヘッダーマークアップです。

<header id="masthead" class="site-header" role="banner">

    <?php if ( has_nav_menu( 'admin' ) ) : ?>
        <nav id="top-nav" class="top-bar menues" role="navigation"> 
                <?php wp_nav_menu( array( 'theme_location' => 'admin' ) ); ?>
        </nav><!-- #top-nav -->
    <?php endif; ?>

    <div class="site-branding wrap">
        <figure class="site-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <img class="inject-me" src="<?php echo esc_url( get_template_directory_uri() ); ?>/icons/logo.svg" alt="logo">
            </a>
        </figure><!-- .site-logo -->    
    </div><!-- .site-branding -->

    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation menues" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'testsite' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->
    <?php endif; ?>


</header><!-- #masthead -->

私はjqueryを使用するいくつかのコードのヒントを見ましたか？あるメニューを別のメニューに複製しますが、WordPress固有のものは絶対に使用しません。私が達成しようとしている結果は、モバイルビューのメインメニューの下にある「管理バー」に沿ってタグを付けることです。そうすればあなたは1つの長いリンクリストを得ることができます。

誰かが同じような問題に取り組んでいますか？

menusjqueryjavascript
2
nicklas bryntesson

私は同じ問題を抱えていました。私が選んだ解決策は、メニューを単一のdivラッパーの下に置き、それらを別々のdivクラスに置くことによってメニューを「マージ」することでした。

このようなもの：

<div class="menu-wrapper">
   <div class="menu1">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'         => 'top-menu',
            ) );
        ?>
   </div>
   <div class="menu2">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-2',
                'menu_id'         => 'main-menu',
            ) );
        ?>
   </div>
</div>

実際のメニューオブジェクトを「マージ」したい場合は、wp_get_nav_menu_items()、array_merge($menu1, $menu2)の順に変数にメニュー項目を配置してみてください。要素の制御に関しては、マージリストを使用して新しいメニューHTMLを作成するときに識別子を追加することができます。

これがあなたが探している答えであるのか、それともその最善のアプローチであるのか、私にはわかりません。それが役に立てば幸い。

3
AstralProgrammer