Aggiungere classi personalizzate ai link in wp_nav_menu

Question

Aggiungere classi personalizzate ai link in wp_nav_menu

29 lug 2014, 15:11:04

Visualizzazioni: 36.7K

Voti: 10

Voglio aggiungere una classe personalizzata ai link in output di wp_nav_menu.

Per esempio, l'output predefinito è:

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

Voglio ottenere questo:

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

Hector

682

sviluppo temi menu temi hook navigazione

Tutte le risposte alla domanda

Commenti

Come posso includere diversi attributi atts all'interno dell'ancora? Cioè, non solo aggiungere classi ma anche attributi come aria-expanded="false"?

Robert Andrews

18 lug 2018 14:48:24

Come nella terza riga della funzione.

cjbj

18 lug 2018 14:52:51

Ho una soluzione migliore https://stackoverflow.com/a/67859550/9207553

Mohammad Ayoub Khan

6 giu 2021 16:19:37

Ho una soluzione per aggiungere una classe al tag anchor.

1° Passo: aggiungi questo in 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° Passo: poi usalo così nel tuo tema

<?php
        // Mostra il Menu qui
        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 giu 2021 16:41:50

Puoi aggiungere classi in modo nativo tramite l'interfaccia nell'area di amministrazione. Apri Opzioni Schermo (in alto a destra dello schermo) e seleziona Classi CSS. Non ricordo se la classe viene applicata al link stesso, ma puoi sempre puntare al link all'interno del contenitore con CSS (.class a).

Rarst

100K

29 lug 2014 17:34:55

Commenti

L'admin consente di applicare CSS solo agli elementi <li>, non agli elementi <a> come desidera chi ha posto la domanda.

Fusion

14 feb 2019 04:27:28

Questo non aggiunge una classe al tag anchor, solo al li che lo contiene.

Lisa

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

Ora puoi utilizzare add_link_class come array nei menu.

kunal

1

19 set 2020 15:32:52

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

Puoi farlo con il filtro 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'; // o qualcosa basato su $item
    $atts['class'] = $class;
    return $atts;
}

cjbj

15K

30 set 2016 12:41:59