X

Cum să evidențiați pagina curentă în meniul de navigare WordPress

Fragmente de IsItWP

Doriți să evidențiați pagina curentă în meniul de navigare sau în bara laterală? Evidențierea paginii curente facilitează navigarea.

Funcțiile meniului WordPress (wp_nav_menu, wp_list_pages) adaugă automat clasa current_page_item la elementul li care conține linkul activ. Deci, tot ce trebuie să facem este să folosim aceeași clasă pentru a evidenția pagina curentă.

Instrucțiuni:

Tot ce trebuie să faceți este să adăugați acest cod în fișierul style.css al temei dvs.:

/* Highlight using list element */
li.current_page_item{
	background:#999;
	color:#fff;
}

/* Highlight using link element */
li.current_page_item a{
	text-decoration:underline;
	background:#666;
}

Notă: Dacă este prima dată când adăugați secvențe de cod în WordPress, consultați ghidul nostru despre cum să copiați / lipiți corect secvențe de cod în WordPress, pentru a nu vă defecta accidental site-ul.

Dacă ți-a plăcut acest fragment de cod, te rugăm să iei în considerare să consulți și alte articole de pe site, cum ar fi: Cele mai bune unelte de creare pagini WordPress (Comparativ).

[code]/* Highlight using list element */ li.current_page_item{ background:#999; color:#fff; } /* Highlight using link element */ li.current_page_item a{ text-decoration:underline; background:#666; }[/code]

Comentarii   Lasă un răspuns

  1. unde găsesc fișierul „style.css al temei” pe versiunea gratuită de WordPress?

  2. Mulțumesc. Am căutat în mai multe locuri, dar soluția dvs. a funcționat. Apreciez cu adevărat!

    1. Hei Robert, mă bucur că soluția noastră a funcționat pentru tine.

      Urmăriți-ne pe Facebook și Twitter pentru mai multe ghiduri interesante. :)

  3. Funcționează bine, mulțumesc!

  4. Acest cod funcționează dacă meniul are un singur nivel. Altfel, evidențiază linkul de la primul nivel și toate subcategoriile din el. De exemplu, ați fi la „acasă>despre>știri” și ar evidenția toate categoriile „acasă” în loc de doar „știri”.

  5. Tema mea adaugă clasa CSS `.current-menu-item`.

    Poate fi diferit în funcție de temă, dar procesul rămâne același.

  6. funcționează ca prin farmec și mi-a economisit timp prețios. Mulțumesc

  7. Mulțumesc mult!!!!

  8. salut domnule, este bun, dar vreau să schimb culoarea linkului, nu culoarea de fundal, vă rog ajutați-mă

    1. Culoarea ar fi controlată de proprietatea color, de exemplu:

      li.current_page_item a{ color:#666; }

  9. cred că trebuie doar să adăugați acest lucru în CSS și nu în pagina functions.php. A funcționat perfect în CSS-ul meu.

    Mulțumesc

    1. Mulțumesc, fragmentul a fost actualizat.

Adaugă un comentariu

Suntem bucuroși că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de confidențialitate, iar toate linkurile sunt nofollow. NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.

Lista de verificare pentru lansarea WordPress

Lista de verificare finală pentru lansarea WordPress

Am compilat toate elementele esențiale de verificare pentru lansarea următorului dvs. site WordPress într-o singură carte electronică la îndemână.
Da, trimite-mi eBook-ul gratuit!