プラグインを使用してwp_nav_menuによって生成されたメニューにサブメニューを追加する方法


11

私はによって生成されたメニューきwp_nav_menuたように見えるが

<ul class="nav-menu" id="menu-top-nav">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43"><a href="http://www.example.com/item1.com">Item 1</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44" id="menu-item-44"><a href="http://www.example.com/item2.com">Item 2</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45" id="menu-item-45"><a href="http://www.example.com/item3.com">Item 3</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46" id="menu-item-46"><a href="http://www.example.com/item4.com">Item 4</a></li>
</ul>

プラグインを使用して「アイテム3」にサブメニューを追加することにより、上記のメニューを変更したいので、以下が目的の出力です。

<ul class="nav-menu" id="menu-top-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43"><a href="http://www.example.com/item1.com">Item 1</a></li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44" id="menu-item-44"><a href="http://www.example.com/item2.com">Item 2</a></li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45" id="menu-item-45"><a href="http://www.example.com/item3.com">Item 3</a>
    <ul class="sub-menu">
      <li class="menu-item" id="menu-item-48"><a href="http://www.example.com/child1.com">child 1</a></li>
      <li class="menu-item" id="menu-item-49"><a href="http://www.example.com/child2.com">child 2</a></li>
      <li class="menu-item" id="menu-item-50"><a href="http://www.example.com/child3.com">child 3</a></li>
   </ul>
  </li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46" id="menu-item-46"><a href="http://www.example.com/item4.com">Item 4</a></li>
</ul>

次のフィルターを試してみましたが、上記の出力を達成するのに役立ちませんでした。

wp_setup_nav_menu_item
wp_get_nav_menu_items
wp_nav_menu_items

回避策1:

add_filter('wp_nav_menu_items', 'my_custom_menu_item', 10, 2);

function my_custom_menu_item($items, $args)
{
    $parent_item_number = 3;
    $pos = nth_strpos($items, '</a>', $parent_item_number) + 4;
    $cat_id = 9;
    $args = array('numberposts' => 5, 'category' => $cat_id);
    $myposts = get_posts($args);
    if (!empty($myposts))
    {
        $str_to_insert = '<ul class="sub-menu">';
        global $post;
        foreach ($myposts as $post) : 
            setup_postdata($post);
            $str_to_insert .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endforeach;
        $str_to_insert .= '</ul>';

        $items = substr($items, 0, $pos) . $str_to_insert . substr($items, $pos);
    }
    return $items;
}

function nth_strpos($str, $substr, $n, $stri = false)
{
    if ($stri)
    {
        $str = strtolower($str);
        $substr = strtolower($substr);
    }
    $ct = 0;
    $pos = 0;
    while (($pos = strpos($str, $substr, $pos)) !== false)
    {
        if (++$ct == $n)
        {
            return $pos;
        }
        $pos++;
    }
    return false;
}

上記のソリューションは機能しますが、望ましい結果を達成する適切な方法ではないと思います。私はあなたから良い解決策を持っていると思います。


わあ、この質問に対する他の答えはありませんか?ここで簡単な回避策も探しています。文字列の解析を伴わないもの。もっと簡単な方法があるはずですよね?
rgin

このhtml構造を無効にするためのWPサポート。回避策は、サブメニューのCSSクラス名のみを変更する必要があります。より良いのは、ワードプレスのメニュー構造に合わせてcssクラスを書き直すことです。
Foxsk8 14

回答:


2

walkerを使用してメニューを変更できます。

include('subMenu.php');
$menu =  wp_nav_menu( array('menu' => 'YOUR-MENU-NAME','menu_class' => 'megamenu','walker' => new subMenu));

以下のコードを追加して、テーマフォルダーにファイルsubMenu.phpを作成します。

<?php
class subMenu extends Walker_Nav_Menu {
    function end_el(&$output, $item, $depth=0, $args=array()) {

    if( 'Item 3' == $item->title ){
        $output .= '<ul class="sub-menu">
        <li class="menu-item" id="menu-item-48"><a href="http://www.example.com/child1.com">child 1</a></li>
        <li class="menu-item" id="menu-item-49"><a href="http://www.example.com/child2.com">child 2</a></li>
        <li class="menu-item" id="menu-item-50"><a href="http://www.example.com/child3.com">child 3</a></li>
        </ul>';
    }
    $output .= "</li>\n";  
    }
}

0

wp_nav_menu_itemsWPナビゲーションメニューの構造にアイテムを追加する場合、フックは正しいです。静的な「ホーム」リンクの追加については、以下の例を参照してください。関数からのリンクは静的であり、home_url()WP Navメニューからの引数の前後の値にのみこれを埋め込みます。li-itemは静的で、この要素にWalkerを使用する場合、WordPressでのみ変更されます。フックwp_nav_menu_itemsはリスト内にありますul。この新しいアイテムコンテンツの変数を定義した後$items、リスト出力の前に設定したvarのデフォルトリストにこれを追加します。これで、すべてのコンテンツのみが返されます。

add_filter( 'wp_nav_menu_items', 'fb_add_home_link', 10, 2 );
function fb_add_home_link( $items, $args ) {

    $home_item =
            '<li>' .
            $args->before .
            '<a href="' . home_url( '/' ) . '" title="Home">' .
            $args->link_before . __( 'Home' ) . $args->link_after .
            '</a>' .
            $args->after .
            '</li>';

    $items = $home_item . $items;

    return $items;
}

あなたは私の問題ステートメントを読んでいないようですので、あなたの解決策は私が望んでいるものではありません。メニューの最初または最後にアイテムを添付する必要はありませんが、特定の親アイテムの下にサブメニューが必要です。質問を読んでください、すべてのものは非常に明確に説明されています。
タヒルヤシン

申し訳ありませんが、そうです。しかし、多くの場合、言語の問題が背景になっています。しかし、解決策があります。
-bueltge
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.