Jak dodać klasy CSS dla pierwszego i ostatniego elementu w menu WordPress

Czy kiedykolwiek zauważyłeś strony z unikalnie stylizowanymi pierwszymi i ostatnimi elementami menu? To nie przypadek – to sprytny CSS w akcji. Ta technika może wyróżnić ważne linki, takie jak strona kontaktowa lub specjalna oferta.

Wielu naszych czytelników próbowało dodawać niestandardowe klasy do swoich elementów menu, tylko po to, by odkryć, że gdy przestawiają swoje menu, stylizacja się psuje. Elementy oznaczone jako „pierwszy” i „ostatni” nie znajdują się już na tych pozycjach, co sprawia, że menu wygląda niespójnie.

Dlatego ten przewodnik pokaże Ci, jak dodać klasy .first i .last, które pozostaną przy elementach menu, nawet jeśli później je przetasujesz. Omówimy dwie metody: filtr dla klasycznych motywów i selektory CSS dla wszystkich motywów, w tym motywów blokowych.

Dlaczego stylizować pierwszą i ostatnią pozycję menu nawigacyjnego inaczej?

Czasami może być konieczne dodanie niestandardowych stylów do pierwszego i ostatniego elementu w menu nawigacyjnym. Może to sprawić, że ważne linki będą się wyróżniać, takie jak link do formularza kontaktowego Twojej witryny lub strony koszyka WooCommerce.

W takim przypadku można po prostu dodać niestandardową klasę CSS do pierwszego i ostatniego elementu menu. Jednakże, jeśli w dowolnym momencie zmienisz kolejność menu, może to całkowicie zepsuć niestandardowe stylowanie.

Z tego powodu zalecamy używanie filtrów.

W tym przewodniku pokażemy, jak stylizować pierwszą i ostatnią pozycję menu nawigacyjnego, dzięki czemu możesz zmieniać układ menu bez psucia niestandardowych stylów. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Dodawanie klasy pierwszej i ostatniej za pomocą filtru (zalecane)

Uwaga: Ta metoda działa tylko z klasycznym motywem WordPress. Jeśli używasz motywu blokowego, przejdź do Metody 2.

Najłatwiejszym sposobem na stylizację elementów menu nawigacyjnego jest dodanie filtra do swojego motywu.

Często w samouczkach WordPressa znajdziesz fragmenty kodu z instrukcjami, aby dodać je do pliku functions.php Twojego motywu.

Największym problemem jest to, że nawet najmniejszy błąd w niestandardowym fragmencie kodu może zepsuć Twoją witrynę WordPress i uczynić ją niedostępną. Nie wspominając już o tym, że jeśli zaktualizujesz swój motyw WordPress, stracisz wszystkie swoje dostosowania.

Właśnie dlatego WPCode jest tutaj.

Ten darmowy wtyczka ułatwia dodawanie niestandardowego CSS, PHP, HTML i innych do WordPress bez narażania Twojej witryny na ryzyko.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie bezpłatnej wtyczki WPCode. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment.

Tutaj po prostu najedź kursorem myszy na „Dodaj swój niestandardowy kod”.

Gdy się pojawi, kliknij „Użyj fragmentu”.

Na początek wpisz tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu WordPress.

Następnie otwórz menu rozwijane „Typ kodu” i wybierz „Fragment PHP”.

Następnie możesz dodać następujący kod PHP do pola kodu:

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');

Po tym jesteś gotowy, aby przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz fragment”, aby fragment PHP stał się aktywny.

Tworzy to klasy CSS .first i .last dla pierwszego i ostatniego elementu menu. Możesz teraz użyć tych klas do zastosowania unikalnych stylów do tych elementów w Twoim niestandardowym menu nawigacyjnym.

Aby to zrobić, musisz dodać drugi fragment do swojej witryny WordPress. Aby zacząć, utwórz nowy niestandardowy fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Następnie wpisz tytuł dla niestandardowego fragmentu kodu.

Następnie otwórz menu rozwijane „Typ kodu”, ale tym razem wybierz „Fragment CSS”.

W tym poradniku po prostu pogrubimy pierwszy i ostatni element menu, dodając następujące formatowanie CSS do pola kodu:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Po wykonaniu tej czynności kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz fragment”, aby fragment CSS stał się aktywny.

Teraz, jeśli odwiedzisz swoją witrynę, zobaczysz na żywo nowo stylizowane menu.

Metoda 2: Stylizowanie pierwszych i ostatnich pozycji za pomocą selektorów CSS (działa ze wszystkimi motywami)

Jeśli nie chcesz używać wtyczki do fragmentów kodu, możesz stylizować pierwsze i ostatnie elementy menu za pomocą selektorów CSS. Jednak ta metoda może nie działać w niektórych starszych przeglądarkach, takich jak Internet Explorer.

Mając to na uwadze, dobrym pomysłem jest przetestowanie witryny WordPress w różnych przeglądarkach.

Aby zastosować tę metodę, musisz dodać kod do arkusza stylów swojego motywu lub do sekcji „Dodatkowe CSS” w Niestandardowych ustawieniach motywu WordPress.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodać niestandardowy CSS do swojej witryny WordPress.

Pierwszym krokiem jest edycja pliku style.css motywu lub przejście do Wygląd » Dostosuj, a następnie kliknięcie „Dodatkowy CSS”.

Następnie dodaj następni fragment kodu do swojej witryny:

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Pamiętaj, że będziesz musiał zastąpić 'yourmenuid' identyfikatorem swojego menu nawigacyjnego.

Selektory „first-child” i „last-child” wybierają pierwszy i ostatni element potomny swojego rodzica, którymi są pierwszy i ostatni element w menu nawigacyjnym.

Na przykład, użyliśmy tego kodu, aby pogrubić pierwsze i ostatnie elementy menu nawigacyjnego na naszym blogu WordPress:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Jeśli używasz motywu blokowego WordPress, to Niestandardowe ustawienia motywu będą brakować w panelu administracyjnym WordPress. Musisz wprowadzić ten adres URL w przeglądarce, aby uzyskać dostęp do Niestandardowych ustawień motywu:

https://yourdomainname.com/wp-admin/customize.php

Upewnij się, że zastąpiłeś domenę nazwą domeny swojej witryny.

Następnie otwórz zakładkę „Dodatkowy CSS” jak poprzednio i wstaw poniższy kod. Zwróć uwagę, że kod wygląda nieco inaczej, ponieważ nie musisz dodawać identyfikatora swojego menu.

li:first-child a,
li:last-child a {
    background-color: black;
    border: none;
    color: white !important; /* Ensures the color white is prioritized */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

Zachęcamy do dostosowania kodu do własnych potrzeb. W poniższym przykładzie zamieniliśmy pierwsze i ostatnie linki w przyciski.

Oto jak to wygląda:

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać klasy .first i .last do menu nawigacyjnych WordPress. Możesz również zapoznać się z naszym artykułem jak stworzyć pionowe menu nawigacyjne w WordPressie oraz naszym przewodnikiem dla początkujących tworzenie menu rozwijanego na stronie WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.