Tambahkan Kelas ke Tautan Tertentu di Menu Kustom

Saya tahu Anda bisa menambahkan kelas di opsi menu kustom, tetapi menambahkannya ke LI sebelum A. Saya ingin menerapkan kelas langsung ke A spesifik ini daripada seluruh LI.

Jadi, bukannya output yang sedang

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

Saya ingin juga seperti ini.

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

Ada ide?

Anda bisa menggunakan nav_menu_css_classfilter

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

Dengan menggunakan $ item ini, Anda dapat memenuhi persyaratan apa pun yang Anda inginkan. dan ini akan menambahkan kelas ke li spesifik dan Anda dapat men-style tag berdasarkan seperti itu:

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

Saya menemukan solusi di situs ini melalui penggunaan alat bantu jalan khusus .

Dua langkah: ganti kode wp_nav_menu default dengan yang diedit, dan kemudian tambahkan kode ke functions.php dari tema.

Pertama, ganti wp_nav_code default dengan yang berikut ini (kode disalin dari situs di atas):

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

Selanjutnya, tambahkan kode berikut ke functions.php. Dengan melakukan ini, Anda sebenarnya dapat menambahkan kelas ke tautan 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';
        }

        }
}

Menjelang akhir kode ada beberapa baris yang dimulai dengan $ item_output. Secara khusus, Anda ingin melihat bagian ini:

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

Karena baris ini menentukan output untuk awal tautan html. Jika Anda mengubahnya menjadi seperti ini:

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

Maka semua tautan Anda di menu akan ditambahkan class = "abc".

Yang mengatakan, itu tidak memungkinkan kelas khusus untuk setiap tautan (atau setidaknya saya tidak tahu bagaimana kode itu). Ini masalah bagi saya.

Bagi mereka yang bertanya mengapa Anda ingin melakukan ini? Saya ingin memiliki tautan menu saya membuka lightbox (kotak warna, untuk lebih spesifik), dan mereka memerlukan kelas pada tautan untuk melakukan itu. Sebagai contoh:

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

Apakah mungkin ada cara untuk menghasilkan kelas secara dinamis, seperti "lightbox1" untuk tautan pertama, "lightbox2" untuk tautan kedua, dan seterusnya?

TERPECAHKAN!!!! Saya perlu memikirkan ini untuk membuat tautan item menu ke HTML sebaris di kotak mewah. Rekatkan kode berikut ke function.php tema Anda:

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

Lalu ... di tab Menu Dashboard WP, ​​buat tautan khusus, tambahkan ke menu Anda. Di bagian atas di mana tertulis Opsi Layar, pastikan Anda telah mencentang "Hubungan Hubungan (XFN)". Ini akan menambahkan bidang itu ke item menu kustom Anda. Ketik "fancybox" (tanpa tanda kutip) ke dalam bidang dan simpan menu Anda.

Fungsi mencari panggilan ke menu navigasi, lalu menemukan di mana pun Anda memiliki rel="fancybox"dan menggantinya dengan a rel="fancybox" class="fancybox". Anda dapat mengganti fancybox dengan kelas apa pun yang perlu Anda tambahkan ke item menu Anda. Dilakukan dan dilakukan!

Jawaban saat ini tampaknya tidak mengenali bahwa pertanyaannya adalah bagaimana menambahkan kelas ke aelemen dan bukan lielemen, atau terlalu rumit. Berikut adalah pendekatan sederhana menggunakan nav_menu_link_attributesfilter yang memungkinkan Anda menargetkan menu tertentu berdasarkan siputnya dan tautan halaman tertentu di menu itu berdasarkan ID itu. Anda dapat var_dump $ args dan $ item untuk mendapatkan lebih banyak cara untuk menciptakan kondisi Anda.

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

Saya tahu ini dijawab sejak lama, tetapi sama seperti info umum, saya menemukan cara menambahkan kelas ke setiap item menu secara individual menggunakan opsi "Layar" pada halaman admin WordPress untuk Custom Menu.

Saya harus melakukan sesuatu yang serupa baru-baru ini dan menemukan cara lain. Saya harus menambahkan kelas serupa untuk plugin lightbox Nivo. Jadi saya menambahkan "nivo" ke atribut rel ("Link Relationship (XFN)") dan kemudian mengikuti nav_menu_link_attributesfilter.

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

Di bagian atas Appearance -> Menushalaman, klik untuk membuka Screen Options, centang kotak centang CSS Classes. Sekarang ketika Anda memperluas masing-masing item menu yang ditambahkan, Anda akan melihat CSS Classes (optional)bidang.