Górne menu nawigacyjne na stronie internetowej zazwyczaj zawiera linki do wszystkich najważniejszych stron. Kiedy sprawisz, że to menu będzie przyklejone, możesz utrzymać je na ekranie podczas przewijania strony przez użytkownika. W ten sposób jest ono zawsze w zasięgu ręki.
Ułatwia to nawigację, umożliwiając użytkownikom szybkie przejście do różnych sekcji witryny bez konieczności przewijania do góry. Naszym zdaniem użycie przyklejonego menu może pomóc zwiększyć zaangażowanie i poprawić ogólną użyteczność witryny.
W tym artykule pokażemy, jak łatwo dodać „sticky” pływające menu nawigacyjne do Twojej strony WordPress.
Czym jest przyklejone, pływające menu nawigacyjne?
Przyklejone lub pływające menu nawigacyjne „przykleja się” do góry ekranu, gdy użytkownik przewija w dół, dzięki czemu jest ono zawsze widoczne.
Zazwyczaj górne menu nawigacyjne w WordPressie zawiera linki do najważniejszych treści Twojej witryny. Uczynienie tego menu „lepkim” (sticky) sprawi, że odwiedzający będą mogli klikać te linki w dowolnym momencie, bez konieczności przewijania.
Jeśli prowadzisz sklep internetowy, menu nawigacyjne na górze zazwyczaj zawiera linki do stron zaprojektowanych w celu konwersji, takich jak strona realizacji zakupu i koszyk klienta. Uczynienie górnego menu „lepkim” (sticky) może często zmniejszyć wskaźnik porzuceń koszyka i zwiększyć sprzedaż.
Biorąc to pod uwagę, zobaczmy, jak możesz łatwo stworzyć przyklejone pływające menu nawigacyjne w dowolnym motywie WordPress lub sklepie WooCommerce. Po prostu użyj poniższych szybkich linków, aby przejść do metody, której chcesz użyć:
- Metoda 1: Dodaj „lepkie” menu za pomocą ustawień motywu (łatwe)
- Metoda 2: Dodaj swoje „sticky” menu nawigacyjne za pomocą wtyczki (zalecane)
- Metoda 3: Dodaj przyklejone pływające menu nawigacyjne za pomocą kodu
- Bonus: Spraw, aby Twoje posty WordPress były lepkie
Metoda 1: Dodaj „lepkie” menu za pomocą ustawień motywu (łatwe)
Niektóre z najlepszych motywów WordPress mają wbudowane wsparcie dla lepkich menu nawigacyjnych. Warto więc sprawdzić ustawienia swojego motywu, przechodząc do Motywy » Dostosuj w panelu WordPress i szukając ustawień o nazwie „Menu”.
Jeśli nie masz pewności, czy Twój motyw obsługuje lepkie menu, możesz sprawdzić dokumentację motywu, a nawet skontaktować się z deweloperem w celu uzyskania pomocy. Więcej informacji znajdziesz w naszym przewodniku na temat jak prawidłowo prosić o wsparcie WordPress i je uzyskać.
Jeśli Twój motyw nie ma wbudowanego wsparcia dla przyklejonych menu, będziesz musiał użyć jednej z poniższych metod.
Metoda 2: Dodaj swoje „sticky” menu nawigacyjne za pomocą wtyczki (zalecane)
Najprostszym sposobem na dodanie przyklejonego menu nawigacyjnego w WordPressie jest użycie wtyczki Sticky Menu & Sticky Header. Pozwala ona na przyklejenie dowolnego elementu, w tym menu.
Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do Ustawienia » Sticky Menu (or Anything!).
Na początek musisz uzyskać identyfikator CSS menu nawigacyjnego, które chcesz uczynić przyklejonym, używając narzędzia do inspekcji elementów swojej przeglądarki.
Po prostu odwiedź swoją stronę internetową i najedź kursorem myszy na menu nawigacyjne. Następnie kliknij prawym przyciskiem myszy i wybierz „Zbadaj” z menu przeglądarki.
Spowoduje to otwarcie nowego panelu w przeglądarce, gdzie można zobaczyć kod źródłowy menu nawigacyjnego.
Musisz znaleźć linię kodu, która odnosi się do menu lub nagłówka Twojej strony. Będzie wyglądać mniej więcej tak:
<nav id="site-navigation" class="main-navigation" role="navigation">
Jeśli masz problem ze znalezieniem kodu, najedź kursorem myszy na różne linie kodu w panelu „Zbadaj”. Kiedy znajdziesz właściwy kod, przeglądarka podświetli menu nawigacyjne, tak jak widać na poniższym obrazku.
W tym przypadku identyfikator CSS menu nawigacyjnego to site-navigation.
Gdy będziesz mieć te informacje, wróć do swojego panelu WordPress i dodaj je do pola „Sticky Element (Required)”.
Będziesz także musiał dodać znak hasha (#) na początku, więc site-navigation stanie się #site-navigation.
Następnie kliknij przycisk „Zapisz zmiany” na dole strony, aby zapisać swoje zmiany.
Teraz, jeśli odwiedzisz swoją stronę WordPress i przewiniesz ją, menu powinno pozostać na górze.
Czasami lepkie menu może nakładać się na niektóre treści, których nie chcesz ukrywać.
Jeśli tak się stanie, musisz zdefiniować odstęp między górną krawędzią ekranu a przypiętym menu nawigacyjnym, wpisując liczbę w polu „Odstęp między górną krawędzią strony a przypiętym elementem”.
Przyklejone menu mogą powodować problemy na urządzeniach z mniejszymi ekranami, takich jak urządzenia mobilne. Mając to na uwadze, warto sprawdzić wersję mobilną swojej witryny WordPress z poziomu pulpitu.
Jeśli nie jesteś zadowolony z wyglądu menu, możesz je „odpiąć” dla użytkowników mobilnych, znajdując następujące pole: „Nie przypinaj elementu, gdy ekran jest mniejszy niż”.
Tutaj wpisz „780px”.
Istnieje kilka dodatkowych ustawień do odkrycia, ale to wszystko, czego potrzebujesz, aby stworzyć działające, przyklejone menu nawigacyjne.
Gdy będziesz zadowolony z konfiguracji menu nawigacyjnego, kliknij „Zapisz zmiany”, aby zachować ustawienia.
Metoda 3: Dodaj przyklejone pływające menu nawigacyjne za pomocą kodu
Możesz również stworzyć lepkie menu nawigacyjne za pomocą CSS.
Najlepszym sposobem na dodanie niestandardowego kodu do WordPressa jest użycie WPCode. Jest to najlepsza wtyczka fragmentów kodu, która pozwala na dodawanie niestandardowego CSS, PHP, HTML i nie tylko.
Ponieważ nie edytujesz bezpośrednio plików motywu, możesz uniknąć wielu typowe błędy WordPressa. Możesz również zaktualizować swój motyw lub przełączyć się na zupełnie inny motyw bez utraty niestandardowego kodu.
Możesz również włączać i wyłączać przypięte menu jednym kliknięciem.
Najpierw musisz zainstalować i aktywować darmowy plugin WPCode. Więcej informacji znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować plugin WordPress.
Po aktywacji wtyczki przejdź do strony Code Snippets » + Add Snippet, gdzie zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny.
Obejmują one fragment, który pozwala na całkowite wyłączenie komentarzy, przesyłanie typów plików, których WordPress zazwyczaj nie obsługuje, wyłączenie stron załączników obrazów i wiele więcej.
Tutaj najedź kursorem myszy na „Add Your Custom Code (New Snippet)” i kliknij przycisk „Use snippet”, gdy się pojawi.
Na następnym ekranie musisz wpisać tytuł dla fragmentu kodu. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.
Następnie otwórz menu rozwijane „Typ kodu” i wybierz „Fragment CSS”.
Po wykonaniu tej czynności dodaj następujący fragment do edytora kodu WPCode:
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Spowoduje to utworzenie menu nawigacyjnego z czarnym tłem. Możesz użyć dowolnego koloru, zmieniając kod szesnastkowy obok background.
Na przykład, użycie background: #ffffff nada Twojemu menu białe tło. Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, możesz skorzystać z zasobu takiego jak HTML color code.
Będziesz także musiał zastąpić #site-navigation identyfikatorem CSS Twojego menu nawigacyjnego. Aby znaleźć ten kod, po prostu postępuj zgodnie z tym samym procesem opisanym powyżej.
Gdy będziesz zadowolony z kodu, kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”, a następnie kliknij przycisk „Zapisz fragment”.
Teraz, jeśli odwiedzisz swojego bloga lub stronę WordPress, zobaczysz przyklejone, pływające menu nawigacyjne w akcji.
W zależności od motywu, czasami menu nawigacyjne może pojawić się poniżej nagłówka strony zamiast nad nim. W takim przypadku lepkie menu nawigacyjne może pojawić się zbyt blisko tytułu strony i nagłówka, a nawet na nie nałożyć.
Jeśli tak się stanie, możesz dodać poniższe do swojego niestandardowego fragmentu CSS:
.site-branding {
margin-top:60px !important;
}
Po prostu zastąp site-branding klasą CSS Twojego obszaru nagłówka. Aby uzyskać te informacje, po prostu użyj narzędzia „Zbadaj” w swojej przeglądarce, a następnie postępuj zgodnie z tym samym procesem opisanym w Metodzie 2.
Bonus: Spraw, aby Twoje posty WordPress były lepkie
Jeśli masz bloga WordPress, dobrym pomysłem jest uczynienie niektórych wpisów na blogu przyklejonymi. Mogą to być artykuły filarowe zawierające najważniejsze treści Twojej witryny lub ogłoszenia i posty konkursowe, z którymi chcesz, aby użytkownicy wchodzili w interakcję.
Kiedy przypniesz wybrany post, pozostanie on na górze strony Twojego bloga, nawet gdy będziesz publikować nowe treści, które będą wyświetlane poniżej przypiętego posta.
Możesz łatwo przypiąć swój post na blogu, otwierając go w edytorze treści. Po wykonaniu tej czynności po prostu rozwiń zakładkę „Podsumowanie” w panelu bloków i zaznacz opcję „Przypnij na górze bloga”.
Następnie kliknij przycisk „Aktualizuj” lub „Opublikuj” na górze, aby zapisać ustawienia. Pomyślnie utworzyłeś przyklejony wpis na blogu w swojej witrynie WordPress.
Więcej szczegółów znajdziesz w naszym samouczku na temat jak tworzyć przyklejone posty w WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dodać przyklejone, pływające menu nawigacyjne do Twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat jak dodać menu panelu przesuwnego w motywach WordPress oraz naszym samouczkiem na temat dodawania ikon mediów społecznościowych do menu 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.
Dennis Muthomi
czy jest sposób, aby menu „sticky” działało tylko dla określonych postów/stron? Na przykład, aby nie było „sticky” na stronie głównej mojego bloga, ale było „sticky” wszędzie indziej na stronie?
Wsparcie WPBeginner
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Admin
Mrteesurez
Dobrze wykonane, cieszę się, że widzę wtyczkę, którą udostępniłeś tutaj „menu przyklejone lub (cokolwiek) podczas przewijania”. Oznacza to, że można jej użyć do przyklejenia dowolnych elementów oprócz menu.
Na początku używałem do tego surowego kodu, dziękuję za udostępnienie tej łatwej metody.
Dayo Olobayo
Zgadzam się, Panie Teesurez, przyklejone menu to cenna funkcja strony internetowej. Oprócz tworzenia przyklejonego menu, warto rozważyć dodanie efektu „płynnego przewijania”, aby jeszcze bardziej poprawić komfort użytkowania podczas nawigacji między sekcjami na stronie internetowej.
Jiří Vaněk
Dzięki za tutorial. Zawsze szukałem szablonu, który mógłby to zrobić. Według tego przewodnika już nie muszę.
Wsparcie WPBeginner
Glad we could help open up your theme options
Admin
Paul
Gdzie mam zostawić te 5 gwiazdek….. dziękuję bardzo!!
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Jess
Dziękuję bardzo za ten pomocny post!!! Tak jasne i łatwe do naśladowania.
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Ivaylo
Świetny praktyczny tutorial. Zrobiłem Metodę 2 i zadziałała natychmiast, jednak gdy otwieram stronę na telefonie, przyciski z menu zniknęły. Czy ktoś wie dlaczego lub jak to rozwiązać?
Na zdrowie!
Wsparcie WPBeginner
Jeśli jeszcze tego nie zrobiłeś, zalecamy skontaktowanie się z pomocą techniczną Twojego konkretnego motywu, aby sprawdzić, czy nie ma konfliktu z CSS Twojego motywu.
Admin
Serena Richardson
Cześć,
Jak stworzyć przyklejone, pływające menu po prawej stronie strony, zamiast na górze, tak aby przesuwało się w dół podczas przewijania?
Dzięki!
Serena
Wsparcie WPBeginner
Byłoby to dodanie przypiętego widżetu, który polecamy w naszym artykule poniżej:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
Działa natychmiast. Dziękuję
Wsparcie WPBeginner
You’re welcome
Admin
simran
poziom perfekcji i sposób prezentacji informacji… dziękuję..
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Theo
Gdzie mogę znaleźć identyfikator mojego paska nawigacyjnego?
Nie mogę go znaleźć.
Wsparcie WPBeginner
Aby to zrobić, użyj narzędzia „Inspect Element”. Poniżej znajduje się przewodnik, jak prawidłowo korzystać z narzędzia „Inspect Element”:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
Ratunek, nie mogę wystarczająco podziękować.
Wsparcie WPBeginner
You’re welcome
Admin
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
Wsparcie WPBeginner
Glad our article was helpful
Admin
alexandre
Dokładnie tego szukałem! Świetny plugin. Dzięki
Wsparcie WPBeginner
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Wielkie dzięki za pomoc – mam tylko małe pytanie; tło mojego menu jest przezroczyste podczas przewijania w dół. Czy są jakieś szybkie poprawki lub triki, aby dodać za nim jednolity kolor (w naszym przypadku biały)?
Wsparcie WPBeginner
Zależałoby to od sposobu skonfigurowania menu, ale możesz użyć narzędzia „Inspect Element”, aby znaleźć obiekt, któremu możesz przypisać właściwość background-color: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Dziękuję. Kiedy Wpbeginner pisze post na blogu na dany temat, z pewnością będzie on pomocny.
Wsparcie WPBeginner
Glad our content has been helpful
Admin
Everest
Dzięki wielkie.
Uczyniłeś mój dzień.
Wsparcie WPBeginner
You’re welcome, glad we could help
Admin
Tony Chung
Kod CSS zadziałał i musiałem dodać margines do nagłówka, aby cały tytuł się wyświetlił. Mój pasek menu rozciąga się na górze, ale przyciski menu zaczynają się po lewej stronie i kończą pośrodku. Jak przesunąć przyciski, aby były wyśrodkowane na stronie?
Wsparcie WPBeginner
Zależałoby to od motywu, ale zazwyczaj trzeba by zmodyfikować CSS. Możesz testować zmiany za pomocą narzędzia „inspect element”: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Wow, to działa idealnie.
Dziękuję
Wsparcie WPBeginner
Glad our solution worked for you
Admin
Gillian Davies
Mam listę książek w tabeli. Zaimportowałem obrazy ich okładek do Mediów, teraz chcę, aby obrazy wyskakiwały, gdy użytkownik przewija listę w dół. Podobnie jak przy najechaniu na wiersz, ale jak to zrobić w tabeli stworzonej w kreatorze tabel?
Raul
Jak mogę sprawić, aby to stałe menu nawigacyjne było przewijalne?
Użyłem go jako paska bocznego, ale kiedy pasek boczny jest za długi, nie mieści się na ekranie i nie mogę go przewinąć w dół.
Rushikesh Thawale
Cześć,
Jak napisałeś kod JAK KOD w tym poście? Mam na myśli, jak pokazywać kody HTML w poście?
Dzięki.
Tara
Prawdopodobnie już się dowiedziałeś, ale dla tych, którzy szukają, jak pokazać swój kod w poście, użyj znaku html dla nawiasu otwierającego w tagach html < ; bez spacji.
Wsparcie WPBeginner
To jedna z metod, ale w tym przypadku używamy drugiej metody z naszego artykułu tutaj: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Bardzo użyteczne!
dziękuję.
amin
Możesz również ustawić „z-index: 999xxxx” dla logo lub dowolnego elementu, który chcesz umieścić w pasku nawigacyjnym.
Sujith Reghu
Chciałbym wiedzieć, jak dodać przypięte menu w poście lub stronie WordPress. Na przykład, w długim poście, nagłówki i podnagłówki samego posta mają być prezentowane w przypiętym menu, aby czytelnik mógł łatwo nawigować z jednej sekcji posta do drugiej. Dziękuję...
Zac
dzięki za tutorial!
potrzebuję czegoś trochę innego, potrzebuję „mini-menu”, które pojawi się po najechaniu myszką na menu… więc nie pokazuje się, dopóki nie najedziesz myszką… jak rozwijane
jeśli mógłbyś zrobić ten tutorial, byłbym wdzięczny.
amin
możesz użyć wtyczki mega-menu lub uber menu, ale możesz to zrobić bez wtyczki, za pomocą css lub jquery, jak menu bootstrap3