Come aggiungere una ricerca Attiva / disattiva effetto in WordPress

Hai visto l'icona di ricerca con l'effetto di attivazione su molti siti Web popolari? Dai un'occhiata al nostro progetto gemello List25 per un esempio. L'idea è quella di visualizzare una semplice icona di ricerca, e quando l'utente fa clic su di esso, i moduli di ricerca scivolano anche noti come effetto di commutazione. È un effetto pulito che consente anche di risparmiare spazio e consente agli utenti di concentrarsi sul contenuto. Per non parlare, questo è ottimo per i temi di risposta mobile. In questo articolo, ti mostreremo come aggiungere un effetto di attivazione / disattivazione nei temi di WordPress.

Nota: Questo tutorial è per gli utenti intermedi con conoscenza pratica dei tag modello, HTML e CSS di WordPress. Si consiglia agli utenti di livello principesco di esercitarsi prima sul server locale.

Visualizzazione del modulo di ricerca di WordPress

WordPress aggiunge le classi CSS predefinite all'HTML generato da vari tag modello all'interno di un tema. Uso dei temi WordPress tag modello per visualizzare il modulo di ricerca. Può generare due diversi moduli di ricerca, uno per i temi HTML4 e uno per i temi con supporto HTML5. Se il tuo tema ha add_theme_support ('html5', array ('search-form'))) linea nel file functions.php, quindi questo tag modello emetterà un modulo di ricerca HTML5. Altrimenti, produrrà un modulo di ricerca HTML4.

Un altro modo per scoprire quale forma genera il tuo tema è guardare il codice sorgente del modulo di ricerca.

Questa è la forma che il tag modello get_search_form () mostrerà quando il tuo tema non ha supporto HTML5:

 
 Cercare:     

E questa è la forma che genererà per un tema con supporto HTML5.

   Cercare:     

Per il bene di questo tutorial, utilizzeremo il modulo di ricerca HTML5. Se il tuo tema genera un modulo di ricerca HTML4, aggiungi questa riga di codice nel file functions.php del tuo tema:

 add_theme_support ('html5', array ('search-form')); 

Una volta verificato che il modulo di ricerca sta generando il modulo HTML5, il passaggio successivo consiste nel posizionare il modulo di ricerca in cui si desidera visualizzarlo con l'effetto di attivazione / disattivazione.

Aggiunta dell'effetto Toggle al modulo di ricerca di WordPress

La prima cosa di cui avrai bisogno è un'icona di ricerca. Il tema predefinito Twenty Thirteen in WordPress viene fornito con una piccola icona molto carina, che verrà utilizzata nel nostro tutorial. Tuttavia, sentiti libero di crearne uno in Photoshop o di scaricarne uno dal web. Assicurati che il file sia denominato search-icon.png.

Ora devi caricare questa icona di ricerca nella cartella delle immagini del tema. Collegati al tuo sito web usando un client FTP come Filezilla, e apri la directory dei temi.

Ora questo è il passo finale e più cruciale. Devi aggiungere questo CSS al foglio di stile del tuo tema:

 .site-header .search-form position: absolute; a destra: 200 px; superiore: 200 px;  .site-header .search-field background-color: transparent; background-image: url (images / search-icon.png); posizione di sfondo: centro 5px; background-repeat: no-repeat; dimensione dello sfondo: 24px 24px; confine: nessuno; cursore: puntatore; altezza: 37px; margine: 3px 0; riempimento: 0 0 0 34 px; posizione: relativa; -webkit-transition: larghezza 400ms facilità, fondo 400ms facilità; transizione: larghezza 400ms facilità, fondo 400ms facilità; larghezza: 0;  .site-header .search-field: focus background-color: #fff; border: 2px solid # c3c0ab; cursore: testo; contorni: 0; larghezza: 230 px;  .search-form .search-submit display: none;  

La cosa importante da notare su questo CSS, è l'effetto di transizione CSS3 che ci consente di creare facilmente l'effetto toggle. Si noti inoltre che sarà necessario regolare il posizionamento dell'icona di ricerca e la forma in base al layout del tema.

Ci auguriamo che questo articolo ti abbia aiutato ad aggiungere l'effetto di attivazione / disattivazione della ricerca nel tuo tema WordPress. Quali sono le tue opinioni sul modulo di ricerca alternativo? Stiamo vedendo sempre più siti che utilizzano questo effetto. Lascia il tuo feedback e le domande nei commenti qui sotto o unisciti a noi nella conversazione su Google+.