Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać pasek wyszukiwania do menu WordPress (krok po kroku)

Czy chcesz dodać pasek wyszukiwania do twojego menu nawigacyjnego WordPress?

Domyślnie WordPress umożliwia dodanie wyszukiwania do panelu bocznego, stopki i innych obszarów witryny internetowej przystosowanych do widżetów. Jednak wielu użytkowników woli mieć pole wyszukiwania WordPress w menu nawigacyjnym, ponieważ jest ono łatwiejsze do znalezienia dla odwiedzających.

W tym artykule pokażemy ci, jak łatwo dodać pasek wyszukiwania do twojego menu WordPress bez znajomości kodowania.

Adding a Search Bar to WordPress Menu

Dlaczego warto dodać pasek wyszukiwania do menu nawigacyjnego WordPress?

Pasek wyszukiwania pomaga użytkownikom znaleźć to, czego szukają, bez opuszczania Twojej witryny internetowej WordPress. Może to poprawić wrażenia użytkownika, zatrzymać odwiedzających na Twojej witrynie na dłużej i zwiększyć zaangażowanie.

Dlatego większość projektantów witryn internetowych i ekspertów zaleca dodanie paska wyszukiwania do menu nawigacyjnego, gdzie użytkownicy mogą go łatwo znaleźć.

Add a search bar to WordPress menu

W zależności od używanego motywu, sposób dodania paska wyszukiwania do twojego menu będzie inny. Jeśli używasz klasycznego motywu, będziesz potrzebować wtyczki wyszukiwania WordPress.

Jeśli chodzi o użytkowników motywów blokowych, można po prostu skorzystać z edytora witryn Full Site Editor (FSE).

Mając to na uwadze, przejdźmy przez dwie metody jedna po drugiej. Możesz skorzystać z poniższych odnośników, aby przejść do wybranej sekcji:

Metoda 1: Dodanie paska wyszukiwania w menu klasycznego motywu WordPress

Pierwsza metoda jest przeznaczona dla osób korzystających z klasycznego motywu WordPress. Oznacza to, że widzisz menu Wygląd „ Dostosuj w kokpicie WordPress i masz dostęp do konfiguratora motywu.

Jeśli korzystasz z klasycznego motywu, możesz dodać widżet wyszukiwania WordPress tylko do obszarów obsługujących widżety, takich jak panel boczny, a nie do menu WordPress.

Aby obejść ten problem, będziesz potrzebować wtyczki, która pozwoli ci dodać pasek wyszukiwania do innych obszarów twojej witryny, w tym do menu nawigacyjnego.

SearchWP Modal Search Form to nasza najlepsza rekomendacja. Ta darmowa wtyczka jest łatwa w użyciu, wygląda świetnie z każdym motywem i nie wpłynie negatywnie na wydajność twojej witryny. Nie wymaga również wtyczki premium SearchWP.

Powiadomienie: Możesz zauważyć, że wtyczka nie została przetestowana z najnowszą wersją WordPressa. Ale sami ją przetestowaliśmy i działa dobrze w tym celu.

Jeśli masz jakiekolwiek pytania, możesz przeczytać nasz artykuł na temat tego, czy powinieneś instalować niesprawdzone wtyczki WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę SearchWP Modal Search Form. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu musisz dodać pasek wyszukiwania do twojego menu WordPress. Po prostu przejdź do Wygląd ” Menu, a następnie upewnij się, że wybrałeś menu podstawowe z listy rozwijanej „Wybierz menu do edycji”.

Make Sure the Primary Menu Is Selected

Następnie kliknij przycisk „Wybierz”.

Następnie kliknij pole Modalne formularze wyszukiwania SearchWP po lewej stronie ekranu.

The SearchWP native search template

Widać, że wtyczka automatycznie dodała szablon wyszukiwania „Native WordPress”. Śmiało i zaznacz pole „Native WordPress”.

Następnie kliknij przycisk „Dodaj do menu”.

Adding a search bar to the WordPress navigation menu

WordPress utworzy teraz nową pozycję „Native WordPress” w menu.

Aby skonfigurować ten element, kliknij go. Na początek warto zmienić etykietę nawigacji na „Szukaj”, aby odwiedzający wiedzieli, że jest to pole wyszukiwania.

Aby dokonać tej zmiany, wystarczy wpisać rodzaj „Szukaj” w polu „Etykieta nawigacji”.

Adding a Search label to the WordPress navigation menu

Następnie kliknij przycisk „Zapisz menu”, aby zapisać twoje zmiany. Teraz, jeśli przejdziesz na twój blog WordPress, zobaczysz nowy pasek wyszukiwania w menu nawigacyjnym.

SearchWP automatycznie dostosuje styl wyszukiwania do twojego motywu WordPress, jak widać na poniższych obrazkach.

Search Preview

Metoda 2: Dodanie paska wyszukiwania w blokowym menu motywu WordPress

Jeśli korzystasz z blokowego motywu WordPress, możesz użyć Edytora całej witryny, aby dodać pasek wyszukiwania do menu nawigacyjnego.

Aby to zrobić, wystarczy przejść do Wygląd Edytor w obszarze administracyjnym WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Zobaczysz teraz listę opcji umożliwiających dostosowanie twojego motywu.

Tutaj wystarczy kliknąć „Nawigacja”.

Selecting Navigation in WordPress Full Site Editing

Następnie kliknij przycisk ołówka „Edytuj”.

Spowoduje to przekierowanie do edytora bloków.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

Na tym etapie możesz kliknąć przycisk „+ Dodaj blok” w dowolnym miejscu na ekranie.

Następnie wybierz blok Szukaj.

Adding the search block to the navigation menu in Full Site Editor

Twoje menu nawigacyjne powinno teraz zawierać pasek wyszukiwania.

Dodatkowo możesz edytować tekst zastępczy i zmienić go na coś w rodzaju „Czego szukasz?”. Na panelu bocznym ustawień bloku możesz dostosować wygląd paska wyszukiwania.

Adding a placeholder text in the search bar with Full Site Editor

Gdy będziesz zadowolony z bloku wyszukiwania, po prostu kliknij „Zapisz”.

Oprócz dodania paska wyszukiwania do twojego menu nawigacyjnego, istnieje wiele innych sposobów na poprawę jakości wyszukiwania w WordPressie.

Jednym z nich jest użycie SearchWP. Ta wtyczka pomaga dostosować własny algorytm wyszukiwania WordPress bez dotykania jakiegokolwiek kodu.

Na przykład, możesz uczynić twój formularz wyszukiwania jeszcze bardziej przyjaznym dla użytkownika, dodając wyniki wyszukiwania na żywo przy użyciu technologii Ajax. Spowoduje to automatyczne wyświetlenie odwiedzającemu odpowiednich wyników wyszukiwania podczas wpisywania zapytania, podobnie jak w Google.

Aby uzyskać więcej informacji, możesz przeczytać nasz artykuł o tym, jak dodać wyszukiwanie Ajax na żywo do twojej witryny WordPress.

Live Search Preview

Oto inne wskazówki i triki usprawniające wyszukiwanie w WordPress:

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać pasek wyszukiwania do menu WordPress. Możesz również zapoznać się z naszym wyborem ekspertów dotyczącym najlepszego oprogramowania do czatu na żywo dla małych firm lub naszą listą przydatnych wskazówek, jak przyspieszyć WordPress i zwiększyć wydajność.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

31 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Angel Rodriguez

    Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.

    • WPBeginner Support

      Glad our recommendation was helpful!

      Administrator

  3. Maricel

    Thank you! Very helpful and very easy.

    • WPBeginner Support

      Glad to hear our article was helpful!

      Administrator

  4. Rawan

    These plugins are untested for WP version 5.8.1

    Is it still ok to install them or is there other plugins that are tested for that version?

  5. jafrin

    hi
    This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page

  6. Erin

    Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
    thank you

    • WPBeginner Support

      For customizing the results page you would want to check with the plugin’s support and they should be able to assist.

      Administrator

  7. Okereke Divine

    As usual, wpbeginner has always been helpful. Thanks alot

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Administrator

  8. Parwez

    Sir, how did u create logo, search bar and menu in header side by side

    • WPBeginner Support

      Our theme is custom created so we manually set that up with the creation of the theme :)

      Administrator

  9. Angelica

    Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.

    • WPBeginner Support

      You’re welcome, glad our article could be helpful :)

      Administrator

  10. Rochelle

    I would like the search item to appear as the first item in the menu, not the last. Is this possible?

    • WPBeginner Support

      It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement :)

      Administrator

  11. Anupam Kumar

    Hi,

    How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,

    Thanks

  12. Rubb

    The explain it not right, the screens images is wrong and I think it is the wrong plugin

    • WPBeginner Support

      It appears the plugin has updated since this article was last updated, we will take a look into updating this post.

      Administrator

  13. James King

    This doesn’t work guys. There’s no such plugin for a start.

    • WPBeginner Support

      Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this :)

      Administrator

  14. Raymond

    Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!

    • WPBeginner Support

      We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
      Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/

      Administrator

  15. Ann

    why does my setting doesnt have an ADD TO SEARCH MENU

    • Dan Conway

      Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under 'Ivory Search > Settings’ then you should be presented with the first settings which are 'Menu search’ and the first expandable option to select a menu to add it to.

  16. Aditi Bisen

    Hi,
    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

  17. Ihsan

    unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.

    • Damith

      No, You don’t need to become developer or professional to make small custom CSS.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.