플러그인을 사용하여 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>

플러그인을 사용하여 "Item 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 strucure를 defoult에 대한 WP 지원. 해결 방법은 하위 메뉴 CSS 클래스 이름 만 변경하면됩니다. 워드 프레스 메뉴 구조를 위해 CSS 클래스를 다시 작성하는 것이 좋습니다.
Foxsk8

답변:


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 Nav Menu의 구조에 항목을 추가하면 후크 가 옳습니다. 정적 "홈"링크를 추가하려면 아래의 예제를 참조하십시오. 링크는 함수에서 정적이며 home_url()WP Nav Menu의 인수에서만 전후 값을 표시합니다. li-item은 정적이며이 요소에 Walker를 사용하는 경우 WordPress에서만 변경됩니다. 후크 wp_nav_menu_items는 목록 안에 ul있습니다. 이 새 항목 컨텐츠에 대한 var를 정의한 후이를 var의 기본 목록에 추가 $items하고 목록 출력 전에 설정합니다. 이제 모든 콘텐츠 만 반환합니다.

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;
}

내 문제 설명을 읽지 않아서 솔루션이 내가 원하는 것이 아니기 때문에 메뉴 시작 또는 끝에 항목을 첨부 할 필요는 없지만 특정 상위 항목 아래에 하위 메뉴가 필요합니다. 질문을 읽으십시오. 모든 것이 매우 명확하게 설명되어 있습니다.
Tahir Yasin

죄송합니다. 맞습니다. 그러나 종종 언어 문제가 배경입니다. 그러나 해결책을 찾을 것입니다.
bueltge
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.