Se c’è una cosa di cui il vostro menu WordPress ha bisogno, è una barra di ricerca. Nella nostra esperienza di gestione di numerosi siti WordPress, abbiamo scoperto che una barra di ricerca ben posizionata può fare la differenza nell’engagement degli utenti e nella navigazione del sito.
Quando un menu non ha una barra di ricerca, abbiamo osservato che i visitatori faticano a trovare contenuti specifici, soprattutto nei siti più grandi con archivi estesi.
Tuttavia, aggiungere una barra di ricerca al menu di WordPress non è sempre semplice, soprattutto se si utilizza un tema classico. Ecco perché abbiamo messo insieme questa guida per mostrarvi come aggiungere facilmente una barra di ricerca al vostro menu di WordPress, indipendentemente dal tema che state utilizzando.
Perché aggiungere una barra di ricerca al menu di navigazione di WordPress?
Una barra di ricerca aiuta gli utenti a trovare ciò che cercano senza lasciare il vostro sito WordPress. Questo può migliorare l’esperienza dell’utente, trattenere i visitatori sul sito più a lungo e aumentare l’engagement.
Ecco perché la maggior parte dei progettisti e degli esperti di siti web consiglia di aggiungere una barra di ricerca al menu di navigazione, dove gli utenti possono trovarla facilmente.
A seconda del tema utilizzato, le modalità di aggiunta di una barra di ricerca al menu saranno diverse. Se si utilizza un tema classico, è necessario un plugin di ricerca per WordPress.
Per quanto riguarda gli utenti di temi a blocchi, è possibile utilizzare semplicemente il Full Site Editor (FSE).
Tenendo conto di ciò, esaminiamo i due metodi uno per uno. Potete usare i link rapidi qui sotto per passare alla sezione desiderata:
Metodo 1: Aggiunta di una barra di ricerca nel menu di un tema WordPress classico
Questo primo metodo è per coloro che utilizzano un tema classico di WordPress. Ciò significa che nella dashboard di WordPress è presente il menu Aspetto “ Personalizza e si può accedere al Theme Customizer.
Se si utilizza un tema classico, è possibile aggiungere il widget di ricerca di WordPress solo alle aree predisposte per i widget, come la barra laterale, e non al menu di WordPress.
Per ovviare a questo problema, è necessario un plugin che consenta di aggiungere una barra di ricerca ad altre aree del sito, compresi i menu di navigazione.
SearchWP Modal Search Form è il nostro miglior consiglio. Questo plugin gratuito è facile da usare, si abbina bene a qualsiasi tema e non influisce negativamente sulle prestazioni del sito. Inoltre, non richiede il plugin premium SearchWP.
La prima cosa da fare è installare e attivare il plugin SearchWP Modal Search Form. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario aggiungere la barra di ricerca al menu di WordPress. Basta andare su Aspetto ” Menu e assicurarsi di selezionare il menu primario nel menu “Seleziona menu da modificare”.
Quindi, fare clic sul pulsante “Seleziona”.
Quindi, fate clic sul riquadro dei moduli di ricerca modale di SearchWP, a sinistra dello schermo.
Si può notare che il plugin ha aggiunto automaticamente un modello di ricerca “Native WordPress”. Selezionate la casella “WordPress nativo”.
Quindi, fare clic sul pulsante “Aggiungi al menu”.
WordPress aggiungerà ora una nuova voce “WordPress nativo” al menu.
Per configurare questo elemento, fare clic su di esso. Per cominciare, è bene cambiare l’etichetta di navigazione in “Ricerca”, in modo che i visitatori sappiano che si tratta di un campo di ricerca.
Per effettuare questa modifica, è sufficiente digitare “Ricerca” nel campo “Etichetta di navigazione”.
Dopodiché, fate clic sul pulsante “Salva menu” per salvare le modifiche. Ora, se visitate il vostro blog WordPress, vedrete una nuova barra di ricerca nel menu di navigazione.
SearchWP modella automaticamente la ricerca in base al tema di WordPress, come si può vedere nelle immagini seguenti.
Metodo 2: Aggiungere una barra di ricerca nel menu di un tema WordPress a blocchi
Se si utilizza un tema WordPress a blocchi, è possibile utilizzare l’Editor completo del sito per aggiungere una barra di ricerca al menu di navigazione.
Per farlo, basta andare su Aspetto “ Editor nell’area di amministrazione di WordPress.
A questo punto verrà visualizzato un elenco di opzioni per personalizzare il tema.
Qui, basta cliccare su “Navigazione”.
Quindi, fare clic sul pulsante a matita “Modifica”.
In questo modo si accede all’editor dei blocchi.
A questo punto, è possibile fare clic sul pulsante “+ Aggiungi blocco” in qualsiasi punto dello schermo.
Successivamente, scegliere il blocco Ricerca.
Il menu di navigazione dovrebbe ora contenere una barra di ricerca.
Inoltre, è possibile modificare il testo segnaposto e cambiarlo in qualcosa come “Cosa stai cercando?”. Nella barra laterale delle impostazioni del blocco, è possibile personalizzare l’aspetto della barra di ricerca.
Una volta che si è soddisfatti del blocco di ricerca, è sufficiente fare clic su “Salva”.
Suggerimento bonus: Utilizzare SearchWP per migliorare la ricerca su WordPress
Oltre all’aggiunta di una barra di ricerca al menu di navigazione, esistono molti altri modi per migliorare l’esperienza di ricerca su WordPress.
Uno di questi è utilizzare SearchWP. È il miglior plugin di ricerca per WordPress per personalizzare l’algoritmo di ricerca senza toccare alcun codice.
Ad esempio, potete rendere il vostro modulo di ricerca ancora più facile da usare aggiungendo risultati di ricerca in tempo reale utilizzando la tecnologia Ajax. In questo modo, i risultati della ricerca vengono mostrati automaticamente al visitatore mentre digita la domanda, proprio come avviene con Google.
Per ulteriori informazioni, potete leggere il nostro articolo su come aggiungere la ricerca Ajax live al vostro sito WordPress.
Anche l’aggiunta di una barra di ricerca SearchWP è facile. Se si utilizza il modulo modale di ricerca SearchWP nel metodo 1, è possibile utilizzare anche il plugin SearchWP.
Se si utilizza un tema a blocchi, SearchWP è dotato di un blocco modulo di ricerca integrato che può essere aggiunto ovunque nel sito, compreso il menu di navigazione.
Ecco altri suggerimenti e trucchi per migliorare la ricerca su WordPress:
- Come personalizzare la pagina dei risultati di ricerca in WordPress
- Come cercare per categoria in WordPress (metodo migliore)
- Come utilizzare i moduli di ricerca multipli in WordPress
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere una barra di ricerca a un menu di WordPress. Vi consigliamo di consultare anche le nostre guide su come creare un menu di navigazione per WordPress e su come aggiungere la funzionalità di ricerca vocale al vostro sito WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e 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!
Admin
Maricel
Thank you! Very helpful and very easy.
WPBeginner Support
Glad to hear our article was helpful!
Admin
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/
Admin
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.
Admin
Okereke Divine
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support
You’re welcome, glad our guide could be helpful
Admin
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
Admin
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
Admin
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
Admin
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/
Admin
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.
Admin
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
Admin
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/
Admin
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.