Come aggiungere una sovrapposizione di ricerca a schermo intero in WordPress

Di recente, uno dei nostri lettori ha chiesto se potevamo scrivere un tutorial su come aggiungere una sovrapposizione di ricerca a schermo intero in WordPress. Probabilmente lo hai visto su siti popolari come Wired. Quando un utente fa clic sull'icona di ricerca, la casella di ricerca si apre e copre l'intero schermo, il che può migliorare l'esperienza dell'utente sui dispositivi mobili. In questo articolo, ti mostreremo come aggiungere una sovrapposizione di ricerca a schermo intero in WordPress.

La ricerca a schermo intero sta lentamente diventando una tendenza perché migliora drasticamente l'esperienza di ricerca per gli utenti mobili. Dal momento che gli schermi mobili sono molto piccoli, offrendo una sovrapposizione a schermo intero, gli utenti possono digitare facilmente e cercare sul tuo sito web.

Quando abbiamo ricevuto questa richiesta di tutorial, sapevamo che avrebbe richiesto del codice. Il nostro obiettivo in WPBeginner è rendere le cose il più semplici possibile.

Una volta terminato di scrivere il tutorial, ci siamo resi conto che era troppo complicato da un processo e che dovrebbe essere racchiuso in un semplice plug-in.

Per semplificare, abbiamo creato un'esercitazione video su come aggiungere una sovrapposizione di ricerca a schermo intero che puoi guardare qui sotto.

Tuttavia, se si desidera solo seguire le istruzioni di testo, è possibile seguire il nostro tutorial passo passo su come aggiungere una sovrapposizione di ricerca a schermo intero in WordPress.

Aggiunta di overlay di ricerca a schermo intero in WordPress

La prima cosa che devi fare è installare e attivare il plug-in Overlay di ricerca a schermo intero di WordPress. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Il plug-in di ricerca di Overlay a schermo intero di WordPress funziona immediatamente e non ci sono impostazioni da configurare.

Puoi semplicemente visitare il tuo sito Web e fare clic sulla casella di ricerca per vedere il plugin in azione.

Si noti che il plug-in funziona con la funzione di ricerca di WordPress predefinita. Funziona anche alla grande con SearchWP, che è un plugin premium che migliora notevolmente la ricerca di WordPress predefinita.

Sfortunatamente, questo plugin non funziona con Google Custom Search.

Personalizzazione della sovrapposizione della ricerca a schermo intero

Il plug-in Overlay di ricerca a schermo intero di WordPress viene fornito con un proprio foglio di stile. Per cambiare l'aspetto dell'overlay di ricerca, dovrai modificare il file CSS del plugin o usare! Important in CSS.

Per prima cosa dovrai connetterti al tuo sito web usando un client FTP. Se non hai mai utilizzato FTP, dai un'occhiata alla nostra guida su come caricare file su WordPress usando FTP.

Una volta connesso, è necessario individuare la cartella CSS del plugin. Lo troverai sotto il seguente percorso:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Troverete un file full-screen-search.css all'interno della cartella css. Devi scaricare questo file sul tuo computer.

Apri il file, hai appena scaricato in un editor di testo semplice come Blocco note. È possibile apportare modifiche a questo file. Ad esempio, volevamo cambiare lo sfondo e il colore del carattere in modo che corrispondessero al nostro sito web demo.

 / ** * Ripristina * - Impedisce a temi e altri plug-in di applicare i propri stili alla ricerca a schermo intero * / # ricerca a schermo intero, # pulsante di ricerca a schermo intero, # pulsante di ricerca a schermo intero.close, # modulo di ricerca a schermo intero, # modulo di ricerca a schermo intero div, # modulo di ricerca a schermo intero div input, # modulo di ricerca a schermo intero div input.search font-family: Arial, sans-serif; sfondo: none; confine: 0 nessuno; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: none; font-size: 100%; height: auto; letter-spacing: normale; list-style: none; delineare: none; Posizione: statica; text-decoration: none; text-trattino: 0; text-shadow: none; text-transform: none; width: auto; visibilità: visibile; overflow: visibile; margin: 0; padding: 0; line-height: 1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-aspetto: none; transizione: nessuno; -webkit-transition: none; -moz-transition: none; -o-transizione: nessuno; -ms-transizione: nessuno;  / ** * Sfondo * / # ricerca a schermo intero visibilità: nascosta; opacità: 0; z-index: 999998; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; sfondo: # 1bc69e; / ** * Aggiungi alcune transizioni CSS3 per mostrare la ricerca a schermo intero * / transizione: opacità 0,5s lineare;  / ** * Visualizza Ricerca a schermo intero quando Apri * / # full-screen-search.open / ** * Poiché stiamo usando visibilità e opacità per il supporto di transizione CSS, * definiamo la posizione: fissa; qui in modo che la ricerca a schermo intero non blocchi * gli elementi HTML sottostanti quando non sono aperti * / position: fixed; visibilità: visibile; opacità: 1;  / ** * Modulo di ricerca * / # modulo di ricerca a schermo intero posizione: relativo; larghezza: 100%; altezza: 100%;  / ** * Pulsante Chiudi * / # pulsante ricerca a schermo intero.close posizione: assoluto; z-index: 999999; sopra: 20px; a destra: 20px; font-size: 30px; font-weight: 300; colore: n. 999; cursore: puntatore;  / ** * Modulo di ricerca Div * / # forma di ricerca a schermo intero div position: absolute; larghezza: 50%; altezza: 100 px; superiore: 50%; a sinistra: 50%; margine: -50px 0 0 -25%;  / ** * Modulo di ricerca Inserisci colore segnaposto * / # modulo di ricerca a schermo intero div input :: - webkit-input-placeholder font-family: Arial, sans-serif; colore: #ccc;  # modulo di ricerca a schermo intero div input: -moz-placeholder font-family: Arial, sans-serif; colore: #ccc;  # full-screen-search form div input :: - moz-placeholder font-family: Arial, sans-serif; colore: #ccc;  # full-screen-search form input div: -ms-input-placeholder font-family: Arial, sans-serif; colore: #ccc;  / ** * Input modulo di ricerca * / # modulo di ricerca a schermo intero div input width: 100%; altezza: 100 px; sfondo: #eee; imbottitura: 20px; font-size: 40px; altezza della linea: 60px; / * Abbiamo aggiunto il nostro colore del carattere qui * / color: # 50B0A6;  

In questo codice, abbiamo solo cambiato il colore di sfondo alla riga 62 e aggiunto il colore del carattere alla riga 150. Se sei bravo con i CSS, sentiti libero di cambiare anche altre regole di stile.

Una volta che hai finito, puoi caricare questo file nella cartella CSS del plugin usando FTP. Ora puoi vedere le tue modifiche visitando il tuo sito web.

Nota importante:

Se stai usando questo nel tuo tema, allora è meglio usare! Tag importanti in modo che gli aggiornamenti del plugin non sostituiscano le modifiche.

Per sviluppatori e consulenti, puoi anche solo rinominare il plug-in e raggrupparlo come parte del tuo tema o dei tuoi servizi.

Abbiamo creato questo plugin solo perché tutti gli altri modi di scrivere questo tutorial sarebbero stati troppo complicati per gli utenti principianti.

Ci auguriamo che questo articolo ti abbia aiutato a aggiungere la sovrapposizione della ricerca a schermo intero al tuo sito WordPress. Potresti anche voler vedere la nostra guida su come aggiungere un effetto di commutazione di ricerca in WordPress

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.