Özel Menü'de Belirli Bir Bağlantıya Sınıf Ekle

Özel menü seçeneklerinde bir sınıf ekleyebileceğinizi biliyorum, ancak A'dan önce LI'ye ekliyor. Sınıfı tüm LI yerine doğrudan bu belirli A'ya uygulamak istiyorum.

Yani çıktı yerine

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

Ben de böyle olmasını istiyorum.

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

Herhangi bir fikir?

nav_menu_css_classfiltre kullanabilirsiniz

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

Bu $ öğesini kullanarak istediğiniz herhangi bir koşulu yapabilirsiniz. ve bu, sınıfı belirli li'ye ekler ve buna göre bir etikete stil uygulayabilirsiniz:

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

Bu sitede özel bir yürüteç kullanarak bir çözüm buldum .

İki adım: varsayılan wp_nav_menu kodunu düzenlenmiş bir kodla değiştirin ve ardından temanın function.php dosyasına kod ekleyin.

İlk olarak, varsayılan wp_nav_code'u aşağıdaki ile değiştirin (kod yukarıdaki siteden kopyalanır):

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

Ardından, function.php dosyasına aşağıdaki kodu ekleyin. Bunu yaparak aslında menü bağlantılarına bir sınıf ekleyebilirsiniz:

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

        }
}

Kodun sonuna doğru $ item_output ile başlayan birkaç satır vardır. Özellikle, bu parçaya bakmak istiyorsunuz:

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

Çünkü bu satır, html bağlantısının başlangıcı için çıktıyı belirler. Bunu böyle bir şeye değiştirirseniz:

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

Ardından menüdeki tüm bağlantılarınıza class = "abc" eklenir.

Bununla birlikte, her bağlantı için özel bir sınıfa izin vermiyor (veya en azından nasıl kodlayacağımı bilmiyorum). Bu benim için bir mesele.

Bunu neden yapmak isteyenler için? Benim menü bağlantıları açık kutuları (daha spesifik olmak için, renk kutuları) açmak istiyorum ve bunu yapmak için bağlantıları sınıflar gerektirir. Örneğin:

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

Sınıfları dinamik olarak oluşturmanın, örneğin birinci bağlantı için "lightbox1", ikinci bağlantı için "lightbox2" gibi bir yolu var mı?

ÇÖZÜLDÜ !!!! Bir fantezi kutusundaki satır içi HTML menü öğesi bağlantısı yapmak için bunu anlamaya gerekiyordu. Aşağıdaki kodu temanızın function.php dosyasına yapıştırın:

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

Ardından ... WP Panosunun Menü sekmesinde özel bir bağlantı oluşturun ve menünüze ekleyin. Ekran Seçenekleri yazan üst kısımda "Bağlantı İlişkisi (XFN)" seçeneğini işaretlediğinizden emin olun. Bu alanı özel menü öğenize ekler. Alana "fantezi kutusu" (tırnak işaretleri olmadan) yazın ve menünüzü kaydedin.

İşlev, navigasyon menüsüne yapılan çağrıyı arar, ardından a'nız olan her yeri bulur rel="fancybox"ve yerine a ile değiştirir rel="fancybox" class="fancybox". Fancybox'ı, menü öğelerinize eklemek istediğiniz sınıfla değiştirebilirsiniz. Bitti ve bitti!

Şu anki cevaplar, sorunun aöğeye değil, liöğeye nasıl sınıf ekleneceği ya da çok karmaşık olduğunun farkında değil gibi görünüyor . Burada nav_menu_link_attributes, belirli bir menüyü bilgi dosyasına göre ve o menüdeki kimliğine göre belirli bir sayfa bağlantısını hedeflemenize olanak tanıyan filtreyi kullanarak basit bir yaklaşım bulabilirsiniz. Durumunuzu oluşturmanın daha fazla yolunu bulmak için var_dump $ args ve $ item öğelerini kullanabilirsiniz.

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

Bunun uzun zaman önce cevaplandığını biliyorum, ama genel bilgi olarak, Özel Menüler için WordPress yönetici sayfasının "Ekran" seçeneğini kullanarak her menü öğesine ayrı ayrı bir sınıf eklemeyi buldum.

Son zamanlarda benzer bir şey yapmak zorunda kaldım ve başka bir yol buldum. Nivo ışık kutusu eklentisi için benzer bir sınıf eklemek zorunda kaldım. Bu yüzden rel özniteliğine ("Link Relationship (XFN)") "nivo" ve ardından nav_menu_link_attributesfiltrede aşağıdakileri ekledim .

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 -> MenusSayfanın üst kısmında , simgesini tıklatıp genişletin Screen Options, onay kutusunu işaretleyin CSS Classes. Şimdi eklenen menü öğesinin her birini genişlettiğinizde bir CSS Classes (optional)alan göreceksiniz .