1

私はレスポンシブテーマを使用するWordpress（Buddypress付き）アプリケーションです。ただし、画面の幅が768px未満の場合は、メニューを選択ボックスのドロップダウンメニューに変更しました。

これを行う私のアイデアを以下に示します。これは、2つのwp_nav_menuを使用して実行されます。1つは（ウォーカーの助けを借りて）メニューを選択ドロップダウンメニューとして作成します（もちろん、response.cssの助けを借りて）。

しかし、私はここで問題があり、助けが必要です：

選択ボックスのメニューは正しく見えますが、メニューのオプションを変更しても実際には何も起こりません（つまり、ページは変更されません）。どうして？

header.php：

<div id="navigation" role="navigation">
    <?php

    <?php
        wp_nav_menu( array(
            'container' => false,
            'menu_id' => 'nav',
            'theme_location' => 'primary',
            'fallback_cb' => 'bp_dtheme_main_nav' )
        );

        wp_nav_menu(array(
            'container' => false,
            'menu_id' => 'nav',
            'theme_location' => 'primary', // your theme location here
            'walker'         => new Walker_Nav_Menu_Dropdown(),
            'items_wrap'     => '<select>%3$s</select>',
            'fallback_cb'    => 'bp_dtheme_main_nav'
        ));


        class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{
            function start_lvl(&$output, $depth){
               $indent = str_repeat("\t", $depth);
            }

            function end_lvl(&$output, $depth){
              $indent = str_repeat("\t", $depth);
            }

            function start_el(&$output, $item, $depth, $args){
              $item->title = str_repeat("&nbsp;", $depth * 4).$item->title;

              parent::start_el(&$output, $item, $depth, $args);

              $output = str_replace('<li', '<option', $output);
            }

            function end_el(&$output, $item, $depth){
              $output .= "</option>\n";
            }
        } ?>
</div>

編集：レンダリングされた選択オプションに値が含まれていないことに気付いたので、リダイレクト用のオプション値を取得できません。コードに明らかに問題がありますが、何ですか？

4

1 に答える 1

2

私があなたの質問を正しく読んでいるなら、欠けている部分はwindow.location、選択メニューのオプションの1つが選択されたときに変更されるJavascriptです。

オンロードJSに以下を追加します。

 $("#responsive-nav select").change(function() {
    window.location = $(this).find("option:selected").val();
 });

編集

OK、私は実際にこれを自分でやっているテーマに実装したところです。この質問でOneTrickPonyの回答を使用したようです-

https://wordpress.stackexchange.com/questions/27497/how-to-use-wp-nav-menu-to-create-a-select-menu-dropdown

ナビゲーションとして使用するURL値がないため（ご指摘のとおり）、どのように機能するのかわかりません。そのため、start_elメソッドを次のように変更しました。

function start_el(&$output, $item, $depth, $args){
  // add spacing to the title based on the depth
  $item->title = str_repeat("&nbsp;", $depth * 4).$item->title;

  parent::start_el(&$output, $item, $depth, $args);

  $href = ! empty( $item->url ) ? ' value="'   . esc_attr( $item->url ) .'"' : '';

  // no point redefining this method too, we just replace the li tag...
  $output = str_replace('<li', '<option '.$href, $output);

}

Javascriptを上記と同じに保ち、wp_nav_menus呼び出しをheader.phpのidを持つ形式でラップしましたresponsive-nav。

  <!-- RESPONSIVE NAVIGATION FLIP -->
    <form id="responsive-nav" action="" method="post">
    <select>
    <option value="">Navigation</option>
        <?php 

        $menu = wp_nav_menu(array(
          'theme_location' => 'primary', 
          'walker'         => new Walker_Nav_Menu_Dropdown()
        ));

        ?>
    </select>
    </form>
    <!-- /END RESPONSIVE NAV -->
于 2013-03-03T11:18:58.937 に答える