Jak utworzyć lepkie pływające menu nawigacyjne w WordPress

Niedawno jeden z naszych użytkowników zapytał nas, jak stworzyć lepkie menu nawigacyjne dla swojej witryny?

Lepkie menu nawigacyjne pozostają na ekranie, gdy użytkownicy przewijają stronę w dół. Dzięki temu górne menu jest zawsze widoczne,co jest dobre dla użytkownika, ponieważ zawiera linki do najważniejszych sekcji witryny.

W tym artykule pokażemy, jak łatwo utworzyć lepkie pływające menu nawigacyjne w WordPress.

Co To jest lepkie pływające Menu nawigacyjne?

Lepkie lub pływające menu nawigacyjne to takie ,które „przykleja się” do górnej części ekranu, gdy użytkownik przewija się w dół. Dzięki temu Twoje menu jest zawsze widoczne dla użytkowników.

Oto lepkie menu w akcji. Pokażemy Ci, jak stworzyć dokładnie takie menu dla Twojej własnej strony:

Dlaczego i kiedy lepkie menu może być przydatne?

Zazwyczaj górne menu nawigacyjne zawiera linki do najważniejszych sekcji witryny. Pływające menu sprawia, że te linki są zawsze widoczne, co oszczędza użytkownikom przewijania z powrotem do góry. Udowodniono również, że zwiększa konwersje.

Jeśli prowadzisz sklep internetowy, górne menu nawigacyjne prawdopodobnie zawiera linki do koszyka, kategorii produktów i wyszukiwania produktów. Sprawianie, że to menu jest lepkie, może pomóc zmniejszyć porzucanie koszyka i zwiększyć sprzedaż.

Niektóre z najlepszych motywów WordPress mają wbudowaną obsługę lepkiego menu nawigacyjnego. Po prostu zobacz Ustawienia motywu pod Motywy ” Dostosuj aby włączyć tę funkcję.

Jeśli twój motyw nie ma tej opcji, Czytaj dalej, a my pokażemy Ci, jak łatwo utworzyć lepkie pływające menu nawigacyjne w dowolnym szablonie WordPress lub sklepie WooCommerce.

Metoda 1: Dodaj lepkie pływające menu nawigacyjne za pomocą wtyczki

Jest to najprostsza metoda. Polecamy go wszystkim użytkownikom WordPressa, szczególnie początkującym.

Jeśli nie skonfigurowałeś jeszcze swojego menu nawigacyjnego, zrób to, korzystając z naszych instrukcji, jak dodać menu nawigacyjne w WordPress.

Następnie musisz zainstalować i aktywować lepkie Menu(lub cokolwiek!) na wtyczce Scroll. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” Sticky Menu (or Anything!) strona konfiguracji ustawień wtyczki.

Najpierw musisz wprowadzić identyfikator CSS menu nawigacyjnego, które chcesz zrobić lepkim.

Aby znaleźć identyfikator CSS używany przez menu nawigacyjne, musisz użyć narzędzia inspect przeglądarki.

Po prostu odwiedź swoją stronę internetową i przenieś mysz do menu nawigacyjnego. Następnie kliknij prawym przyciskiem myszy i wybierz Inspect z menu przeglądarki.

Spowoduje to podzielenie ekranu przeglądarki i będzie można zobaczyć kod źródłowy menu nawigacyjnego.

Musisz znaleźć wiersz kodu odnoszący się do nawigacji lub nagłówka witryny. Będzie to wyglądać mniej więcej tak:

<NAV id = "site-navigation" class = "main-navigation" role = "navigation">

Jeśli nie możesz go znaleźć, najedź kursorem myszy na różne linie kodu w okienku Inspect. Menu nawigacyjne zostanie w pełni podświetlone, gdy pojawi się odpowiednia linia kodu:

W tym przypadku identyfikator CSS naszego menu nawigacyjnego to strona-nawigacja.

Wszystko, co musisz zrobić, to wprowadzić identyfikator CSS swojego menu w ustawieniach wtyczki z Hashem na początku. W tym przypadku jest to # site-navigation.

Nie zapomnij kliknąć przycisku „Zapisz zmiany” na dole strony.

Teraz śmiało i sprawdź swoje lepkie menu na żywo w witrynie WordPress. Powinien pozostać na stronie podczas przewijania w dół, w ten sposób:

Kolejną opcją na stronie ustawień wtyczki jest zdefiniowanie przestrzeni między górną częścią ekranu a lepkim menu nawigacyjnym. Wystarczy użyć tego ustawienia, jeśli menu nakłada się na element, którego nie chcesz ukrywać. Jeśli nie, zignoruj to ustawienie.

Zalecamy pozostawienie pola zaznaczonego obok opcji: 'Sprawdź Pasek administratora’. Pozwala to wtyczce dodać trochę miejsca na pasek administracyjny WordPress, który jest widoczny tylko dla zalogowanych użytkowników.

Tutaj możesz zobaczyć, że pasek administratora na naszej stronie testowej poprawnie wyświetla się nad lepkim menu:

Następna opcja umożliwia odblokowanie menu nawigacyjnego, jeśli użytkownik odwiedza witrynę za pomocą mniejszego ekranu, np. urządzenia mobilnego:

Możesz sprawdzić, jak wygląda Twoja strona na urządzeniach mobilnych lub tabletach. Jeśli nie podoba ci się, jak to wygląda, po prostu dodaj 780px dla tej opcji.

Nie zapomnij kliknąć przycisku Zapisz zmiany po wprowadzeniu jakichkolwiek zmian w opcjach.

Metoda 2: Ręcznie Dodaj lepkie pływające Menu nawigacyjne

Ta metoda wymaga dodania niestandardowego kodu CSS do motywu. Nie zalecamy tego dla początkujących.

Zalecamy również zapoznanie się z naszym przewodnikiem na temat łatwego dodawania niestandardowego CSS do witryny WordPress przed rozpoczęciem.

Po pierwsze, musisz odwiedzić Wygląd ” Dostosuj aby uruchomić WordPress theme customizer.

Następnie kliknij „dodatkowy CSS” w lewym okienku, a następnie dodaj ten kod CSS.

# site-navigation {
    background:#00000;
    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: center;
}

Uwaga: Spowoduje to utworzenie menu nawigacyjnego z czarnym tłem. Jeśli chcesz inny kolor, Zmień numer obok Informacje ogólne. Na przykład za pomocą background: # ffffff daje białe tło menu.

Wystarczy wymienić # site-navigation korzystając z identyfikatora CSS w menu nawigacyjnym, kliknij przycisk Publikuj u góry ekranu.

Odwiedź swoją stronę, aby zobaczyć lepkie pływające menu nawigacyjne w akcji:

Co zrobić, jeśli menu nawigacyjne zwykle pojawia się pod nagłówkiem witryny, a nie nad nim? Jeśli tak, ten kod CSS może nakładać się na tytuł i nagłówek witryny lub pojawiać się zbyt blisko niego, zanim użytkownik przewinie się:

Można to łatwo dostosować, dodając margines do obszaru nagłówka za pomocą dodatkowego kodu CSS:

.site-branding {
margin-top:60px !ważne;
}

Zastąp site-branding z klasą CSS obszaru nagłówka. Teraz lepkie menu nawigacyjne nie będzie już nakładać się na nagłówek, zanim użytkownik przewinie się w dół:

Mamy nadzieję, że ten artykuł pomógł Ci dodać lepkie pływające menu nawigacyjne do swojej witryny WordPress. Możesz również zobaczyć nasz przewodnik, Jak stworzyć niestandardowy motyw WordPress bez pisania kodu, a także nasze porównanie najlepszych wtyczek do tworzenia stron 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.