Ostatnio podczas pracy nad niestandardowym projektem, odkryliśmy potrzebę dodania niestandardowych stylizacji do naszych elementów menu nawigacyjnego WordPress. Ten projekt wymagał w szczególności innej stylizacji dla pierwszego i ostatniego elementu menu. Teraz możemy łatwo przejść do panelu administracyjnego WordPress i dodać niestandardową klasę css do pierwszego i ostatniego elementu menu. Ale ponieważ dostarczamy to klientowi, jest bardzo prawdopodobne, że może on zmienić kolejność menu w przyszłości. Użycie w panelu administracyjnym sposobu dodawania klas nie było najskuteczniejszą metodą. Zdecydowaliśmy się więc na użycie filtrów. W tym artykule pokażemy, jak stylować pierwsze i ostatnie elementy menu WordPress inaczej, dodając .pierwszy i .ostatnia klasa CSS.
Wszystko, co musisz zrobić, to otworzyć swój motyw funkcje.php plik. Następnie wklej następujący kod:
function wpb_first_and_last_menu_class ($items) {
$items [1] - >classes [] = 'first';
$items [count ($items)] - >classes [] = 'last';
return $ items;
}
add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Innym sposobem na inny styl pierwszego i ostatniego elementu menu byłoby użycie selektorów CSS, które działają w większości nowoczesnych przeglądarek.
ul # yourmenuid > li: first-child { }
ul # yourmenuid > li: last-child { }
Uwaga: Jeśli masz wielu użytkowników w starszych przeglądarkach (Internet Explorer), prawdopodobnie chcesz uniknąć poniższej techniki.
Mamy nadzieję, że ten artykuł ci pomógł. Stworzyliśmy ściągawkę na domyślnych klasach CSS generowanych przez WordPress, które mogą się przydać również podczas stylizacji elementów menu.
