Jak stylizować menu nawigacji WordPress

Czy chcesz wystylizować menu nawigacji WordPress, aby zmienić ich kolory lub wygląd? Podczas gdy twój motyw WordPress obsługuje wygląd menu nawigacji, możesz łatwo dostosować go za pomocą CSS, aby spełnić swoje wymagania. W tym artykule pokażemy, jak stylować menu nawigacji WordPress w Twojej witrynie.

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

Metoda 1: stylizowanie menu nawigacji WordPress za pomocą wtyczki

Twój motyw WordPress wykorzystuje CSS do stylowania menu nawigacji. Wielu początkujących nie czuje się komfortowo z edytowaniem plików motywów lub pisaniem kodu CSS na własną rękę.

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

Najpierw musisz zainstalować i aktywować wtyczkę CSS Hero. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

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

Użytkownicy WPBeginner mogą korzystać z tego kuponu CSS Hero, aby uzyskać zniżkę 34% na zakup.

Po aktywacji zostaniesz przekierowany, aby uzyskać klucz licencyjny CSS Hero. Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, a zostaniesz przekierowany z powrotem do swojej witryny za pomocą kilku kliknięć.

Następnie musisz kliknąć przycisk CSS Hero na pasku narzędzi administratora WordPress.

CSS Hero oferuje edytor WYSIWYG (What you see is what you get). Kliknięcie przycisku przeniesie Cię do twojej witryny z pływającym paskiem narzędziowym Bohatera CSS widocznym na ekranie.

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

Po kliknięciu niebieskiej ikony przesuń kursor myszy do menu nawigacyjnego, a CSS Hero podświetli go, pokazując obramowania wokół niego. Po kliknięciu podświetlonego menu nawigacyjnego zobaczysz elementy, które możesz edytować.

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 wybierzemy 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żna edytować, takie jak tekst, tło, obramowanie, marginesy, padding itp.

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

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

Po wprowadzeniu zmian będziesz mógł je zobaczyć na żywo w podglądzie motywu.

Gdy będziesz zadowolony ze zmian, kliknij przycisk Zapisz na pasku narzędzi Bohatera CSS, aby zapisać zmiany.

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

Metoda 2: Ręcznie Styl Menu Nawigacji WordPress

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

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

Zazwyczaj, jeśli używasz domyślnego tagu menu WordPress, wyświetli on listę bez powiązanych z nią klas CSS.

<?php wp_nav_menu ();?>

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

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

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

Dlatego też musisz zdefiniować klasę CSS i lokalizację menu. Są szanse, że Twój motyw WordPress już to robi, dodając menu nawigacyjne za pomocą kodu takiego jak ten:

<?php
    wp_nav_menu (array(
        'theme_location' = > 'primary',
        'menu_class' = > 'primary-menu',
         ) );
?>

Ten kod informuje WordPressa, że w tym miejscu motyw wyświetla menu główne. Dodaje również klas CSS primary-menu do menu nawigacyjnego.

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

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

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

// lista nieuporządkowana wewnątrz listy nieuporządkowanej
# header .primary-menu ul ul {} 

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

// Kotwica każdego elementu nawigacji
# header .primary-menu li a {} 

// lista nieuporządkowana, jeśli jest lista rozwijana
# header .primary-menu li ul {} 

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

// każdy drap w dół Kotwica elementu nawigacji
# header .primary-menu li li a {} 

Będziesz musiał zastąpić # nagłówek 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 WordPress automatycznie dodawane do każdego menu i elementu 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 aktualnego elementu Menu
.current-menu-item{} 

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

// Class for any custom links
.menu-item-type-custom{} 

// Class for the home Link
.menu-item-home{} 

WordPress umożliwia również dodawanie własnych niestandardowych klas CSS do poszczególnych elementów menu.

Możesz użyć tej funkcji do stylizacji elementów menu, takich jak dodawanie ikon obrazów do menu lub po prostu zmieniając kolory, aby wyróżnić element menu.

Przejdź do Wygląd ” Menu strona w panelu administracyjnym WordPress i kliknij przycisk Opcje ekranu.

Po zaznaczeniu tego pola zobaczysz, że dodatkowe pole jest dodawane, gdy przejdziesz do edycji każdego pojedynczego elementu menu.

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

Przykłady stylizacji menu nawigacji w WordPress

Różne motywy WordPress mogą używać różnych opcji stylizacji, klas CSS, a nawet JavaScript do tworzenia menu nawigacji. Daje to wiele opcji, aby zmienić te style i dostosować menu nawigacji do własnych wymagań.

Narzędzie inspect w przeglądarce internetowej będzie twoim najlepszym przyjacielem, jeśli chodzi o ustalenie, które klasy CSS mają zostać zmienione. Jeśli wcześniej go nie używałeś, zapoznaj się z naszym przewodnikiem, jak używać narzędzia inspect do dostosowywania motywów WordPress.

Zasadniczo wystarczy skierować kursor na element, który chcesz zmodyfikować, kliknąć prawym przyciskiem myszy, a następnie wybrać Inspect tool z menu przeglądarki.

Mając to na uwadze, rzućmy okiem na prawdziwe przykłady stylowania menu nawigacji 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 nawigacji.

# top-menu li. menu-item a {
kolor: # ff0000;
} 

W tym przykładzie, #top-menu jest ID przypisanym do listy nieuporządkowanej, która wyświetla nasze menu nawigacyjne. Będziesz musiał użyć narzędzia inspect, aby znaleźć identyfikator używany przez Twój motyw.

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

Najpierw musisz znaleźć identyfikator CSS lub klasę używaną przez motyw dla menu nawigacyjnego otaczającego kontener.

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

.nawigacja-top { 
background-color:#000; 
}

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

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

Być może zauważyłeś, że wiele stron internetowych używa innego koloru tła dla najważniejszych linków w ich menu nawigacyjnym. Ten link może być przyciskiem logowania, rejestracji, kontaktu lub zakupu. Nadając mu inny kolor, sprawia, że link jest bardziej zauważalny.

Aby to osiągnąć, dodamy niestandardową klasę CSS do elementu menu, który chcemy podświetlić innym kolorem tła.

Przejdź do Wygląd ” Menu i kliknij przycisk Opcje ekranu w prawym górnym rogu ekranu. Spowoduje to wyświetlenie menu fly down, w którym musisz zaznaczyć pole obok opcji 'CSS classes’.

Następnie przewiń w dół do pozycji menu, którą chcesz zmodyfikować, i kliknij, aby ją rozwinąć. Zauważysz nową opcję, aby dodać własną klasę CSS.

Teraz możesz użyć tej klasy CSS, aby stylizować ten konkretny element menu w inny sposób.

.kontakt-us { 
background-color: # ff0099;
border-radius:5px;
}

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

4. Dodawanie efektów najechania do menu nawigacji WordPress

Czy chcesz, aby elementy menu zmieniały kolory po najechaniu myszą? Ta konkretna sztuczka CSS sprawia, że menu nawigacji wygląda bardziej interaktywnie.

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

# top-menu li. menu-item a: hover {
background-color: # ffff;
kolor: # 666;
border-radius:5px;
} 

W tym przykładzie #top-menu jest identyfikatorem CSS używanym przez motyw dla nieuporządkowanej listy menu nawigacyjnego.

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

5. Tworzenie lepkich pływających menu nawigacji w WordPress

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

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

/ top-menu {
    background:#2194af;
    wysokość: 60px;
    z-index:170;
    margin: 0 auto;
    border-bottom: 1px solid #dadada;
    Szerokość: 100%;
    pozycja: stała;
    top:0;
    pozostało:0;
    prawo: 0;
    text-align: right;
    padding-right: 30px
}

Po prostu zastąp # top-menu identyfikatorem CSS twojego menu nawigacyjnego.

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

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

6. Tworzenie przejrzystych menu nawigacji w WordPress

Wiele witryn 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 skupiają się na wezwaniu do działania.

Po prostu dodaj poniższy przykładowy CSS do swojego motywu, aby menu nawigacji było przejrzyste.

# site-navigation { 
background-color:transparent; 
}

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

W zależności od motywu może być konieczne 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 nawigacji WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak dodać gotowe na urządzenia mobilne responsywne menu WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.