Come aggiungere un campo di ricerca al menu secondario di Divi

Nel tutorial Divi di oggi, ti mostreremo come aggiungere un campo di ricerca al tuo menu secondario. Il menu secondario è anche conosciuto come l'intestazione della tua pagina e il luogo in cui cerchi di inserire alcune informazioni pratiche sul tuo sito web o azienda. L'aggiunta di un campo di ricerca potrebbe essere una richiesta che hai avuto da un cliente o un'esigenza che hai per il tuo sito web. In ogni caso, ti mostreremo come integrare facilmente questo campo di ricerca nella tua navigazione secondaria quando utilizzi il tema Divi.

Risultato

Prima di addentrarci nei diversi passaggi che dovrai compiere per arrivarci; potrebbe essere interessante mostrarti il ​​risultato in anticipo. Seguendo i passaggi nel post e aggiungendo modifiche all'aspetto CSS, otterrai il seguente risultato su un menu secondario predefinito:

Perché aggiungere un campo di ricerca al tuo menu secondario?

Aggiungere una possibilità di ricerca al tuo menu secondario è una delle cose che potresti aver provato a fare. Ma a differenza del menu principale, l'intestazione non ha una pagina separata all'interno di WordPress che ti aiuta ad aggiungere cose manualmente, senza dover aggiungere righe di codice PHP al file header.php del tuo sito web.

Tuttavia, aggiungere una possibilità di ricerca nel menu secondario può essere una cosa interessante. Diamo un'occhiata ad alcuni motivi per cui vorresti aggiungerne uno.

Offri ai tuoi visitatori una possibilità di ricerca dall'inizio

Hai tutti i tipi di visitatori sul tuo sito web. Alcuni di loro stanno cercando di esplorare le cose e prendersi il loro tempo, mentre altri vogliono trovare subito informazioni specifiche. Aggiungendo il tuo campo di ricerca al menu secondario, avrai la garanzia che i visitatori che stanno cercando qualcosa di specifico, abbiano la possibilità di farlo subito. Poiché un menu secondario si trova nella parte superiore della pagina, i visitatori che hanno fretta apprezzeranno lo sforzo che migliora la loro esperienza utente.

Per salvare il menu principale dal campo di ricerca

Ovviamente, un'altra cosa che potresti fare è aggiungere il campo di ricerca al menu principale. Ma in alcuni casi, potresti non volerlo fare. Per esempio; se vuoi mantenere il focus sulle voci di menu o se non vuoi mischiare le voci di menu con il campo di ricerca. Un altro motivo potrebbe essere che hai già alcune voci di menu che fanno sembrare occupato il tuo menu principale e non vuoi aggiungere un campo di ricerca in cima a quello.

Enfatizza il campo di ricerca senza avere un menu principale appariscente

La maggior parte delle persone tende a mantenere sobrio il menu principale e a far apparire il menu secondario. In primo luogo, perché vogliono mostrare l'ovvia differenza tra i due menu. E secondario, perché il menu secondario ha spesso alcune cose che vogliono enfatizzare (come le icone dei social media). Quando decidi di integrare il campo di ricerca anche nel tuo menu secondario, verrà automaticamente evidenziato anch'esso e stimolerà i tuoi visitatori a cercare e trovare esattamente quello che stanno cercando.

Come aggiungere un campo di ricerca al menu secondario di Divi

Iscriviti al nostro canale Youtube

Aggiungi campo di ricerca al file PHP di intestazione

Ora, per aggiungere effettivamente il campo di ricerca alla tua intestazione come mostrato nell'immagine qui sotto, dovrai principalmente aggiungere qualcosa al file header.php del tuo sito web. La riga di codice di cui avrai bisogno è la seguente:

<?php get_search_form(); ?>

Vai avanti e copia questa riga di codice PHP e vai alla dashboard di WordPress. All'interno della dashboard di WordPress, vai su Aspetto > Editor > header.php.

Ora puoi posizionare la riga del codice dove vuoi che appaia la barra di ricerca. Poiché vogliamo che appaia proprio accanto alle icone dei social media, ti mostreremo dove posizionarlo esattamente nel codice. Dovremo posizionarlo subito prima della chiusura del menu secondario, del contenitore e dell'intestazione superiore.

Dai uno stile al tuo campo di ricerca

Per impostazione predefinita, il campo di ricerca sembra un po' datato. Probabilmente vorrai cambiare alcune cose solo per farlo apparire come desideri e per adattarlo all'aspetto del resto del tuo sito web. Queste sono tre cose che probabilmente vorrai cambiare: l'etichetta di ricerca, l'input di ricerca e l'input del pulsante.

Se non apporti alcuna modifica CSS al campo di ricerca, per impostazione predefinita sarà simile a questo nel menu secondario:

Che ovviamente non è il risultato finale che vogliamo ottenere. Fortunatamente, possiamo apportare tutte le modifiche al campo che vogliamo. Nella parte successiva di questo post, ti mostreremo come modificare tutti gli elementi del campo di ricerca e condivideremo anche le righe di codice CSS per ottenere il seguente risultato:

Rimuovi/modifica etichetta di ricerca

Il primo elemento che fa parte del campo di ricerca è l'etichetta di ricerca. Questo è il testo che appare che spiega alle persone che possono cercare qualsiasi cosa sul sito web utilizzando il campo. Tuttavia, questa etichetta non è necessaria. Oggigiorno tutti sanno come funziona un campo di ricerca. Puoi sempre far scomparire l'etichetta di ricerca aggiungendo 'display:none;' al CSS di tale etichetta. In alternativa, è possibile modificare l'aspetto dell'etichetta.

La classe di cui avrai bisogno per apportare modifiche all'etichetta di ricerca è ".screen-reader-text". Come mostrato nell'esempio seguente, puoi disabilitarne la visualizzazione.

.screen-reader-text {
display: none;
}

Dai uno stile al tuo input di ricerca

La prossima cosa che potresti voler modellare è l'input di ricerca. Per apportare modifiche a questo input, posiziona tutte le righe di codice CSS tra le seguenti parentesi:

 input#s
{

}

Dai uno stile all'input del pulsante

E infine, abbiamo anche lo stile del pulsante. Per apportare modifiche a questa parte del campo di ricerca, inserisci le righe del codice CSS tra le seguenti parentesi:

input#searchsubmit
{
}

Codice CSS necessario per il nostro esempio

Dopo aver apportato la modifica PHP, puoi ottenere immediatamente il risultato mostrato sopra andando sul dashboard di WordPress > Divi > Opzioni del tema > Generale > E aggiungendo le seguenti righe di codice CSS al campo Personalizzato:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Risultato

Ora che abbiamo eseguito tutti i passaggi, diamo un'altra occhiata a come dovrebbe apparire l'intestazione:

Pensieri finali

In questo tutorial, ti abbiamo mostrato come aggiungere un campo di ricerca al tuo menu secondario. Oltre a ciò, ti abbiamo anche mostrato come modificare gli elementi all'interno di quel campo di ricerca e ti abbiamo presentato un esempio di righe di codice CSS che puoi semplicemente copiare e incollare per uso personale. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in evidenza di D Line / shutterstock.com