Cum să adaugi clasa active pe elementul curent din meniu?

Question

Cum să adaugi clasa active pe elementul curent din meniu?

6 feb. 2014, 16:15:02

Vizualizări: 32.6K

Voturi: 4

Am două linkuri: Produse și Știri.

Când dau click pe Produse sau Știri, sunt direcționat către o pagină de arhivă care conține câteva articole, iar când dau click pe un articol sunt direcționat către pagina individuală a acestuia.

În meniu folosesc acest cod pe <li> pentru a adăuga o clasă numită active dacă pagina este home:

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

Dar nu știu cum să fac acest lucru când am două pagini de arhivă și două pagini individuale.

Dacă folosesc if( is_archive() || is_single() ) va adăuga clasa pe ambele elemente din meniu.

Orice ajutor ar fi apreciat.

Ramon Vasconcelos

171

meniuri

Comentarii

Cum este creat meniul tău?

s_ha_dum

6 feb. 2014 16:40:34

@s_ha_dum Nu am folosit wp_nav_menu, l-am creat eu manual în cod

Ramon Vasconcelos

6 feb. 2014 16:59:17

is_archive și is_single ar trebui să fie mutual exclusive. Aș sugera să postezi mai mult cod. De ce nu folosești wp_nav_menu?

s_ha_dum

6 feb. 2014 17:01:09

@s_ha_dum Am încercat să folosesc wp_nav_menu, adaugă clasa current dar nu adaugă această clasă pe Produse și Noutăți.

Ramon Vasconcelos

6 feb. 2014 17:08:43

Folosește wp_nav_menu și vezi răspunsul lui @BradDalton.

s_ha_dum

6 feb. 2014 17:19:37

Arată celelalte 1 comentarii

Toate răspunsurile la întrebare

Comentarii

unde ar trebui să pun acest cod? în function.php? și unde va apărea această clasă "products-class"?

Ramon Vasconcelos

6 feb. 2014 16:58:25

Pune codul la sfârșitul fișierului tău functions.php. Folosește clasa în fișierul style.css al temei tale child.

Brad Dalton

6 feb. 2014 16:59:39

Mă refer unde adaugă această funcție clasa în cod? pe body?

Ramon Vasconcelos

6 feb. 2014 17:09:52

Adaugă acest lucru la elementul din meniul de navigație pe care îl incluzi în codul PHP. Adaugă condiționat acest lucru doar la elementul de meniu pentru produse atunci când te afli pe o pagină de arhivă. Pur și simplu modifică tag-urile condiționale pentru a se potrivi nevoilor tale.http://codex.wordpress.org/Conditional_Tags

Brad Dalton

6 feb. 2014 17:13:23

Presupun că postările tale Products și News sunt postări personalizate.
Pentru ambele condiții, există echivalente specifice pentru $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'))) {
   // ...
}

Deci, pentru Products, ar fi:

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

News în mod corespunzător.

Referințe:

tfrommen

9.23K

6 feb. 2014 17:14:16

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

Puteți adăuga clase condiționale pentru fiecare în fișierul de funcții al temei child:

Iată un exemplu pe care îl puteți modifica pentru a se potrivi nevoilor dumneavoastră.

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

function wpsites_nav_class($classes, $item){

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

         $classes[] = "clasa-produse";
 }
 return $classes;

Sursă http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

Apoi puteți stiliza meniul de navigare folosind noua clasă în fișierul style.css al temei child.

.clasa-produse {

Declarațiile dumneavoastră CSS
}

Acest cod CSS este condiționat de codul PHP de mai sus.

Brad Dalton

6.97K

6 feb. 2014 16:36:51