Cum se adaugă prima și ultima clasă la elementele din meniul de navigare WordPress

Recent, în timp ce lucrăm la un proiect de design personalizat, am găsit nevoia de a adăuga un anumit stil personalizat elementelor noastre din meniul de navigare WordPress. Acest design a necesitat, în special, un stil diferit pentru primul element de meniu și pentru ultimul element de meniu. Acum am putea intra ușor în adminul WordPress și adăugăm o clasă css personalizată la primul și la ultimul element de meniu. Dar pentru că livrăm acest lucru unui client, este foarte probabil ca acesta să rearanjeze ordinea meniurilor în viitor. Utilizarea modului de adăugare a clasei de pe panoul de administrare nu a fost cea mai eficientă metodă. Așa că am decis să o facem folosind filtre. În acest articol, vă vom arăta cum să modelați primul și ultimul element de meniu WordPress în mod diferit prin adăugarea unei clase CSS de prim și .last.

Tot ce trebuie să faceți este să deschideți tema functions.php fişier. Apoi introduceți următorul cod:

 funcția wpb_first_and_last_menu_class ($ items) $ items [1] -> clase [] = 'prima'; articolele $ [count ($ items)] -> classes [] = 'last'; returnați articolele $;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Un alt mod de a modela primul și ultimul element de meniu în mod diferit ar fi utilizarea selectorilor CSS care funcționează în majoritatea browserelor moderne.

 ul # yourmenuid> li: first-child  ul # yourmenuid> li: ultimul-copil  

Notă: dacă aveți o mulțime de utilizatori pe browsere mai vechi (Internet Explorer), atunci probabil că doriți să evitați următoarea tehnică.

Sperăm că acest articol v-a ajutat. Am creat o foaie de înșelăciune pe clasele implicite WordPress generate de CSS, care pot veni la îndemână atunci când elementele de meniu de stil, de asemenea.