Aggiungere una Classe a un Link Specifico nel Menu Personalizzato

22 feb 2011, 22:12:06
Visualizzazioni: 36.6K
Voti: 10

So che è possibile aggiungere una classe nelle opzioni del menu personalizzato, ma questa viene aggiunta al tag LI prima del tag A. Voglio applicare la classe direttamente a questo specifico tag A invece che all'intero LI.

Quindi invece di avere come output

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

Voglio che sia così.

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

Qualche idea?

4
Commenti

Giusto per essere chiari, cosa intendi con aggiungere una classe? Quali opzioni clicchi esattamente nel pannello di amministrazione?

Wordpressor Wordpressor
22 feb 2011 22:17:15

Qual è lo scopo di questo? Basta cambiare il tuo selettore da .class a .class a?

wyrfel wyrfel
22 feb 2011 23:06:25

Sì, neanche io lo capisco, basta impostare il tuo CSS per puntare al link in base all'elemento <li> che lo contiene. Se hai un sottomenu sotto quell'elemento specifico non è un problema, puoi gestirlo anche nel CSS (posso fornire esempi se necessario).

t31os t31os
22 feb 2011 23:36:38

+1 per il tuo commento @wyrfel ... @Picard102 dai un'occhiata alla specificità CSS. Questo ti spiegherà anche come indirizzare correttamente gli elementi HTML tramite CSS.

kaiser kaiser
25 mar 2011 15:51:42
Tutte le risposte alla domanda 7
1
11

puoi utilizzare il filtro nav_menu_css_class

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(tua condizione){ //esempio: puoi controllare il valore di $item per decidere qualcosa...
        $classes[] = 'my_class';
    }
    return $classes;
}

Utilizzando questo $item puoi impostare qualsiasi condizione desideri. e questo aggiungerà la classe al li specifico e puoi stilizzare il tag a in base a ciò così:

.my_class a{
   background-color: #FFFFFF;
}
22 feb 2011 23:10:55
Commenti

Sto cercando di aggiungere una classe agli elementi con un template di pagina specifico, ma non riesco a far funzionare get_page_template_slug. Avete qualche idea?

Bill Bill
3 ott 2014 19:35:48
1

Ho trovato una soluzione su questo sito attraverso l'uso di un walker personalizzato.

Due passaggi: sostituire il codice predefinito di wp_nav_menu con uno modificato e poi aggiungere codice al functions.php del tema.

Per prima cosa, sostituisci il codice wp_nav_menu predefinito con il seguente (il codice è copiato dal sito sopra citato):

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

Successivamente, aggiungi il seguente codice al functions.php. Facendo questo puoi effettivamente aggiungere una classe ai link del 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';
        }

        }
}

Verso la fine del codice ci sono diverse righe che iniziano con $item_output. In particolare, vuoi guardare questo pezzo:

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

Perché questa riga determina l'output per l'inizio dell'html del link. Se lo cambi in qualcosa come questo:

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

Allora tutti i link nel menu avranno class="abc" aggiunto ad essi.


Detto questo, non permette una classe personalizzata per ogni link (o almeno non so come codificarlo). Questo è un problema per me.

Per quelli che chiedono perché vorresti fare questo? Voglio che i link del mio menu aprano lightbox (colorbox, per essere più precisi), e richiedono classi sui link per farlo. Per esempio:

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

C'è forse un modo per generare dinamicamente le classi, come "lightbox1" per il primo link, "lightbox2" per il secondo link e così via?

29 mar 2011 09:47:52
Commenti

@Rainman la tua risposta mi è stata utile e hai posto una buona domanda. Sono sicuro che tu abbia trovato una soluzione migliore, ma per chi non l'avesse ancora fatto, ho usato una versione modificata della soluzione trovata qui: http://www.wpbeginner.com/wp-themes/how-to-add-custom-items-to-specific-wordpress-menus/

NW Tech NW Tech
22 mag 2013 01:27:38
1

RISOLTO!!!! Avevo bisogno di capire come fare in modo che la voce del menu linkasse a HTML inline in un fancybox. Incolla il seguente codice nel file function.php del tuo tema:

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

Poi... nella scheda Menu del Pannello di Controllo di WP, crea un link personalizzato e aggiungilo al tuo menu. In alto dove dice "Opzioni Schermo", assicurati di aver selezionato "Relazione Link (XFN)". Aggiungerà quel campo alla tua voce di menu personalizzata. Digita "fancybox" (senza virgolette) nel campo e salva il tuo menu.

La funzione cerca la chiamata al menu di navigazione, poi trova dove hai un rel="fancybox" e lo sostituisce con un rel="fancybox" class="fancybox". Puoi sostituire fancybox con qualsiasi classe tu debba aggiungere alle voci del tuo menu. Fatto e finito!

14 dic 2011 23:47:22
Commenti

Ottimo post!! Solo una cosa da notare. Il codice non funzionerà se qualcuno aggiunge un titolo. Mi sono imbattuto nello stesso problema... Quindi ho semplicemente rimosso il tag A dall'inizio di entrambi i valori di sostituzione. Lasciandomi con qualcosa del genere... return preg_replace('/rel="fancybox"/', 'class="fancybox"', $ulclass, -1); Il codice funziona alla grande!

User User
29 mar 2013 15:59:52
1

Le risposte attuali non sembrano riconoscere che la domanda riguarda come aggiungere una classe all'elemento a e non all'elemento li, oppure sono troppo complicate. Ecco un approccio semplice che utilizza il filtro nav_menu_link_attributes per consentirti di puntare a un menu specifico basato sul suo slug e a un link specifico in quel menu basato sul suo ID. Puoi usare var_dump su $args e $item per ottenere altri modi per creare la tua condizione.

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

        // Assicurati di non sovrascrivere eventuali classi esistenti
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}
6 mar 2016 22:17:16
Commenti

grazie mille, ho cambiato il if in if ($args->theme_location == 'footer-menu' ) per selezionare il menu in base alla sua posizione, e tutto funziona perfettamente

efirvida efirvida
20 apr 2018 21:48:36
0

Sapevo che questa domanda era stata risolta molto tempo fa, ma solo come informazione generale, ho scoperto come aggiungere una classe a ciascuna voce del menu individualmente utilizzando l'opzione "Schermo" della pagina di amministrazione di WordPress per i Menu Personalizzati.

21 nov 2011 22:49:13
0

Recentemente ho dovuto fare qualcosa di simile e ho trovato un'altra soluzione. Dovevo aggiungere una classe simile per un plugin Nivo lightbox. Quindi ho aggiunto "nivo" all'attributo rel ("Link Relationship (XFN)") e poi il seguente codice sul filtro 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);
8 gen 2015 03:28:56
0

Nella parte superiore della pagina Aspetto -> Menu, clicca per espandere le Opzioni Schermo, seleziona la casella di controllo Classi CSS. Ora quando espandi ciascuna voce del menu aggiunta, vedrai un campo Classi CSS (opzionale).

21 dic 2018 18:28:11