Un'elegante barra di ricerca a comparsa può rendere istantaneamente il tuo sito WordPress più raffinato e moderno. Invece di visualizzare una barra di ricerca completa nell'intestazione o nasconderla completamente, un effetto a comparsa mantiene il tuo design ordinato rendendo la ricerca facilmente accessibile.
Abbiamo visto come questo piccolo dettaglio dell'interfaccia utente faccia una grande differenza, conferendo ai siti un aspetto più curato e professionale senza aggiungere disordine.
La parte migliore? Ci sono modi per farlo in modo intelligente ed efficiente.
In questo tutorial, ti mostreremo esattamente come aggiungere un effetto di barra di ricerca a comparsa fluida in WordPress. Che tu gestisca un blog, un sito aziendale o un negozio online, questo miglioramento aiuterà a migliorare la tua esperienza utente con un tocco semplice e raffinato. 🎨
Cos'è l'effetto barra di ricerca a comparsa in WordPress?
L'effetto barra di ricerca a comparsa è una tecnica di web design che ti consente, invece di visualizzare un modulo di ricerca, di mostrare un'icona di ricerca. Quando un utente fa clic su di essa, il modulo di ricerca appare con un'animazione a comparsa.
Il modulo di ricerca predefinito di WordPress non ha un bell'aspetto. Molti temi WordPress più diffusi sostituiscono già il modulo predefinito con i loro stili.
Tuttavia, se il tuo tema utilizza ancora un modulo di ricerca statico e semplice, puoi utilizzare questo tutorial per renderlo più intuitivo.
Tenendo presente ciò, ti mostreremo come aggiungere facilmente l'effetto barra di ricerca a comparsa in WordPress e rendere il tuo sito più interattivo. Ecco una rapida panoramica di tutti gli argomenti che tratteremo in questa guida:
- Aggiungere un effetto barra di ricerca a comparsa in WordPress
- Risoluzione dei problemi dell'effetto barra di ricerca a comparsa
- Suggerimento bonus: aggiungi una migliore ricerca WordPress per il tuo sito web
- FAQ: Aggiungere un effetto barra di ricerca a comparsa in WordPress
- Altre guide per migliorare la tua ricerca WordPress
💡 Suggerimento interno: Questo tutorial è più adatto agli utenti WordPress di livello intermedio e avanzato, poiché richiede una conoscenza di base di HTML / CSS.
Iniziamo.
Aggiungere un effetto barra di ricerca a comparsa in WordPress
Per aggiungere un effetto di ricerca a comparsa in WordPress, dovrai inserire un blocco o un widget di modulo di ricerca sul tuo sito web e quindi aggiungere del codice CSS personalizzato.
Innanzitutto, assicuriamoci che ci sia un modulo di ricerca sul tuo sito web.
Aggiungere un modulo di ricerca in un tema a blocchi con la modifica completa del sito
Se stai utilizzando un tema WordPress a blocchi con la funzionalità di modifica completa del sito, ecco come aggiungerai il modulo di ricerca al tuo sito web.
Visita semplicemente Aspetto » Editor dalla tua bacheca di WordPress. Nella schermata di modifica, vorrai aggiungere il blocco 'Ricerca' dove desideri visualizzare il modulo di ricerca.
Dopodiché, non dimenticare di fare clic sul pulsante ‘Salva’ per memorizzare le tue modifiche.
Aggiungere un modulo di ricerca in altri temi WordPress
Per i temi WordPress senza la funzionalità di modifica completa del sito, puoi aggiungere il blocco o il widget di ricerca alla tua barra laterale o a qualsiasi area predisposta per i widget.
Per fare ciò, dovrai andare su Aspetto » Widget dalla tua bacheca di WordPress. Quindi, puoi aggiungere il blocco/widget 'Ricerca' alla barra laterale dove desideri visualizzare il modulo di ricerca.
Successivamente, troviamo un'immagine trasparente per l'icona di ricerca.
Per questo tutorial, stiamo utilizzando questa immagine poiché è adatta per sfondi scuri (sentiti libero di usarla sul tuo sito web).
Se hai bisogno di creare la tua icona di ricerca, sarebbe ottimo creare un'immagine PNG trasparente con dimensioni non superiori a 50x50 pixel.
Il passo successivo è caricare l'icona sul tuo sito web. Vai semplicemente su Media » Aggiungi nuovo e fai clic su 'Seleziona file' per caricare la tua immagine dell'icona di ricerca.
Una volta caricato, fai clic sul pulsante 'Copia URL negli appunti' e incolla l'URL in un editor di testo semplice come Blocco note o TextEdit.
Ora che tutto è a posto, dovrai aggiungere del CSS personalizzato al tuo sito WordPress. Ti consigliamo di utilizzare WPCode, il miglior plugin per snippet di codice, per salvare il tuo CSS personalizzato.
WPCode ti consente di aggiungere facilmente snippet di codice personalizzato in WordPress. È facile da usare e il tuo codice non sarà influenzato dagli aggiornamenti del tema o quando passi a un tema diverso.
Alcuni dei nostri marchi partner lo utilizzano per aggiungere e gestire i loro snippet personalizzati. Ha funzionato eccezionalmente bene per loro e puoi saperne di più nella nostra recensione dettagliata di WPCode.
Quindi, installiamo e attiviamo il plugin gratuito WPCode. Se hai bisogno di aiuto, puoi consultare la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, visita semplicemente la pagina Snippet di codice » + Aggiungi snippet nella tua bacheca di amministrazione di WordPress.
Nella schermata successiva, vedrai la Libreria di snippet WPCode.
Passa il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' nella libreria e fai clic sul pulsante 'Aggiungi snippet personalizzato' quando appare.
Successivamente, apparirà un elenco di tipi di codice sullo schermo. Per questo tutorial devi selezionare l'opzione 'Snippet HTML'.
Questo perché caricherai il CSS personalizzato nell'intestazione del sito Web utilizzando HTML.
Da lì, devi fornire un titolo per questo snippet di codice.
Potrebbe essere qualsiasi cosa che ti aiuti a identificare lo snippet.
Ora puoi incollare il seguente codice nella casella 'Anteprima codice':
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ Importante: Non dimenticare di sostituire /url/to/search-icon.png con l'URL dell'immagine che hai copiato in precedenza.
Dopodiché, dovrai cambiare l'interruttore da 'Inattivo' ad 'Attivo'.
Quindi, non dimenticare di fare clic sul pulsante 'Salva Snippet'.
E questo è tutto!
Se visiti il tuo sito web, puoi vedere il tuo modulo di ricerca con l'effetto toggle in azione.
Risoluzione dei problemi dell'effetto barra di ricerca a comparsa
Il metodo sopra funzionerebbe con la maggior parte dei temi WordPress moderni che utilizzano blocchi widget. Tuttavia, per alcuni temi, questo metodo potrebbe non funzionare.
Ciò potrebbe accadere se il modulo di ricerca nel tuo tema WordPress non ha le classi wp-block-search__inside-wrapper e wp-block-search__input .
In tal caso, dovrai utilizzare lo strumento Ispeziona per scoprire quali classi CSS vengono utilizzate dal tuo tema WordPress.
Ad esempio, nello screenshot seguente, il nostro tema demo utilizza queste classi CSS per il modulo di ricerca.
Ora, puoi modificare il codice seguente e utilizzare queste classi CSS al loro posto.
Ecco un esempio:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Ecco come appariva sul nostro sito di prova:
Suggerimento bonus: aggiungi una migliore ricerca WordPress per il tuo sito web
L'effetto toggle rende solo più bello il tuo modulo di ricerca WordPress. Non influisce sulla qualità dei risultati di ricerca del tuo sito web.
WordPress viene fornito con una funzionalità di ricerca molto basilare per impostazione predefinita. Questa funzionalità è spesso lenta, imprecisa e potrebbe mostrare risultati vuoti.
È qui che entra in gioco SearchWP, il miglior plugin di ricerca per WordPress. Ti consente di sostituire facilmente la funzionalità di ricerca predefinita con un potente motore di ricerca.
L'abbiamo testato per esplorare tutte le sue funzionalità e puoi vedere la nostra recensione completa di SearchWP per saperne di più.
SearchWP sostituisce automaticamente i moduli di ricerca, quindi non è necessario modificare alcun file del tema. Cerca corrispondenze ovunque sul tuo sito web e migliora drasticamente la qualità dei risultati di ricerca.
Viene fornito anche con un'estensione per la ricerca live che visualizza istantaneamente i risultati mentre gli utenti digitano le loro query. Inoltre, ha un supporto completo per l'eCommerce, che ti consente di creare un'esperienza di ricerca WooCommerce intelligente sul tuo negozio online.
Per istruzioni passo-passo, sentiti libero di consultare la nostra guida su come migliorare la ricerca di WordPress con SearchWP.
FAQ: Aggiungere un effetto barra di ricerca a comparsa in WordPress
Hai domande su come funziona l'interruttore di ricerca o su come personalizzarlo sul tuo sito WordPress? Ecco alcune domande comuni che riceviamo, con risposte chiare per aiutarti.
Ho bisogno di conoscere il codice per aggiungere un effetto di interruttore di ricerca?
Non proprio. Sebbene una conoscenza di base di HTML o CSS possa aiutare, puoi seguire i passaggi di questa guida senza alcuna esperienza di codifica.
Cosa succede se il mio tema non mostra correttamente l'effetto di interruttore?
Alcuni temi potrebbero richiedere aggiustamenti extra. Se l'interruttore non viene visualizzato correttamente, puoi utilizzare lo strumento Ispeziona del browser per trovare le classi CSS del tuo tema e modificare il CSS personalizzato come mostrato nel tutorial.
Questo interruttore di ricerca funzionerà sui dispositivi mobili?
Sì! L'effetto di interruttore è reattivo e dovrebbe funzionare bene sia su desktop che su mobile. Assicurati solo di testarlo su diverse dimensioni dello schermo per confermare che tutto sia a posto.
Posso usare qualsiasi immagine per l'icona di ricerca?
Sì, ma è meglio usare un'icona PNG trasparente che risalti sullo sfondo del tuo sito. Ti consigliamo di mantenerla sotto i 50×50 pixel in modo che appaia nitida e si carichi velocemente.
Altre guide per migliorare la tua ricerca WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un effetto di interruttore di ricerca in WordPress. Successivamente, potresti trovare utili queste guide:
- Come aggiungere una barra di ricerca al menu di WordPress
- Come cercare per categoria in WordPress
- Come aggiungere la ricerca multilingue in WordPress
- Come includere tipi di post personalizzati nei risultati di ricerca di WordPress
- Come Creare una Directory dei Membri Ricercabile in WordPress
- Come creare un database ricercabile in WordPress
- Come escludere pagine dai risultati di ricerca di WordPress
- Come aggiungere la funzionalità di ricerca vocale al tuo sito WordPress
- I migliori plugin di ricerca per utenti WordPress
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Prad
Grazie per questo.
L'interfaccia utente del blocco di ricerca predefinito è piuttosto scialba. Mi piace questa implementazione. Tuttavia, quando è selezionato "Solo pulsante", quando l'utente fa clic sull'icona di ricerca, la barra di ricerca appare a sinistra spingendo il menu e questo rovina l'interfaccia utente. C'è un modo per far apparire la barra di ricerca sotto il pulsante di ricerca come in molti siti web? Quell'approccio sembra molto più pulito, secondo me.
Grazie.
Supporto WPBeginner
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Amministratore
Dennis Muthomi
Ho questo effetto su un sito web di un cliente.
Una cosa da considerare quando si implementa questa funzionalità è l'esperienza mobile.
Su schermi più piccoli, potrebbe essere utile regolare il CSS per garantire che la barra di ricerca espansa non si sovrapponga ad altri elementi.
Jiří Vaněk
Stavo cercando un modo per risparmiare spazio nel mio menu principale, dove la casella di ricerca occupava parecchio spazio. Onestamente, non riuscivo a pensare a come risparmiare spazio perché il menu era piuttosto lungo. Quindi ho provato a ridurre le dimensioni della casella di ricerca. Dopo aver letto questo articolo, ho applicato la tua soluzione ed è esattamente quello che stavo cercando. La ricerca sul mio sito web non viene utilizzata molto spesso, e questa è una soluzione elegante per dare spazio al menu principale e ridurre la casella di ricerca alle dimensioni necessarie. Ottimo lavoro.
Supporto WPBeginner
Sono contento che l'hai trovato utile!
Amministratore
James Burns
Grazie mille. Esattamente le informazioni di cui avevo bisogno, presentate in un formato facile da capire.
Supporto WPBeginner
You’re welcome, glad you found our content helpful
Amministratore
Osh
Ciao,
Sto usando un tema figlio, dovrei aggiungere questi codici ai file del tema padre?
Ho provato a farlo e non funziona, per favore aiutami!!!
Grazie
Supporto WPBeginner
Dovresti aggiungere il codice al tuo tema figlio
Amministratore
Benjamin Rutledge
È possibile implementare questo solo su mobile? Il mio tema ha una bella funzione di ricerca animata sul desktop, ma solo un interruttore per mostrare/nascondere la casella di ricerca al posto del mio logo su mobile.
Beth Terry
Ciao. Grazie mille per questo codice. Ho dovuto giocare un po' con il posizionamento per far apparire il pulsante di ricerca dove volevo, e dato che volevo che apparisse solo nella versione mobile, ho anche aggiunto del CSS alla media query per schermi superiori a 800px per mostrare il campo di ricerca completo invece dell'icona. Ci sono riuscito benissimo, ma penso che sia un po' complicato per chi vuole qualcosa di fondamentalmente "plug and play".
Puoi vedere i risultati qui:
A tutti coloro che dubitano, javascript non è assolutamente necessario.
Beth Terry
Inoltre, voglio aggiungere che sto usando un tema child di Twenty Twelve, che viene fornito con il codice di ricerca HTML4. L'aggiunta del supporto HTML5 a functions.php non l'ha risolto, quindi ho copiato e incollato il codice di ricerca HTML5 che hai pubblicato sopra nell'header del mio tema dove volevo la casella di ricerca.
Emily G
Ciao – sto implementando questo su un sito web e vorrei usare FontAwesome invece di un'immagine. Non riesco a far apparire l'icona. Hai qualche suggerimento? Sto aggiungendo il font e l'icona font-family: FontAwesome;
content: “\f002″; a .search-form input[type=”search”]
Grazie!
Bradley
Prova questo:
font: normal normal normal 1em/1 FontAwesome;
Steve
Speravo davvero che questo funzionasse per me. Ho incollato il codice nell'area CSS aggiuntivo del mio tema (twentytwelvechild), ho aggiunto search-icon.png alla cartella del mio tema usando FTM e ho aggiunto add_theme_support('html5', array('search-form')); al file functions.php del mio tema. Non vedo alcun cambiamento e mi chiedo cosa mi sia sfuggito. Spero che qualcuno possa darmi un indizio. grazie.
Harmandeep Singh
Non funziona.
Crowd
Grazie mille, funziona a meraviglia.
Pensi che ci sia un modo per far apparire il campo di ricerca da destra a sinistra (a differenza di come avviene ora da sinistra a destra)?
Marimar
Allinea il testo a destra
text-align: right;
Scorre sull'altro lato.
Tony López
Grazie! Funziona perfettamente.
Cato
Sì… proprio come pensavo, questo non funziona affatto. Come dovrebbe funzionare senza JS?
Cato
Hmmm questo è un po' vecchio ma… non richiede javascript qui davvero? che tipo di magia oscura è questa?
Supporto WPBeginner
Invece di JS, questa tecnica usa CSS.
Amministratore
SiRetu
Grazie per il codice… È responsive? Voglio dire, voglio che il campo di ricerca sia completamente visibile su mobile. È possibile?
Panfi
Not working for me and wonder why
Cassy
Ho fatto funzionare questo su Genesis ma il mio modulo di ricerca è nella barra di navigazione, e quando la larghezza dello schermo è relativamente troppo piccola, il modulo di ricerca si sposta verso il basso.
Sohan
Funziona!
Grazie milleeeeeeeeeeeeeeeeeeeeeee!
Anur
Non credo che questo funzioni su Genesis
Cassy
L'ho fatto funzionare su Genesis. Devi spostare search-icon.png nella cartella immagini del tuo tema child di Genesis. Poi, a seconda di dove metti il tuo modulo di ricerca, il mio è nella barra di navigazione quindi è leggermente diverso, modifichi lo stile CSS a tuo piacimento. Ho dovuto modificare la classe “.genesis-nav-menu .search input” per farlo funzionare.
Laura
Ciao Cassy, puoi dare maggiori informazioni su come hai modificato la classe .genesis-nav-menu .search input? Non riesco a farlo funzionare. Grazie!
Maria
Ciao! Sto usando Genesis e non riesco a far funzionare questo effetto. Qualche consiglio sul perché?
Anur
sì lo stesso problema sono su genesis con il tema enterprise pro non funziona.
Chiunque abbia una soluzione per farlo funzionare su genesis..
Roy
questo è davvero fantastico! È possibile far sì che l'icona rimanga fissa a destra mentre il modulo scorre verso sinistra? Non riesco a capirlo!
Joshua Farr
Saluti – Grazie per questo ottimo pezzo di codice. Ho provato a inserirlo nel sito di un cliente su cui sto lavorando, usando la versione HTML5 del codice, ho inserito il pezzo aggiuntivo in functions.php e aggiunto tutto il CSS. Ho inserito un'icona di ricerca e ho fatto in modo che il modulo si visualizzasse come desidero sul sito – farà anche tutto l'effetto di apertura/chiusura come desiderato – ma quando inserisco il testo che voglio cercare per testarlo, non riesco a inviare la ricerca per visualizzare i risultati. Stiamo usando un tema woocommerce, "Mystile", che ha un modulo di ricerca predefinito (che funziona quando inserito) ma preferisco di gran lunga l'aspetto e la funzionalità del modulo come menzionato in questa pagina.
Abbiamo provato a mettere il codice del modulo di ricerca woocommerce fianco a fianco con il codice che hai fornito sopra, abbiamo provato a scambiare pezzi per "fondere" i due… ma senza successo.
Qualsiasi raccomandazione sarebbe estremamente utile.
Grazie!
-Josh
Supporto WPBeginner
Ci potrebbero essere molte ragioni, non è possibile per noi aiutare con problemi di compatibilità del tema.
Amministratore
Rajeesh Nair
Ora questa è roba interessante. Anche se sono un semplice principiante e in realtà uso l'opzione di ricerca predefinita del tema del blog che è come un pop-up (non proprio un pop-up però, dato che è CSS e non javascript) e visualizza la barra di ricerca.
Ma quello che sto cercando esattamente è come visualizzare la Ricerca Google insieme alla ricerca del blog come si trova nei blog popolari come ListVerse e altri. Per favore, guidami attraverso questo!
Supporto WPBeginner
Dai un'occhiata alla nostra guida su come aggiungere la ricerca Google in WordPress.
Amministratore
adolf witzeling
Un altro ottimo tutorial. Lo aggiungerò al mio sito, solo perché è fantastico.
alexisnicholson
Il codice sembra favoloso, apprezzo i tuoi sforzi, sicuramente proverò questo per il mio progetto WordPress.
Codingbrains
Shahraar Khan
Una demo sarebbe utile.. Inoltre, cosa significa l'uso dell'attributo role=\"search\" nel tag form, a cosa serve l'attributo \"role\"?
Susan Silver
Stavo cercando un tutorial semplice su questo. Grazie! Ne hai già fatto uno sui menu scorrevoli come quelli dell'app mobile di Facebook? Questi menu stanno diventando molto popolari, anche per le app desktop.
Supporto WPBeginner
In realtà sì, dai un'occhiata a come aggiungere un menu a pannello scorrevole in WordPress.
Amministratore