Cách thêm menu phụ vào menu được tạo bởi wp_nav_menu bằng cách sử dụng plugin


11

Tôi đã một menu được tạo ra bởi wp_nav_menuđó trông giống như

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

Tôi muốn sửa đổi menu ở trên bằng cách thêm menu phụ vào "Mục 3" bằng cách sử dụng plugin của mình, vì vậy bên dưới là đầu ra mong muốn của tôi.

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

Tôi đã thử làm theo các bộ lọc nhưng chúng không giúp tôi đạt được đầu ra trên.

wp_setup_nav_menu_item
wp_get_nav_menu_items
wp_nav_menu_items

Cách giải quyết 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;
}

Giải pháp trên có hiệu quả nhưng tôi nghĩ đó không phải là cách thích hợp để đạt được kết quả mong muốn. Tôi muốn có một giải pháp tốt từ bạn.


Wow, vậy không có câu trả lời nào khác cho câu hỏi này? Tôi cũng đang tìm kiếm một cách giải quyết đơn giản ở đây. Một cái gì đó không liên quan đến phân tích chuỗi. Có một cách dễ dàng hơn, phải không?
rút tiền

Hỗ trợ WP về làm mờ cấu trúc html này. Cách giải quyết chỉ cần thay đổi tên lớp css menu con. Tốt hơn là viết lại các lớp css của bạn cho cấu trúc menu wordpress.
Foxsk8

Câu trả lời:


2

Bạn có thể sửa đổi thực đơn của mình bằng cách sử dụng walker.

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

tạo một tập tin subMothy.php trong thư mục chủ đề thêm mã bên dưới.

<?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

Hook wp_nav_menu_itemslà đúng nếu bạn sẽ thêm các mục vào cấu trúc của WP Nav Menu. Xem ví dụ dưới đây để thêm liên kết "Trang chủ" tĩnh. Liên kết là tĩnh, từ hàm home_url()và tôi chỉ sử dụng điều này trong các đối số từ WP Nav Menu fpr các giá trị trước và sau. Mục li là tĩnh, chỉ được ghi trong WordPress, nếu bạn sử dụng Walker cho phần tử này. Các hook wp_nav_menu_itemsnằm trong danh sách ul. Sau khi xác định var cho nội dung mục mới này, tôi thêm nó vào danh sách mặc định trong var $items, đặt trước đầu ra danh sách. Bây giờ chỉ là một sự trở lại của tất cả các nội dung.

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

Có vẻ như bạn không đọc báo cáo vấn đề của tôi nên giải pháp của bạn không phải là điều tôi muốn, tôi không cần đính kèm một mục ở đầu hoặc cuối menu nhưng tôi cần một menu phụ bên dưới một mục cha mẹ cụ thể. Xin vui lòng đọc câu hỏi, tất cả mọi thứ được giải thích rất rõ ràng.
Tahir Yasin

Xin lỗi, có bạn có quyền; nhưng thường là vấn đề ngôn ngữ nền. Nhưng tôi sẽ xem cho một giải pháp.
bueltge
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.