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

Come aggiungere una barra di ricerca al menu di WordPress (passo dopo passo)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete aggiungere una barra di ricerca al vostro menu di navigazione di WordPress?

Per impostazione predefinita, WordPress consente di aggiungere la ricerca nella barra laterale, nel piè di pagina e in altre aree predisposte per i widget. Tuttavia, molti utenti preferiscono avere la casella di ricerca di WordPress nel menu di navigazione, perché è più facile da trovare per i visitatori.

In questo articolo vi mostreremo come aggiungere facilmente una barra di ricerca al vostro menu di WordPress senza avere alcuna conoscenza di codifica.

Adding a Search Bar to WordPress Menu

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 vostro sito più a lungo e aumentare il coinvolgimento.

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.

Add a search bar to WordPress menu

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.

Nota: si può notare che il plugin non è stato testato con l’ultima versione di WordPress. Ma lo abbiamo testato noi stessi e funziona bene per questo scopo.

Se avete domande, potete leggere il nostro articolo sull’opportunità di installare plugin WordPress non testati.

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”.

Make Sure the Primary Menu Is Selected

Quindi, fare clic sul pulsante “Seleziona”.

Quindi, fate clic sul riquadro dei moduli di ricerca modale di SearchWP, a sinistra dello schermo.

The SearchWP native search template

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”.

Adding a search bar to the WordPress navigation 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”.

Adding a Search label to the WordPress navigation menu

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.

Search Preview

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.

Selecting the Full-Site Editor from the WordPress admin panel

A questo punto verrà visualizzato un elenco di opzioni per personalizzare il tema.

Qui, basta cliccare su “Navigazione”.

Selecting Navigation in WordPress Full Site Editing

Quindi, fare clic sul pulsante a matita “Modifica”.

In questo modo si accede all’editor dei blocchi.

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

A questo punto, è possibile fare clic sul pulsante “+ Aggiungi blocco” in qualsiasi punto dello schermo.

Successivamente, scegliere il blocco Ricerca.

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

Nel menu di navigazione dovrebbe essere presente 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.

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

Una volta che si è soddisfatti del blocco di ricerca, è sufficiente fare clic su “Salva”.

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. Questo plugin consente di personalizzare l’algoritmo di ricerca di WordPress 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.

Live Search Preview

Ecco altri suggerimenti e trucchi per migliorare la ricerca su WordPress:

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere una barra di ricerca a un menu di WordPress. Potreste anche voler consultare la nostra scelta dei migliori software di live chat per le piccole imprese o il nostro elenco di consigli utili per velocizzare WordPress e aumentare le prestazioni.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

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.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

31 commentiLascia una risposta

  1. Syed Balkhi says

    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 says

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

  3. Rawan says

    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?

  4. jafrin says

    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

  5. Erin says

    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 says

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

      Admin

  6. Angelica says

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

    • WPBeginner Support says

      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

  7. Anupam Kumar says

    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 says

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

      Admin

    • WPBeginner Support says

      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

  8. Raymond says

    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!

    • Dan Conway says

      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.

  9. Ihsan says

    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.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.