Jak stylizować menu nawigacyjne WordPress

Czy chcesz stylizować menu nawigacyjne WordPress, aby zmieniać ich kolory lub wygląd? Chociaż motyw WordPress obsługuje wygląd menu nawigacyjnych, możesz go łatwo dostosować za pomocą CSS, aby spełnić Twoje wymagania. W tym artykule pokażemy, jak stylizować menu nawigacyjne WordPress w Twojej witrynie.


Styl menu nawigacyjne w WordPress

Pokażemy dwie różne metody. Pierwsza metoda jest dla początkujących, ponieważ wykorzystuje wtyczkę i nie wymaga znajomości kodu. Druga metoda jest przeznaczona dla pośrednich użytkowników DIY, którzy wolą używać kodu CSS zamiast wtyczki.

Metoda 1: Stylizacja menu nawigacji WordPress za pomocą wtyczki

Twój motyw WordPress używa CSS do stylizowania menu nawigacyjnych. Wielu początkujących nie czuje się komfortowo z edytowaniem plików motywów lub samodzielnym pisaniem kodu CSS.

Wtedy przydaje się wtyczka do stylizacji WordPress. Oszczędza to edytowania plików motywów lub pisania dowolnego kodu.

Najpierw musisz zainstalować i aktywować wtyczkę CSS Hero. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

CSS Hero to wysokiej klasy wtyczka WordPress, która pozwala zaprojektować własny motyw WordPress bez pisania jednej linii kodu (nie wymaga HTML ani CSS). Zobacz naszą recenzję CSS Hero, aby dowiedzieć się więcej.

Użytkownicy WPBeginner mogą użyć tego Kuponu Bohatera CSS, aby uzyskać 34% zniżki na zakup.

Po aktywacji nastąpi przekierowanie w celu uzyskania klucza licencyjnego CSS Hero. Wystarczy postępować zgodnie z instrukcjami wyświetlanymi na ekranie, a przekierowanie nastąpi z powrotem za pomocą kilku kliknięć.

Następnie kliknij przycisk CSS Hero na pasku narzędzi administratora WordPress.

Uruchom CSS Hero

CSS Hero oferuje edytor WYSIWYG (to, co widzisz, dostajesz). Kliknięcie tego przycisku spowoduje przejście do witryny z pływającym paskiem narzędzi CSS Hero widocznym na ekranie.

Pasek narzędzi CSS Hero

Kliknij niebieską ikonę u góry, aby rozpocząć edycję.

Po kliknięciu niebieskiej ikony, przenieś mysz do menu nawigacji, a CSS Hero podświetli ją, pokazując otaczające ją ramki. Po kliknięciu podświetlonego menu nawigacyjnego zostaną wyświetlone elementy, które można edytować.

Wskaż i kliknij, aby dostosować menu

Na powyższym zrzucie ekranu pokazuje nam górny kontener menu nawigacyjnego. Załóżmy, że chcemy zmienić kolor tła naszego menu nawigacyjnego. W takim przypadku wybieramy górną nawigację, która wpływa na całe nasze menu.

CSS Hero pokaże teraz różne właściwości, które możesz edytować, takie jak tekst, tło, obramowanie, marginesy, wypełnienie itp.

Właściwości CSS

Możesz kliknąć dowolną właściwość, którą chcesz zmienić. CSS Hero pokaże ci prosty interfejs, w którym możesz dokonać zmian.

Zmień wygląd elementu

Na powyższym zrzucie ekranu wybraliśmy tło i pokazał nam fajny interfejs do wyboru koloru tła, gradientu, obrazu i innych.

Po wprowadzeniu zmian będzie można je zobaczyć na żywo w podglądzie motywu.

Podgląd na żywo zmian CSS

Po wprowadzeniu zmian kliknij przycisk Zapisz na pasku narzędzi CSS Hero, aby zapisać zmiany.

Najlepszą rzeczą w tej metodzie jest to, że możesz łatwo cofnąć wszelkie dokonane zmiany. CSS Hero przechowuje pełną historię wszystkich twoich zmian i możesz przechodzić między nimi.

Metoda 2: Ręcznie styl menu nawigacyjne WordPress

Ta metoda wymaga ręcznego dodania niestandardowego CSS i jest przeznaczona dla użytkowników pośrednich.

Menu nawigacji WordPress są wyświetlane na liście nieuporządkowanej (lista punktowana).

Zazwyczaj jeśli używasz domyślnego znacznika menu WordPress, wyświetli się lista bez powiązanych z nim klas CSS.

<?php wp_nav_menu (); ?>

Twoja nieuporządkowana lista będzie miała nazwę „menu”, a każdy element listy ma swoją własną klasę CSS.

Może to działać, jeśli masz tylko jedną lokalizację menu. Jednak większość motywów ma wiele lokalizacji, w których można wyświetlić menu nawigacji.

Używanie tylko domyślnej klasy CSS może powodować konflikt z menu w innych lokalizacjach.

Dlatego musisz również zdefiniować klasę CSS i lokalizację menu. Możliwe, że Twój motyw WordPress już to robi, dodając menu nawigacyjne za pomocą takiego kodu:

<?php
wp_nav_menu (tablica (
„theme_location” => ‘podstawowy’,
„menu_class” => ‘Menu Główne’,
));
?>

Ten kod informuje WordPress, że w tym miejscu motyw wyświetla menu główne. Dodaje także menu główne klasy CSS do menu nawigacji.

Teraz możesz stylizować menu nawigacyjne za pomocą tej struktury CSS.

// klasa kontenera
#header .primary-menu {}

// pierwsza lista nieuporządkowana klasy kontenera
#header .primary-menu ul {}

// lista nieuporządkowana w liście nieuporządkowanej
#header .primary-menu ul ul {}

// każdy element nawigacyjny
#header .primary-menu li {}

// każda kotwica elementu nawigacyjnego
#header .primary-menu li a {}

// lista nieuporządkowana, jeśli istnieją elementy rozwijane
#header .primary-menu li ul {}

// każdy rozwijany element nawigacyjny
#header .primary-menu li li {}

// każda kotwica elementu nawigacji w dół
#header .primary-menu li li a {}

Musisz zastąpić #header klasą CSS kontenera używaną przez menu nawigacyjne.

Ta struktura pomoże Ci całkowicie zmienić wygląd menu nawigacyjnego.

Istnieją jednak inne klasy CSS generowane przez WordPress automatycznie dodawane do każdego menu i pozycji menu. Klasy te pozwalają jeszcze bardziej dostosować menu nawigacyjne.

// Klasa dla bieżącej strony
.current_page_item {}

// Klasa dla bieżącej kategorii
.current-cat {}

// Klasa dla dowolnego innego bieżącego elementu menu
.element bieżącego menu {}

// Klasa dla kategorii
.menu-item-type-taksonomy {}

// Klasa dla typów postów
.menu-item-type-post_type {}

// Klasa dla dowolnych niestandardowych łączy
.menu-item-type-custom {}

// Klasa dla domowego łącza
.menu-item-home {}

WordPress pozwala także dodawać własne niestandardowe klasy CSS do poszczególnych pozycji menu.

Możesz użyć tej funkcji do stylizacji elementów menu, takich jak dodawanie ikon obrazków do menu lub po prostu zmiana kolorów, aby podświetlić element menu.

Udaj się do Wygląd »Menu stronę w panelu administratora WordPress i kliknij przycisk Opcje ekranu.

Włącz opcję klas CSS dla poszczególnych pozycji menu

Gdy zaznaczysz to pole, zobaczysz, że dodawane jest dodatkowe pole, gdy edytujesz poszczególne pozycje menu.

Dodanie niestandardowej klasy CSS do elementu menu w WordPress

Teraz możesz użyć tej klasy CSS w arkuszu stylów, aby dodać niestandardowy CSS. Wpłynie to tylko na pozycję menu z dodaną klasą CSS.

Przykłady stylowych menu nawigacyjnych w WordPress

Różne motywy WordPress mogą wykorzystywać różne opcje stylizacji, klasy CSS, a nawet JavaScript do tworzenia menu nawigacyjnych. Daje to wiele opcji zmiany tych stylów i dostosowania menu nawigacyjnych do własnych wymagań.

Narzędzie inspekcji w przeglądarce będzie twoim najlepszym przyjacielem, jeśli chodzi o ustalenie, które klasy CSS należy zmienić. Jeśli jeszcze go nie używałeś, zapoznaj się z naszym przewodnikiem na temat używania narzędzia inspekcji do dostosowywania motywów WordPress.

Zasadniczo wystarczy skierować kursor na element, który chcesz zmodyfikować, kliknij prawym przyciskiem myszy, a następnie wybierz polecenie Sprawdź narzędzie z menu przeglądarki.

Korzystanie z narzędzia inspekcji w celu wyszukania klas CSS do modyfikacji

To powiedziawszy, rzućmy okiem na kilka przykładów prawdziwych stylów menu nawigacyjnych w WordPress.

1. Jak zmienić kolor czcionki w menu nawigacji WordPress

Oto przykładowy niestandardowy CSS, który możesz dodać do motywu, aby zmienić kolor czcionki menu nawigacyjnego.

# menu główne li.menu-item a {
kolor: # ff0000;
}

W tym przykładzie # górne menu jest identyfikatorem przypisanym do nieuporządkowanej listy, która wyświetla nasze menu nawigacyjne. Konieczne będzie skorzystanie z narzędzia inspekcji, aby znaleźć identyfikator używany przez motyw.

Zmiana koloru czcionki menu nawigacji WordPress

2. Jak zmienić kolor tła paska menu nawigacji

Najpierw musisz znaleźć identyfikator CSS lub klasę używaną przez motyw w kontenerze otaczającym menu nawigacyjne.

Znalezienie klasy CSS dla kontenera menu nawigacyjnego

Następnie możesz użyć następującego niestandardowego CSS, aby zmienić kolor tła paska menu nawigacji.

.nawigacja do góry {
kolor tła: # 000;
}

Oto jak to wyglądało na naszej stronie demo.

Zmiana koloru tła paska menu nawigacji

3. Jak zmienić kolor tła pojedynczego elementu menu

Być może zauważyłeś, że wiele witryn używa różnych kolorów tła dla najważniejszych linków w menu nawigacyjnym. Ten link może być przyciskiem logowania, rejestracji, kontaktu lub zakupu. Nadając mu inny kolor, sprawia, że ​​link jest bardziej widoczny.

Aby to osiągnąć, dodamy niestandardową klasę CSS do pozycji menu, którą chcemy wyróżnić innym kolorem tła.

Udaj się do Wygląd »Menu i kliknij przycisk Opcje ekranu w prawym górnym rogu ekranu. Spowoduje to wyświetlenie menu rozwijanego, w którym należy zaznaczyć pole obok opcji „Klasy CSS”.

Włącz opcję klas CSS dla poszczególnych pozycji menu

Następnie przewiń w dół do elementu menu, który chcesz zmodyfikować, i kliknij, aby go rozwinąć. Zauważysz nową opcję dodania niestandardowej klasy CSS.

Dodanie niestandardowej klasy css do elementu menu

Teraz możesz użyć tej klasy CSS, aby inaczej stylizować ten konkretny element menu.

.Skontaktuj się z nami {
kolor tła: # ff0099;
promień obramowania: 5 pikseli;
}

Oto jak to wyglądało na naszej stronie testowej.

Zmiana koloru tła pojedynczego elementu menu w menu nawigacyjnych WordPress

4. Dodawanie efektów aktywowania do menu nawigacji WordPress

Czy chcesz, aby elementy menu zmieniały kolory po najechaniu myszką? Ta szczególna sztuczka CSS sprawia, że ​​menu nawigacyjne wyglądają bardziej interaktywnie.

Po prostu dodaj następujący niestandardowy CSS do swojego motywu.

# menu główne li.menu-item a: hover {
kolor tła: #fff;
kolor: # 666;
promień obramowania: 5 pikseli;
}

W tym przykładzie # menu główne jest identyfikatorem CSS używanym przez motyw do listy nieuporządkowanego menu nawigacji.

Oto jak to wyglądało na naszej stronie testowej.

Efekt najechania kursorem w menu nawigacyjnym WordPress

5. Utwórz lepkie pływające menu nawigacyjne w WordPress

Zwykle menu nawigacyjne pojawiają się u góry i znikają, gdy użytkownik przewija w dół. Lepkie pływające menu nawigacyjne pozostają na górze, gdy użytkownik przewija w dół.

Możesz dodać następujący kod CSS do motywu, aby menu nawigacyjne były lepkie.

# menu główne {
tło: # 2194af;
wysokość: 60 pikseli;
indeks Z: 170;
margines: 0 auto;
border-bottom: 1px solid #dadada;
szerokość: 100%;
pozycja: stała;
góra: 0;
po lewej: 0;
prawo: 0;
wyrównanie tekstu: prawo;
padding-right: 30px
}

Po prostu zamień # górne menu na CSS ID twojego menu nawigacyjnego.

Oto jak wyglądało to w naszym demo:

Lepkie menu nawigacyjne

Aby uzyskać bardziej szczegółowe instrukcje i alternatywną metodę, zobacz nasz przewodnik na temat tworzenia lepkiego, pływającego menu nawigacji w WordPress.

6. Utwórz przezroczyste menu nawigacyjne w WordPress

Wiele stron internetowych używa dużych lub pełnoekranowych obrazów tła z przyciskami wezwania do działania. Korzystanie z przezroczystych menu sprawia, że ​​nawigacja wtapia się w obraz. Dzięki temu użytkownicy częściej koncentrują się na wezwaniu do działania.

Wystarczy dodać następujący motyw CSS do motywu, aby menu nawigacyjne były przezroczyste.

# nawigacja strony {
kolor tła: przezroczysty;
}

Tak to wyglądało na naszej stronie demonstracyjnej.

Przejrzyste menu nawigacyjne w WordPress

W zależności od motywu konieczne może być dostosowanie położenia obrazu nagłówka, aby obejmował obszar za przezroczystymi menu.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się stylizować menu nawigacyjne WordPress. Możesz także zapoznać się z naszym przewodnikiem na temat dodawania responsywnego menu WordPress dostosowanego do urządzeń mobilnych.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me