Adaugă clase personalizate pentru link-uri în wp_nav_menu

Question

Adaugă clase personalizate pentru link-uri în wp_nav_menu

29 iul. 2014, 15:11:04

Vizualizări: 36.7K

Voturi: 10

Vreau să adaug o clasă personalizată pentru link-uri în rezultatele generate de wp_nav_menu.

În mod implicit, rezultatul arată așa:

<li id="menu-item" class="menu-item menu-item-type-custom">
    <a href="http://example.com">example</a>
</li>

Vreau să obțin acest rezultat:

<li id="menu-item" class="menu-item menu-item-type-custom ">
    <a href="http://example.com" class="class">example</a>
</li>

Hector

682

dezvoltare teme meniuri teme cârlige navigare

Toate răspunsurile la întrebare

Comentarii

Cum aș putea include mai multe atribute diferite atts în interiorul ancorului? Adică nu doar adăugarea de clase, ci și adăugarea aria-expanded="false"?

Robert Andrews

18 iul. 2018 14:48:24

Ca în a treia linie a funcției.

cjbj

18 iul. 2018 14:52:51

Am o soluție mai bună https://stackoverflow.com/a/67859550/9207553

Mohammad Ayoub Khan

6 iun. 2021 16:19:37

Am o soluție pentru a adăuga o clasă la tag-ul anchor.

1: Pasul 1: adăugați acest cod în functions.php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2: Apoi folosiți-o astfel în tema dumneavoastră

<?php
        // Afișează meniul aici
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'menu_class'      => 'footer-top list-unstyled',
            'add_a_class'     => 'box-link text-dark',
        ));
?>

Mohammad Ayoub Khan

191

6 iun. 2021 16:41:50

Puteți adăuga clase în mod nativ prin interfața din admin. Deschideți Opțiuni Ecran (în partea dreaptă sus a ecranului) și bifați Clase CSS. Nu-mi amintesc dacă clasa se aplică pe link în sine, dar puteți oricând să țintiți link-ul din interiorul containerului cu CSS (.class a).

Rarst

100K

29 iul. 2014 17:34:55

Comentarii

Admin vă permite să aplicați CSS doar elementelor <li>, nu și elementelor <a>, așa cum dorește cel care a pus întrebarea.

Fusion

14 feb. 2019 04:27:28

Aceasta nu adaugă o clasă etichetei anchor, ci doar elementului li care o conține.

Lisa

26 iun. 2023 21:06:14

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $classes, $item, $args ) {
    if(isset($args->add_link_class)) {
        $classes['class'] = $args->add_link_class;
    }
    return $classes;
}

Acum poți folosi add_link_class ca un array în meniuri.

kunal

1

19 sept. 2020 15:32:52

cjbj 15K · Accepted Answer · 2016-09-30T12:41:59Z

Puteți face acest lucru cu ajutorul filtrului nav_menu_link_attributes.

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'class'; // sau ceva bazat pe $item
    $atts['class'] = $class;
    return $atts;
}

cjbj

15K

30 sept. 2016 12:41:59