Come aggiungere una barra di ricerca nel menu di WordPress

Pubblicato: 2023-08-17

La ricerca di contenuti sul tuo sito web non dovrebbe essere una caccia al tesoro. Immagina una barra di ricerca che mostri esattamente ciò che i lettori stanno cercando senza fare clic e scorrere infiniti.

Pensa al tuo sito come a un enorme hub di informazioni e i visitatori hanno bisogno di un modo rapido per trovare ciò che stanno cercando. È qui che entra in gioco una barra di ricerca . Puoi scegliere tra le opzioni integrate o personalizzare le tue utilizzando i plug-in.

Aggiungere una barra di ricerca in WordPress è facile; Ti mostrerò passo dopo passo. Unisciti a noi per migliorare l'usabilità del sito Web e garantire che i visitatori trovino ciò di cui hanno bisogno.

Pronto a rendere il tuo sito più user-friendly? Ti mostriamo come aggiungere una barra di ricerca nel menu di WordPress .

Nascondi i contenuti
1 Come aggiungere una barra di ricerca in WordPress
1.1 Aggiungi la barra di ricerca al menu di WordPress senza plug-in
1.1.1 Passaggio 1: ottieni un tema con un generatore di intestazioni
1.1.2 Passaggio 2: vai a Personalizzatore di temi
1.1.3 Passaggio 3: aggiungi la ricerca al menu di WordPress
1.1.4 Personalizzazione dell'elemento di ricerca
1.2 Aggiungere la barra di ricerca con un plug-in della barra di ricerca di WordPress
1.2.1 Passaggio 1: installa e attiva PostX
1.2.2 Passaggio 2: abilita il componente aggiuntivo del modello salvato
1.2.3 Passaggio 3: aggiungere un blocco di ricerca a un modello salvato
1.2.4 Passaggio 4: copia lo shortcode
1.2.5 Passaggio 5: aggiungi la barra di ricerca al menu di WordPress
1.2.6 Passaggio 6: personalizzazioni dopo la pubblicazione
2 risorse che adorerai
3 Conclusione

Come aggiungere una barra di ricerca su WordPress

WordPress offre widget di ricerca nativi e i plug-in possono migliorare ulteriormente questa funzionalità. Ti ho coperto con indicazioni dettagliate e immagini per entrambi i metodi.

Aggiungi la barra di ricerca al menu di WordPress senza plug-in

Se cerchi " Come aggiungere la barra di ricerca nel menu di WordPress senza plug-in " su Google, troverai molti articoli. Ma tutti pretenderanno di aggiungere una barra di ricerca nel menu. Tuttavia, troverai un tutorial o una guida per aggiungere una barra di ricerca nella barra laterale utilizzando la sezione widget predefinita di WordPress.

Ma ti copro le spalle!

Aggiungere una barra di ricerca nel menu di WordPress è facile se utilizzi un tema con un generatore di intestazioni. Per questo tutorial userò il tema “Blocksy”, uno dei miei temi preferiti. Puoi ottenerlo gratuitamente dalla sezione Temi di WordPress.

Passaggio 1: ottieni un tema con un generatore di intestazioni

Vai alla dashboard di WordPress > Temi . Quindi fare clic su " Aggiungi nuovo ".

Puoi caricare il tuo tema facendo clic sul pulsante " Carica tema ". Oppure puoi cercare la raccolta di temi gratuiti.

Activate Blocksy Theme
Attiva il tema Blocksy

Cerca " Blocksy " o qualsiasi altro tema con un'opzione di creazione di intestazioni. Quindi, installalo e attivalo. Il mio tema Blocksy è già attivato, poiché lo uso costantemente, come ho detto prima.

Passaggio 2: vai a Personalizzatore di temi

Ora fai clic su " Personalizza " nel tema attivato.

Blocksy Theme Customizer
Personalizzatore di temi Blocksy

Oppure puoi andare su WordPress Dashboard > Aspetto > Personalizza .

Ora vedrai alcune opzioni di personalizzazione. Ma devi selezionare " Intestazione " perché il menu/barra dei menu è la sezione dell'intestazione in WordPress.

Passaggio 3: aggiungi la ricerca al menu di WordPress

In questa sezione vedrai 3 righe: Top, Main e Bottom. Suggerisco di utilizzare la riga principale per allinearsi maggiormente con le categorie del menu.

Add Search to WordPress Menu
Aggiungi la ricerca al menu di WordPress

Ora trascina e rilascia l' elemento Cerca nella riga principale . E vedrai un'icona di ricerca aggiunta al menu.

Ora, fai clic su " Pubblica " per aggiungere correttamente una barra di ricerca nel menu di WordPress.

Personalizzazione dell'elemento di ricerca

Vedrai le opzioni di personalizzazione di base quando fai clic sull'elemento di ricerca aggiunto.

Search Element Customization
Personalizzazione dell'elemento di ricerca

Ciò comprende:

  • Dimensione dell'icona
  • Visibilità etichetta
  • Posizione etichetta
  • Testo dell'etichetta
  • Impostazioni di base relative al colore

Puoi personalizzarlo e premere Pubblica per farlo vivere.

Publish Search Bar Without Plugin
Pubblica la barra di ricerca senza plug-in

Ora, vediamo la vista frontend della barra di ricerca nel menu del sito web.

Add Search Bar to WordPress Menu Without Plugin
Aggiungi la barra di ricerca al menu di WordPress senza plug-in

Stupito da questo layout della home page ? Questo è stato realizzato con PostX Dynamic Site Builder. Assicurati di verificarlo!

Costruttore di siti dinamici

Aggiungi la barra di ricerca con un plug-in della barra di ricerca di WordPress

Ora, vuoi il modo più rapido per aggiungere una barra di ricerca personalizzata alla barra dei menu? Se hai PostX. Il blocco di ricerca avanzata di PostX ti consente di aggiungere una barra di ricerca completamente personalizzata nel menu di WordPress.

Segui questi semplici passaggi per aggiungerlo con PostX.

Passaggio 1: installa e attiva PostX

Per aggiungere una barra di ricerca personalizzabile nel menu di WordPress, devi installare e attivare il plugin PostX .

Installing PostX
Installare PostX

Per installare e attivare PostX, vai su Plugin > Aggiungi nuovo , cerca PostX e completa il processo di installazione.

Una volta attivato il plug-in, puoi utilizzare il modello salvato e il blocco di ricerca per aggiungere la ricerca al menu di WordPress.

Passaggio 2: abilita il componente aggiuntivo del modello salvato

Ora devi abilitare il componente aggiuntivo Modello salvato.

Saved Templates Addon Enabled
Componente aggiuntivo Modelli salvati abilitato

Vai su PostX > Componenti aggiuntivi. Quindi abilita il componente aggiuntivo Modello salvato utilizzando la barra di commutazione.

PostX Saved Template crea uno shortcode per te, che puoi utilizzare per aggiungere una barra di ricerca nell'intestazione del tuo sito web.

Passaggio 3: aggiungi il blocco di ricerca a un modello salvato

Per cercare la barra nel menu, devi creare un modello salvato con PostX.

Vai su PostX > Modelli salvati e fai clic su " Aggiungi nuovo modello " per creare un nuovo modello. Non dimenticare di nominarlo se desideri personalizzarlo in seguito.

Create New PostX Saved Template
Crea nuovo modello salvato PostX

Quindi, aggiungi il blocco di ricerca PostX nella pagina.

Add Search Block in Saved Template
Aggiungi blocco di ricerca nel modello salvato

Puoi personalizzarlo nel modo che preferisci. Per evitare problemi di personalizzazione, puoi importare modelli predefiniti con 1 clic facendo clic sul pulsante " Modelli predefiniti ".

PostX Search Customization Options
Opzioni di personalizzazione della ricerca PostX

Una volta completata la personalizzazione, fai clic su " Pubblica " e il modello salvato è pronto.

Passaggio 4: copia lo shortcode

Torna alla pagina del modello salvato ( PostX > Modelli salvati ) per copiare lo shortcode.

Copy Shortcode for Search Template
Copia lo shortcode per il modello di ricerca

Troverai uno shortcode per il modello che hai appena creato. Fare clic su di esso per copiarlo e seguire i passaggi successivi.

Passaggio 5: aggiungi la barra di ricerca al menu di WordPress

Ora vai su WordPress Dashboard > Aspetto > Personalizza . Proprio come ti abbiamo mostrato durante l'aggiunta della barra di ricerca predefinita.

Blocksy Theme Customizer
Personalizzatore di temi Blocksy

Ora, trascina e rilascia l' elemento HTML nella riga principale. E fai clic su di esso dopo averlo aggiunto.

Add HTML Element in Main Row
Aggiungi elemento HTML nella riga principale

Vedrai un campo di testo nella sezione di modifica HTML . Devi solo incollare lo shortcode copiato nella casella di testo . E vedrai una barra di ricerca nella sezione del menu di WordPress, proprio quella che hai creato nel modello salvato.

Paste Copied Shortcode for Search Template
Incolla lo shortcode copiato per il modello di ricerca

Ora, premi pubblica per farlo vivere.

Vediamo la vista frontale dopo aver aggiunto la barra di ricerca al menu di WordPress usando PostX.

Add Search Bar With a WordPress Search Bar Plugin
Aggiungi la barra di ricerca con un plug-in della barra di ricerca di WordPress

Passaggio 6: personalizzazioni dopo la pubblicazione

C'è un fantastico segreto nel modello salvato di PostX. Si sincronizza automaticamente sulla pagina live. Supponiamo di personalizzare e aggiornare il modello salvato (costituito dal blocco di ricerca). In tal caso, le modifiche verranno sincronizzate automaticamente e non dovrai ripetere ogni passaggio ancora e ancora.

Con il blocco di ricerca avanzata PostX, otterrai le seguenti opzioni di personalizzazione:

  • Attivatore di ricerca AJAX
  • Impostazioni dello stile del modulo di ricerca
  • Abilita ricerca popup
  • Impostazioni del pulsante di ricerca
  • Impostazioni dei risultati della ricerca
  • Altre impostazioni dei risultati
  • Impostazioni di testo, tipografia e colore
  • Impostazioni Margini/Padding e Allineamento
    E altro ancora...

Pensi che sia troppo poco? Non perdere la nostra ampia documentazione del blocco del pulsante di ricerca e rimarrai stupito dai dettagli nitidi che puoi personalizzare nel blocco di ricerca.

Cerca nella documentazione del blocco

Oh, è un pulsante? Sai che PostX ha anche un Button Block personalizzato? NO? Assicurati di controllare PostX Button Group Block .

Risorse che amerai

Ecco alcuni articoli per verificare le funzionalità di PostX che sono sicuro ti saranno utili:

  • Come aggiungere caratteri personalizzati di WordPress: prendi il pieno controllo della tipografia
  • Come creare elenchi puntati WordPress con PostX Advanced List Block
  • Presentazione del componente aggiuntivo PostX ChatGPT: il generatore di contenuti AI di WordPress
  • PostX Dynamic Site Builder: crea il tuo sito in pochi clic
  • Come visualizzare i video di WordPress come immagine in primo piano con PostX

Avvolgendo

Questa guida completa ha fornito una tabella di marcia passo passo per aggiungere la barra di ricerca nel menu di WordPress con o senza plug-in. Le tue opzioni sono ampie e accessibili, dall'utilizzo di temi con i costruttori di intestazioni all'esplorazione del mondo del blocco di ricerca avanzata di PostX. Crea, personalizza e cura in qualsiasi momento senza problemi!

Puoi dare un'occhiata ai tutorial video di WordPress sul nostro canale YouTube. Inoltre, trovaci su Facebook e Twitter per aggiornamenti regolari!

Ti piace questo articolo? Diffondere la parola
  • WooCommerce Related Products

    3 tipi di prodotti correlati a WooCommerce

  • How to Display Custom Taxonomy in Gutenberg Editor Perfectly 1

    Come visualizzare perfettamente la tassonomia personalizzata nell'editor Gutenberg

  • Introducing Taxonomy Blocks for Creating Custom Taxonomy List and Grid for Gutenberg 2

    Presentazione dei blocchi di tassonomia per la creazione di elenchi e griglie di tassonomia personalizzati per Gutenberg

  • How to Display and Customize WooCommerce On Sale Products

    Come visualizzare e personalizzare i prodotti WooCommerce in saldo