Om det är något som din WordPress-meny behöver, så är det ett sökfält. I vår erfarenhet av att hantera många WordPress-webbplatser har vi funnit att ett välplacerat sökfält kan göra stor skillnad för användarnas engagemang och webbplatsnavigering.
När en meny inte har något sökfält har vi sett att besökare kämpar för att hitta specifikt innehåll, särskilt på större webbplatser med omfattande arkiv.
Att lägga till ett sökfält i din WordPress-meny är dock inte alltid helt enkelt, särskilt om du använder ett klassiskt tema. Därför har vi sammanställt den här przewodniken för att visa dig hur du enkelt lägger till ett sökfält i din WordPress-meny, oavsett vilket tema du använder.
Varför add to ett search-fält till navigation menu i WordPress?
Ett sökfält hjälper användarna att hitta det de letar efter utan att lämna din WordPress-webbplats. Detta kan förbättra användarupplevelsen, få besökarna att stanna kvar längre på webbplatsen och öka engagemanget.
Det är därför som de flesta webbdesigners och experter rekommenderar att man lägger till ett sökfält i navigation menu, där användarna lätt kan hitta det.
Beroende på vilket theme du använder kommer det att vara olika hur du lägger till ett search-fält i din menu. Om du använder ett klassiskt theme behöver du ett plugin för search i WordPress.
När det gäller användare av block theme kan du helt enkelt använda Full Site Editor (Redigering av hela webbplatsen).
Med det i åtanke ska vi nu gå igenom de två metoderna en efter en. Du kan använda snabblänkarna under för att hoppa till din önskade section:
Metod 1: Lägga till ett sökfält i ett klassiskt WordPress Theme’s Menu
Den här första metoden är för dig som använder ett klassiskt WordPress Theme. Detta innebär att du ser menyn Appearance ” Customize i din WordPress dashboard och kan komma åt Theme Customizer.
Om du använder ett klassiskt theme kan du bara add WordPress search-widget till widget-klara areas som sidebar, eller ej WordPress menu.
För att komma runt det här problemet behöver du ett plugin som låter dig lägga till ett sökfält till andra områden på din webbplats, inklusive navigeringsmenyer.
SearchWP Modal Search Form är vår bästa rekommendation. Detta gratis plugin är lätt att använda, ser bra ut med alla teman, och kommer inte att påverka din sites prestanda negativt. Det kräver inte heller det premium SearchWP plugin.
Det första du behöver göra är att installera och aktivera SearchWP Modal Search Form plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering måste du add to search-fältet till din WordPress menu. Gå till Appearance ” Menus och se sedan till att du väljer Primary menu i dropdown ”Select menu to edit”.
Därefter klickar du på knappen ”Select”.
Därefter klickar du på SearchWP Modal Search Forms box till vänster på vyn.
Du kan se att pluginet automatiskt har lagt till en ”Native WordPress” search template. Gå vidare och kontrollera boxen ”Native WordPress”.
Klicka sedan på knappen ”Add to menu”.
WordPress kommer nu att lägga till ett new ”Native WordPress”-objekt i menyn.
För att konfigurera det här objektet, ge det ett click. Till att börja med är det en bra idé att ändra etiketten för navigation till ”Search” så att besökarna vet att detta är ett sökfält.
För att göra denna ändring skriver du helt enkelt ”Search” i fältet ”Navigation Label”.
Därefter klickar du på knappen ”Save Menu” för att save dina ändringar. Om du nu besöker din WordPress blogg kommer du att se ett new Search-fält i navigation menu.
SearchWP kommer automatiskt att utforma search så att den passar ditt WordPress theme, som du kan se på följande images.
Metod 2: Lägga till ett sökfält i ett Block WordPress Theme’s Menu
Om du använder ett block WordPress theme, kan du använda Full Site Editor för att add to ett sökfält till din navigation menu.
För att göra det, gå bara till Appearance ” Editor i WordPress admin area.
Du kommer nu att se en lista med alternativ för att customize ditt theme.
Här klickar du bara på ”Navigation”.
Klicka sedan på knappen ”Edit” i pennan.
Då kommer du till Block Editor.
I detta skede kan du klicka på knappen ”+ Add Block” var som helst på vyn.
Därefter väljer du blocket Search.
Din navigeringsmeny bör nu ha ett sökfält.
Dessutom kan du editera texten i placeholderen och ändra den till något som gillar ”What are you search for? I blockets sidebar för inställningar kan du gratis customize hur search-fältet ser ut.
När du är nöjd med search blocket klickar du bara på ”Save”.
Bonus tips: Använd SearchWP för att förbättra din WordPress-sökning
Förutom att lägga till ett sökfält i din navigation menu finns det många fler sätt att förbättra din WordPress search-upplevelse.
Ett är att använda SearchWP. Det är det bästa sökpluginet för WordPress för att anpassa din sökalgoritm utan att röra någon kod.
Till exempel kan du göra ditt sökformulär ännu mer användarvänligt genom att lägga till Live-sökresultat med hjälp av Ajax-teknik. Detta kommer automatiskt att visa besökaren relevanta sökresultat när de skriver in sökningen, precis som Google.
För mer information kan du läsa vår artikel om hur du lägger till live Ajax search på din WordPress site.
Att lägga till ett SearchWP-sökfält är också enkelt. Om du använder SearchWP Search Modal Form i metod 1, kan du också använda SearchWP-pluginet med det.
Om du använder ett blocktema kommer SearchWP med ett inbyggt sökformulärsblock som du kan lägga till var som helst på din webbplats, inklusive navigeringsmenyn.
Här är andra tips och tricks för att förbättra WordPress search:
- Så här customize du sökresultatsidan i WordPress
- Hur man gör Search efter Category i WordPress (Bästa metoden)
- Så här använder du flera sökformulär i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till ett sökfält i en WordPress-meny. Du kanske också vill se våra przewodniker om hur du stylar WordPress-navigeringsmenyer och hur du lägger till röstsökfunktion på din WordPress-webbplats.
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.
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!
Administratör
Maricel
Thank you! Very helpful and very easy.
WPBeginner Support
Glad to hear our article was helpful!
Administratör
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?
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
WPBeginner Support
It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Administratör
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.
Administratör
Okereke Divine
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support
You’re welcome, glad our guide could be helpful
Administratör
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
Administratör
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
Administratör
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
Administratör
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
WPBeginner Support
For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
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.
Administratör
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
Administratör
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/
Administratör
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.
Aditi Bisen
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
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.