Come aggiungere una barra di ricerca di WordPress con shortcode (passo dopo passo)

Pubblicato: 2022-02-18

Ti piacerebbe sapere come aggiungere una barra di ricerca di WordPress con shortcode?

In genere, una barra di ricerca su un sito WordPress si trova nel menu di navigazione del sito o nella barra laterale. L'uso degli shortcode ti consente di posizionare una barra di ricerca direttamente all'interno di un post o di una pagina.

In questo articolo, ti mostreremo 2 metodi su come aggiungere una barra di ricerca utilizzando uno shortcode al tuo sito WordPress.

Perché aggiungere una barra di ricerca con shortcode

Di solito, non ci sono molti posti in cui puoi aggiungere una barra di ricerca.

La maggior parte dei temi di WordPress ti consente di inserire una barra di ricerca come widget in una delle aree dei widget. Puoi anche visualizzare la barra di ricerca accanto al menu di navigazione.

Ma cosa succede se si desidera creare una pagina che contiene una barra di ricerca?

Oppure inserisci una barra di ricerca all'interno dell'articolo, in modo che i tuoi lettori non debbano interrompere la lettura se vogliono cercare qualcosa?

a search bar within the post's body

È allora che gli shortcode tornano utili. Utilizzando gli shortcode, sei libero di aggiungere una barra di ricerca in qualsiasi punto all'interno di un post o di una pagina.

Ciò è utile se il tuo tema non supporta l'aggiunta di una casella di ricerca e non desideri modificare il codice per aggiungerla.

Ora, diamo un'occhiata a come puoi aggiungere una barra di ricerca al tuo sito utilizzando uno shortcode.

Come aggiungere una barra di ricerca di WordPress con Shortcode

Esistono 2 metodi per aggiungere una barra di ricerca di WordPress con uno shortcode. Diamo un'occhiata a ciascuno di essi in ordine.

Metodo 1: utilizzo di SearchWP

Il modo più semplice per aggiungere una barra di ricerca di WordPress con uno shortcode è utilizzare un plug-in come SearchWP.

SearchWP logo

Search WP è il plugin di ricerca di WordPress più potente e completo. Più di 30.000 proprietari di siti web lo utilizzano già per fornire ai propri visitatori risultati di ricerca più accurati.

Questo plugin non solo ti consente di aggiungere una casella di ricerca con uno shortcode, ma ti aiuta anche ad ottenere il pieno controllo sul motore di ricerca di WordPress.

Ad esempio, utilizzando SearchWP, puoi personalizzare l'ordine dei risultati di ricerca, eseguire la ricerca di WordPress in base al contenuto del documento e molto altro.

Questo plugin si integra automaticamente con ogni barra di ricerca che hai sul tuo sito. In questo modo puoi migliorare la ricerca del tuo sito immediatamente dopo l'installazione, senza bisogno di codifica.

Ecco solo alcune altre cose utili che puoi fare con SearchWP:

  • Indicizzazione dei campi personalizzati : molti plugin di WordPress utilizzano campi personalizzati per archiviare i tuoi dati. Ma il motore di ricerca nativo di WordPress non li considera durante la ricerca. SearchWP ti consente di rendere ricercabili i campi personalizzati del tuo sito.
  • Monitoraggio della ricerca : ti sei mai chiesto quali ricerche fanno i visitatori sul tuo sito? SearchWP ti offre informazioni dettagliate sull'attività di ricerca sul tuo sito in pochi clic, così puoi ottenere nuove idee per i contenuti e soddisfare le esigenze del tuo pubblico.
  • Perfetta integrazione con WooCommerce : per impostazione predefinita, la ricerca di WordPress ignora i dettagli del prodotto WooCommerce, quindi è più difficile per i tuoi clienti trovare il prodotto che stanno cercando. Utilizzando SearchWP, puoi rendere ricercabile qualsiasi campo personalizzato di WooCommerce, inclusi attributi, tag e recensioni del prodotto.

Vediamo come puoi utilizzare SearchWP per aggiungere una barra di ricerca con uno shortcode in pochi minuti.

Passaggio 1: installa e attiva il plug-in SearchWP

Il primo passo è prendere la tua copia di SearchWP qui.

Una volta terminato, vai al tuo account SearchWP e passa alla scheda Download .

go to the downloads tab

Quindi, premi il pulsante Scarica SearchWP e salva il file ZIP del plug-in sul tuo computer.

download SearchWP

Al termine del download, copia la tua chiave di licenza, poiché ti servirà in seguito per attivare il plug-in.

copy your license key

Dopo aver scaricato SearchWP e copiato la chiave di licenza, carica il file ZIP del plug-in sul tuo sito WordPress.

Se hai bisogno di aiuto su come farlo, dai un'occhiata a questa guida passo passo su come installare un plugin per WordPress.

Dopo aver installato e attivato SearchWP, il passaggio successivo consiste nell'inserire la chiave di licenza.

Per fare ciò, vai alle impostazioni di SearchWP facendo clic sul pulsante SearchWP che appare nella barra in alto della dashboard di WordPress.

go to the SearchWP settings

Quindi, vai alla scheda Licenza .

go to the license tab

Incolla la chiave di licenza del plug-in che hai copiato in precedenza nel campo della licenza e fai clic su Attiva .

activate your license

Dopo aver attivato la tua copia di SearchWP, sei pronto per procedere al passaggio successivo.

Passaggio 2: installa e attiva l'estensione Shortcodes

Successivamente, dobbiamo scaricare l'estensione Shortcodes SearchWP. Questa estensione ti consente di aggiungere una barra di ricerca con uno shortcode in qualsiasi punto di un post o di una pagina.

Puoi prenderlo nella pagina di download dell'estensione Shortcodes.

Dopo aver navigato nella pagina, premi il pulsante Scarica estensione .

the shortcodes extension

Quindi, installa e attiva l'estensione allo stesso modo del plug-in SearchWP.

Passaggio 3: crea una pagina per la nuova barra di ricerca

Ora dobbiamo creare una nuova pagina in cui posizioneremo la casella di ricerca.

Per farlo, per prima cosa, vai su Pagine »Aggiungi nuovo nella dashboard di WordPress.

add a new page

Una volta che sei nell'editor di pagina, aggiungi un titolo alla tua pagina e fai clic sul pulsante Più .

add a title and press plus

Cerca il blocco HTML personalizzato e quindi fai clic su di esso per aggiungerlo alla pagina.

choose the custom html block

Quindi, copia il codice seguente e incollalo nel blocco HTML personalizzato :

[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

Il codice sopra mostra la casella di ricerca nella pagina in cui hai aggiunto la casella HTML personalizzato .

Visualizza anche il messaggio "Nessun risultato di ricerca trovato" se non ci sono risultati di ricerca. Inoltre, può anche mostrare collegamenti di impaginazione se sono presenti più di 4 risultati di ricerca.

Dopo aver aggiunto il codice, fai clic sul pulsante Pubblica in alto a destra per pubblicare la tua pagina.

publish the page

Ora andiamo alla nostra nuova pagina e testiamo la barra di ricerca che abbiamo appena aggiunto.

Passaggio 4: prova la tua nuova barra di ricerca

Per passare alla pagina appena creata, fai clic sul pulsante Visualizza pagina .

view the page

Come puoi vedere, la barra di ricerca che abbiamo aggiunto con lo shortcode è ora visualizzata correttamente sulla pagina.

the search box appears

Ora che conosci il modo più semplice per aggiungere una barra di ricerca di WordPress alla tua pagina, parliamo del secondo metodo per farlo di seguito.

Metodo 2: modifica del file Functions.php

Questo è un metodo piuttosto complesso. Richiede una conoscenza avanzata di WordPress e comporta la modifica del codice del tema.

Nota che se commetti errori durante la modifica del codice, puoi rovinare il tuo sito.

Quindi, se non sei un utente esperto di tecnologia o non hai mai avuto esperienza nella modifica dei file dei temi WordPress, ti suggeriamo di attenersi al primo metodo. Puoi prendere la tua copia di SearchWP qui.

Con SearchWP, puoi aggiungere in sicurezza una barra di ricerca con uno shortcode in pochi clic. Non è necessaria alcuna codifica.

Passaggio 1: crea un tema figlio

Il primo passaggio consiste nel creare un tema figlio del tema che stai attualmente utilizzando sul tuo sito.

Hai bisogno di un aggiornamento su come farlo? Sentiti libero di dare un'occhiata a questa guida su come creare un tema figlio di WordPress.

Un tema figlio eredita l'aspetto, i file, il codice e le funzionalità del tema principale.

È fondamentale crearlo se hai intenzione di apportare modifiche al codice del tema di WordPress per un paio di motivi.

Innanzitutto, puoi personalizzare un tema figlio senza modificare il tema principale. Garantisce che il tuo sito continui a essere visualizzato correttamente anche se commetti un errore durante la modifica del codice.

Inoltre, tutte le modifiche apportate al tema principale scompariranno non appena lo aggiorni. Apportare modifiche al tema figlio consente di aggiornare il tema principale senza il rischio di perdere le modifiche.

Dopo aver creato un tema figlio, procediamo al passaggio successivo.

Passaggio 2: modifica il file Functions.php

Dopo aver creato e attivato un tema figlio, vai su Aspetto »Editor dei file dei temi nella dashboard di WordPress.

edit theme files

Quindi, trova il file functions.php nel pannello di destra e fai clic su di esso.

open functions php file

Aggiungi il seguente codice alla fine del file functions.php :

add_shortcode('wpbsearch', 'get_search_form');

Ecco come appare sul nostro sito demo durante la modifica del file functions.php del tema figlio GeneratePress:

add the code

Una volta terminato, premi il pulsante Aggiorna file .

update the functions php file

Ora dobbiamo creare una nuova pagina in cui visualizzeremo una barra di ricerca utilizzando uno shortcode.

Passaggio 3: crea una nuova pagina della barra di ricerca

Per creare una nuova pagina, vai a Pagine »Aggiungi nuovo nella dashboard di WordPress.

add a new page

Quindi, incolla semplicemente il seguente shortcode nella pagina:

[wpbsearch]

Ecco come dovrebbe apparire:

paste a shortcode

Al termine, fai clic su Pubblica in alto a destra.

publish the page with a shortcode

Ora vogliamo verificare se viene visualizzata una barra di ricerca.

Passaggio 4: prova la tua nuova barra di ricerca

Per visualizzare la pagina che hai appena pubblicato, fai clic su Visualizza pagina .

view the page with a shortcode

Come puoi vedere, siamo stati in grado di aggiungere una barra di ricerca utilizzando uno shortcode con successo.

search bar appears with the 2nd method

In questo articolo, hai imparato 2 metodi su come aggiungere una barra di ricerca di WordPress con uno shortcode.

Se non sei un utente esperto di tecnologia e desideri aggiungere una barra di ricerca con uno shortcode in pochi clic, puoi scegliere il primo metodo. Puoi prendere la tua copia di SearchWP qui.

Ti piacerebbe avere un impatto sui risultati di ricerca di WordPress? Dai un'occhiata a questo tutorial passo dopo passo su come dare la priorità a risultati di ricerca specifici in WordPress.

Vuoi che WordPress consideri il contenuto dei file PDF durante le ricerche? Quindi troverai utile questa guida per indicizzare e cercare i file PDF di WordPress.