Come aggiungere un overlay di ricerca a schermo intero in WordPress

Recentemente, uno dei nostri lettori ci ha chiesto se potevamo scrivere un tutorial su come aggiungere un overlay di ricerca a schermo intero in WordPress. Probabilmente l'avrai 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 utente sui dispositivi mobili. In questo articolo, ti mostreremo come aggiungere un overlay 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. Poiché gli schermi dei dispositivi mobili sono molto piccoli, offrendo un overlay a schermo intero, rendi facile per gli utenti digitare e cercare sul tuo sito web.

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

Una volta terminata la stesura del tutorial, ci siamo resi conto che era un processo troppo complicato e che avrebbe dovuto piuttosto essere racchiuso in un semplice plugin.

Per semplificare le cose, abbiamo creato un tutorial video su come aggiungere un overlay di ricerca a schermo intero che puoi guardare qui sotto.

Tuttavia, se desideri solo seguire le istruzioni testuali, puoi seguire il nostro tutorial passo passo su come aggiungere un overlay di ricerca a schermo intero in WordPress.

Aggiungere un overlay di ricerca a schermo intero in WordPress

La prima cosa da fare è installare e attivare il plugin WordPress Full Screen Search Overlay. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Il plugin WordPress Full Screen Overlay Search funziona subito 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 plugin funziona con la funzionalità di ricerca predefinita di WordPress. Funziona benissimo anche con SearchWP, che è un plugin premium che migliora notevolmente la ricerca predefinita di WordPress.

Sfortunatamente, questo plugin non funziona con Google Custom Search.

Personalizzazione di Full Screen Search Overlay

Il plugin WordPress Full Screen Search Overlay viene fornito con il proprio foglio di stile. Per modificare l'aspetto dell'overlay di ricerca, dovrai modificare il file CSS del plugin o utilizzare !important in CSS.

Per prima cosa, dovrai connetterti al tuo sito web utilizzando un client FTP. Se sei nuovo nell'uso di FTP, dai un'occhiata alla nostra guida su come caricare file su WordPress usando FTP.

Una volta connesso, devi individuare la cartella CSS del plugin. La troverai nel seguente percorso:

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

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

Apri il file che hai appena scaricato in un editor di testo semplice come Blocco Note. Puoi apportare qualsiasi modifica a questo file. Ad esempio, abbiamo voluto cambiare il colore di sfondo e del carattere per abbinarlo al nostro sito web demo.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    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-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

In questo codice, abbiamo modificato solo il colore di sfondo alla riga 62 e aggiunto il colore del carattere alla riga 150. Se hai dimestichezza con il CSS, sentiti libero di modificare anche altre regole di stile.

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

Nota importante:

Se lo stai usando nel tuo tema, è meglio usare i tag !important in modo che gli aggiornamenti del plugin non sovrascrivano alcuna modifica.

Per sviluppatori e consulenti, puoi anche semplicemente rinominare il plugin e includerlo come parte del tuo tema o dei tuoi servizi.

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

Speriamo che questo articolo ti abbia aiutato ad aggiungere una ricerca a schermo intero al tuo sito WordPress. Potresti anche voler consultare la nostra guida su come aggiungere un effetto di ricerca a comparsa in WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.