Thêm lớp vào liên kết cụ thể trong menu tùy chỉnh

Tôi biết bạn có thể thêm một lớp trong các tùy chọn menu tùy chỉnh, nhưng nó thêm nó vào LI trước A. Tôi muốn áp dụng lớp trực tiếp cho A cụ thể này thay vì toàn bộ LI.

Vì vậy, thay vì đầu ra

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

Tôi muốn nó cũng như thế này.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Có ý kiến ​​gì không?

bạn có thể sử dụng nav_menu_css_classbộ lọc

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

Sử dụng mục $ này bạn có thể bất kỳ điều kiện nào bạn muốn. và điều này sẽ thêm lớp vào li cụ thể và bạn có thể định kiểu thẻ dựa trên đó như sau:

.my_class a{
   background-color: #FFFFFF;
}

Tôi tìm thấy một giải pháp tại trang web này thông qua việc sử dụng xe tập đi tùy chỉnh .

Hai bước: thay thế mã wp_nav_menu mặc định bằng mã đã được chỉnh sửa và sau đó thêm mã vào hàm.php của chủ đề.

Đầu tiên, thay thế wp_nav_code mặc định bằng dòng sau (mã được sao chép từ trang web trên):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

Tiếp theo, thêm đoạn mã sau vào hàm.php. Bằng cách này, bạn thực sự có thể thêm một lớp vào các liên kết menu:

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        ) .'"' : '';

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

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

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

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

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

Đến cuối mã là một số dòng bắt đầu bằng $ itemDefput. Cụ thể, bạn muốn xem phần này:

$item_output .= '<a'. $attributes .'>';

Bởi vì dòng này xác định đầu ra cho đầu html liên kết. Nếu bạn thay đổi nó thành một cái gì đó như thế này:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

Sau đó, tất cả các liên kết của bạn trong menu sẽ có class = "abc" được thêm vào chúng.

Điều đó nói rằng, nó không cho phép một lớp tùy chỉnh cho mỗi liên kết (hoặc ít nhất là tôi không biết cách mã hóa nó). Đây là một vấn đề đối với tôi.

Đối với những người hỏi tại sao bạn muốn làm điều này? Tôi muốn để menu của mình liên kết mở hộp đèn (hộp màu, để cụ thể hơn) và họ yêu cầu các lớp trên các liên kết để làm điều đó. Ví dụ:

<a class="lightbox1" href="#">Photo</a>

Có cách nào để tự động tạo các lớp, chẳng hạn như "lightbox1" cho liên kết đầu tiên, "lightbox2" cho liên kết thứ hai, v.v.

GIẢI QUYẾT !!!! Tôi cần phải tìm ra điều này để tạo liên kết mục menu với HTML nội tuyến trong một hộp ưa thích. Dán đoạn mã sau vào hàm của chủ đề.php:

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Sau đó ... trong tab Menu của Bảng điều khiển WP, tạo liên kết tùy chỉnh, thêm nó vào menu của bạn. Trên đầu có tùy chọn Màn hình, hãy đảm bảo bạn đã chọn "Mối quan hệ liên kết (XFN)". Nó sẽ thêm trường đó vào mục menu tùy chỉnh của bạn. Nhập "Fancybox" (không có dấu ngoặc kép) vào trường và lưu menu của bạn.

Hàm tìm kiếm cuộc gọi đến menu điều hướng, sau đó tìm bất cứ nơi nào bạn có rel="fancybox"và thay thế nó bằng một rel="fancybox" class="fancybox". Bạn có thể thay thế Fancybox bằng bất kỳ lớp nào bạn cần để thêm vào các mục menu. Ngay và luôn!

Các câu trả lời hiện tại dường như không nhận ra rằng câu hỏi là làm thế nào để thêm một lớp vào aphần tử chứ không phải liphần tử hoặc quá phức tạp. Đây là một cách tiếp cận đơn giản bằng cách sử dụng nav_menu_link_attributesbộ lọc cho phép bạn nhắm mục tiêu một menu cụ thể dựa trên slug và liên kết trang cụ thể trong menu đó dựa trên ID của nó. Bạn có thể var_dump $ args và $ item để có thêm nhiều cách tạo điều kiện của bạn.

add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4);

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

Tôi biết điều này đã được trả lời từ lâu, nhưng cũng như thông tin chung, tôi đã tìm thấy cách thêm một lớp vào từng mục menu bằng cách sử dụng tùy chọn "Màn hình" của trang quản trị WordPress cho Menu tùy chỉnh.

Tôi đã phải làm một cái gì đó tương tự gần đây và tìm ra một cách khác. Tôi đã phải thêm một lớp tương tự cho một plugin hộp đèn Nivo. Vì vậy, tôi đã thêm "nivo" vào thuộc tính rel ("Mối quan hệ liên kết (XFN)") và sau đó là phần sau trên nav_menu_link_attributesbộ lọc.

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);

Ở khu vực phía trên của Appearance -> Menustrang, nhấp để mở rộng Screen Options, chọn hộp kiểm của CSS Classes. Bây giờ khi bạn mở rộng từng mục menu đã thêm, bạn sẽ thấy một CSS Classes (optional)trường.