เพิ่มคลาสไปที่ลิงก์เฉพาะในเมนูกำหนดเอง

ฉันรู้ว่าคุณสามารถเพิ่มคลาสในตัวเลือกเมนูที่กำหนดเองได้ แต่มันเพิ่มลงใน LI ก่อนที่ A. ฉันต้องการใช้คลาสโดยตรงกับ A เฉพาะนี้แทนที่จะเป็น LI ทั้งหมด

ดังนั้นแทนที่จะเป็นผลลัพธ์

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

ฉันต้องการให้มันเป็นอย่างนี้

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

ความคิดใด ๆ

คุณสามารถใช้nav_menu_css_classตัวกรอง

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

การใช้รายการ $ นี้คุณสามารถเงื่อนไขใด ๆ ที่คุณต้องการ และสิ่งนี้จะเพิ่มคลาสให้กับ li ที่เฉพาะเจาะจงและคุณสามารถจัดสไตล์แท็กตามที่ต้องการโดยทำดังนี้

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

ผมพบว่าวิธีการแก้ปัญหาที่เว็บไซต์นี้ผ่านการใช้งานของวอล์คเกอร์ที่กำหนดเอง

สองขั้นตอน: แทนที่รหัส wp_nav_menu ที่เป็นค่าเริ่มต้นด้วยรหัสที่แก้ไขแล้วเพิ่มรหัสไปยัง functions.php ของชุดรูปแบบ

ก่อนอื่นให้แทนที่ค่าเริ่มต้น wp_nav_code ด้วยค่าต่อไปนี้ (รหัสถูกคัดลอกมาจากเว็บไซต์ด้านบน):

    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())
     );

จากนั้นเพิ่มรหัสต่อไปนี้ลงใน 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        ) .'"' : '';

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

        }
}

ในตอนท้ายของรหัสมีหลายบรรทัดที่ขึ้นต้นด้วย $ item_output โดยเฉพาะอย่างยิ่งคุณต้องการดูงานชิ้นนี้:

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

เพราะบรรทัดนี้กำหนดเอาท์พุทสำหรับการเริ่มต้นของลิงค์ html หากคุณเปลี่ยนเป็นแบบนี้:

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

จากนั้นลิงก์ทั้งหมดของคุณในเมนูจะมี class = "abc" เพิ่มเข้ามา

ที่กล่าวว่ามันไม่อนุญาตให้มีคลาสที่กำหนดเองสำหรับแต่ละลิงก์ (หรืออย่างน้อยฉันก็ไม่รู้จะเขียนโค้ดอย่างไร) นี่เป็นปัญหาสำหรับฉัน

สำหรับผู้ถามว่าทำไมคุณต้องการทำเช่นนี้? ฉันต้องการให้เมนูของฉันเปิดลิงก์ Lightboxes (colorboxes ให้เจาะจงมากขึ้น) และพวกเขาต้องการคลาสที่ลิงค์เพื่อทำเช่นนั้น ตัวอย่างเช่น:

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

อาจมีวิธีสร้างคลาสแบบไดนามิกเช่น "lightbox1" สำหรับลิงก์แรก "lightbox2" สำหรับลิงก์ที่สองเป็นต้นหรือไม่

แก้ไข !!!! ฉันต้องคิดออกเพื่อให้ลิงค์รายการเมนูเพื่อ HTML แบบอินไลน์ในกล่องแฟนซี วางรหัสต่อไปนี้ลงใน function.php ของธีมของคุณ:

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

จากนั้น ... ในแท็บเมนูของ WP Dashboard สร้างลิงค์ที่กำหนดเองเพิ่มไว้ในเมนูของคุณ ด้านบนที่มีข้อความระบุว่าตัวเลือกหน้าจอตรวจสอบให้แน่ใจว่าคุณได้เลือก "ลิงก์ความสัมพันธ์ (XFN)" มันจะเพิ่มฟิลด์นั้นลงในรายการเมนูที่คุณกำหนดเอง พิมพ์ "fancybox" (โดยไม่ใส่เครื่องหมายอัญประกาศ) ลงในฟิลด์และบันทึกเมนูของคุณ

ฟังก์ชั่นรูปลักษณ์สำหรับการโทรไปยังเมนูนำทางแล้วก็พบว่าที่ใดก็ตามที่คุณมีและแทนที่มันด้วยrel="fancybox" rel="fancybox" class="fancybox"คุณสามารถแทนที่ fancybox ด้วยคลาสใดก็ได้ที่คุณต้องการเพิ่มในรายการเมนูของคุณ เสร็จแล้ว!

คำตอบปัจจุบันดูเหมือนจะไม่ยอมรับว่าคำถามนั้นเป็นวิธีการเพิ่มคลาสให้กับaองค์ประกอบไม่ใช่liองค์ประกอบหรือซับซ้อนเกินไป ต่อไปนี้เป็นวิธีการง่ายๆโดยใช้nav_menu_link_attributesตัวกรองที่ช่วยให้คุณสามารถกำหนดเป้าหมายเมนูเฉพาะโดยอ้างอิงจากกระสุนและลิงค์ของหน้าที่ระบุในเมนูนั้นตามรหัสของมัน คุณสามารถ var_dump $ args และ $ item เพื่อรับวิธีเพิ่มเติมในการสร้างเงื่อนไขของคุณ

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

ฉันรู้ว่าสิ่งนี้ได้รับคำตอบเมื่อนานมาแล้ว แต่เช่นเดียวกับข้อมูลทั่วไปฉันพบวิธีเพิ่มคลาสให้กับแต่ละรายการเมนูโดยใช้ตัวเลือก "หน้าจอ" ของหน้าผู้ดูแลระบบ WordPress สำหรับเมนูกำหนดเอง

ฉันต้องทำสิ่งที่คล้ายกันเมื่อเร็ว ๆ นี้และหาวิธีอื่น ฉันต้องเพิ่มคลาสที่คล้ายกันสำหรับปลั๊กอิน Lightbox Nivo ดังนั้นฉันจึงเพิ่ม "nivo" ลงในแอตทริบิวต์ rel ("Link Relationship (XFN)") แล้วตามด้วยnav_menu_link_attributesตัวกรอง

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

ในพื้นที่ด้านบนของAppearance -> Menusหน้าคลิกเพื่อขยายตรวจสอบช่องทำเครื่องหมายของScreen Options CSS Classesตอนนี้เมื่อคุณขยายรายการเมนูที่เพิ่มแต่ละรายการคุณจะเห็นCSS Classes (optional)ฟิลด์