Slik legger du til første og siste klasse til WordPress Navigasjonsmenyelementer

Nylig mens du jobbet på et tilpasset designprosjekt, fant vi et behov for å legge til noen tilpassede stiler til våre WordPress navigasjonsmenyelementer. Spesielt dette designet krever forskjellig styling for det første menyelementet og det siste menyelementet. Nå kan vi enkelt gå i WordPress admin og legge til en egendefinert css klasse til første og siste menyelement. Men fordi vi leverer dette til en klient, er det svært sannsynlig at de kan omorganisere rekkefølgen av menyer i fremtiden. Bruk av administrasjonspanelets måte å legge til klasser var ikke den mest effektive metoden. Så vi bestemte oss for å gjøre det ved å bruke filtre. I denne artikkelen vil vi vise deg hvordan du stiler dine første og siste WordPress menyelementer annerledes ved å legge til en .first og .last CSS klasse.

Alt du trenger å gjøre er å åpne temaet ditt functions.php fil. Lim deretter inn koden nedenfor:

 funksjon wpb_first_and_last_menu_class ($ items) $ items [1] -> klasser [] = 'first'; $ items [count ($ items)] -> klasser [] = 'sist'; returner $ elementer;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

En annen måte å style de første og siste menypunktene annerledes på, er å bruke CSS selectors som fungerer i de fleste moderne nettlesere.

 ul # yourmenuid> li: første barn  ul # yourmenuid> li: siste barn  

Merk: Hvis du har mange brukere på eldre nettlesere (Internet Explorer), vil du sannsynligvis unngå følgende teknikk.

Vi håper at denne artikkelen har hjulpet deg. Vi har laget et juksark på standard WordPress-genererte CSS-klasser, som kan komme til nytte når du styler menyelementer også.