Làm cách nào để thêm <span> vào mỗi Menu Liên kết với văn bản liên kết đến dữ liệu-attr?


8

Làm thế nào để tôi có được một cái gì đó như dưới đây? Mã của tôi là như thế này:

wp_nav_menu(
     array(
       'theme_location' => 'header_menu',
       'container_id' => 'menu',
       'link_before' => '<span data-hover="link-text-here">',
       'link_after' => '</span>',
     )
  );

Tôi muốn nhận được kết quả dưới đây:

<nav class="main-nav">
    <li><a href="#"><span data-hover="Home">Home</span></a></li>
    <li><a href="#"><span data-hover="Proyects">Proyects</span></a></li>
</nav>

Xin tư vấn cho tôi.

Câu trả lời:


4

Giải pháp 1: Sử dụng tùy chỉnh walker

Tôi có một số ý tưởng từ việc thêm lớp span bên trong thẻ neo liên kết wp_nav_menu và thực hiện một số thay đổi cho yêu cầu của bạn.

1. Thêm mã này dưới đây vào hàm.php của bạn trước.

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu{
  function start_el(&$output, $item, $depth, $args){
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
       $class_names = $value = '';
       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
      $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';



        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><span data-hover="'. $item->title .'">';
        $item_output .=$args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
        $item_output .= $description.$args->link_after;
        $item_output .= '</span></a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

2. Thêm mã dưới đây vào header.phpnơi bạn wp_nav_menuđã cài đặt. Giải thích dưới đây là mã để nó cài đặt menu tùy chỉnh mới trong trường hợp này Nav_Walker_Nav_Menu.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>

Hy vọng điều này sẽ giúp bạn tốt!

Giải pháp 2: Sử dụng wp_list_pages

Vui lòng kiểm tra trang này . Bạn có thể thấy đoạn trích của họ. Nếu bạn đặt các nhịp xung quanh các thẻ liên kết, bạn có thể sử dụng link_beforelink_after

wp_list_pages("link_before=<span data-hover="link-text-here">&link_after=</span>");

Thông báo của nó nói: Cố gắng để có được tài sản của phi đối tượng trong /Applications/MAMP/htdocs/wp.dev/wp-content/themes/eta-theme/functions.php trên đường dây 98
Mohamed Rihan

Vậy, mã ở dòng 98 là gì?
Giải pháp AddWeb Pvt Ltd

$ itemDefput = $ args-> trước đó; $ itemDefput. = '<a'. $ thuộc tính. '> <span data-hover = "'. $ item-> title. '">'; $ itemDefput. = $ args-> link_b Before .apply_filters ('the_title', $ item-> title, $ item-> ID); $ itemDefput. = $ description. $ args-> link_after; $ itemDefput. = '</ span> </a>'; $ itemDefput. = $ args-> after;
Mohamed Rihan

bây giờ có vẻ ổn couse của tôi đã không thêm menu trên dashbord .. cảm ơn
Mohamed Rihan

8

Kể từ phiên bản 4.4.0, bộ lọc 'nav_menu_item_args' đã được thêm vào. Điều này cho phép bạn đặt các thuộc tính 'link_b Before' và 'link_after' cho mỗi mục.

add_filter('nav_menu_item_args', function ($args, $item, $depth) {
    if ($args->theme_location == 'header_menu') {
        $title             = apply_filters('the_title', $item->title, $item->ID);
        $args->link_before = '<span data-hover="' . $title . '">';
        $args->link_after  = '</span>';
    }
    return $args;
}, 10, 3);

Điều đó không đúng .. bên dưới là đầu ra sau khi sử dụng bộ lọc ... <li id ​​= "menu-item-44" class = "menu-item menu-item-type-post_type menu-item-object-object-page-menu -item page_item page-item-24 current_page_item menu-item-44 "> <a href=" sandbox.test/about" aria-civerse="page"> <span data-hover = "About"> About </ span> </a> </ li>
Daren Zammit

2

Hãy thử như sau:

wp_nav_menu(
 array(
   'theme_location' => 'header_menu',
   'container_id' => 'menu',
   'walker' => new description_walker()
 )
);

Và thêm nó vào functions.php:

class description_walker extends Walker_Nav_Menu{
  function start_el(&$output, $item, $depth, $args){
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
       $class_names = $value = '';
       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
      $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';



        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><span>';
        $item_output .=$args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
        $item_output .= $description.$args->link_after;
        $item_output .= '<span></a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
}

Bằng cách này, bạn có thể dễ dàng thêm thẻ span ...


nhưng tôi muốn dữ liệu attr bên trong khoảng
Mohamed Rihan
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.