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 niestandardowego stylu 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 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 zamiast tego.

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)
• Metoda 2: Stylizowanie pierwszych i ostatnich pozycji za pomocą selektorów CSS (działa ze wszystkimi motywami)

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 tutorialach WordPress 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 przydatne.

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 darmowej wtyczki WPCode. Więcej szczegółów znajdziesz w naszym przewodniku 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 unikalnego stylu do tych elementów w swoim niestandardowym menu nawigacyjnym.

Aby to zrobić, musisz dodać drugi fragment kodu do swojej strony internetowej WordPress. Na początek utwórz nowy niestandardowy fragment kodu, wykonując ten sam proces, który opisano 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ą stronę, zobaczysz nowo stylizowane menu na żywo.

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 Twojej strony WordPress w różnych przeglądarkach.

Aby zastosować tę metodę, musisz dodać kod do arkusza stylów swojego motywu lub do sekcji „Dodatkowy CSS” w Narzędziu do dostosowywania motywów WordPress.

Jeśli jeszcze tego nie zrobiłeś, 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ą pierwszego i ostatniego potomka swojego rodzica, którymi są pierwsze i ostatnie elementy 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 Personalizator motywu będzie brakować w panelu administracyjnym WordPress. Musisz wpisać ten adres URL w przeglądarce, aby uzyskać dostęp do Personalizatora 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 na temat tworzenia pionowego menu nawigacyjnego w WordPress oraz naszym przewodnikiem dla początkujących na temat tworzenia 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.