Come aggiungere la classe active alla voce di menu della pagina corrente?

Question

Come aggiungere la classe active alla voce di menu della pagina corrente?

6 feb 2014, 16:15:02

Visualizzazioni: 32.6K

Voti: 4

Ho due link: Prodotti e News.

Quando clicco su Prodotti o News, mi porta a una pagina di archivio che contiene alcuni post, quando clicco su un post mi porta alla pagina singola di quel post.

Nel menu uso questo codice sul <li> per aggiungere una classe chiamata active se la pagina è home:

<li<?php if(is_home()) {?> class="active"<?php } ?>>

Ma non so come fare quando ho due pagine di archivio e due pagine singole.

Se uso if( is_archive() || is_single() ) aggiungerà la classe a entrambe le voci di menu.

Qualsiasi aiuto sarebbe apprezzato.

Ramon Vasconcelos

171

menu

Commenti

Come hai creato il tuo menu?

s_ha_dum

6 feb 2014 16:40:34

@s_ha_dum Non ho usato wp_nav_menu, l'ho creato da solo nel codice

Ramon Vasconcelos

6 feb 2014 16:59:17

is_archive e is_single dovrebbero essere mutualmente esclusivi. Ti suggerirei di postare più codice. Perché non stai usando wp_nav_menu?

s_ha_dum

6 feb 2014 17:01:09

@s_ha_dum Ho provato a usare wp_nav_menu, aggiunge la classe current ma non la aggiunge su Prodotti né su News.

Ramon Vasconcelos

6 feb 2014 17:08:43

Usa wp_nav_menu e vedi la risposta di @BradDalton.

s_ha_dum

6 feb 2014 17:19:37

Mostra i restanti 1 commenti

Tutte le risposte alla domanda

Commenti

dove dovrei inserire questo codice? in function.php? e dove apparirà questa "products-class"?

Ramon Vasconcelos

6 feb 2014 16:58:25

Inserisci il codice alla fine del tuo file functions.php. Usa la classe nel file style.css del tuo child theme.

Brad Dalton

6 feb 2014 16:59:39

Intendo, dove questa funzione aggiunge la classe nel codice? nel body?

Ramon Vasconcelos

6 feb 2014 17:09:52

Aggiunge l'elemento al menu di navigazione che includi nel codice PHP. Lo aggiunge condizionalmente solo alla voce del menu prodotti quando sei su una pagina di archivio. Modifica semplicemente i tag condizionali in base alle tue esigenze.http://codex.wordpress.org/Conditional_Tags

Brad Dalton

6 feb 2014 17:13:23

Suppongo che i tuoi post Prodotti e News siano custom post.
Per entrambi i conditional tag, esiste un equivalente specifico per $post_type:

if (is_post_type_archive('products')) {
   // ...
} elseif (is_post_type_archive(array('news', 'something'))) {
   // ...
} elseif (is_singular('products')) {
   // ...
} elseif (is_singular(array('news', 'something'))) {
   // ...
}

Quindi, per Prodotti, sarebbe:

if (is_post_type_archive('products') || is_singular('products'))

News di conseguenza.

Riferimenti:

tfrommen

9.23K

6 feb 2014 17:14:16

Brad Dalton 6.97K · Accepted Answer · 2014-02-06T16:36:51Z

Puoi aggiungere classi condizionali per ciascun elemento nel file functions del tuo child theme:

Ecco un esempio che puoi modificare in base alle tue esigenze.

add_filter('nav_menu_css_class' , 'wpsites_nav_class' , 10 , 2);

function wpsites_nav_class($classes, $item){

if( is_archive() && $item->title == "Prodotti"){     

         $classes[] = "products-class";
 }
 return $classes;

Fonte http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

Puoi quindi stilizzare il tuo menu di navigazione utilizzando la nuova classe nel file style.css del tuo child theme.

.products-class {

Le tue dichiarazioni CSS
}

Questo codice CSS è condizionale in base al codice PHP sopra riportato.

Brad Dalton

6.97K

6 feb 2014 16:36:51