3 modi per creare un ottimo modulo di ricerca WordPress personalizzato
Pubblicato: 2022-11-23WordPress è il sistema di gestione dei contenuti (CMS) più popolare al mondo. Oltre ad essere uno strumento potente e super flessibile, è anche estremamente facile da usare. Le persone senza esperienza nel web design o nella codifica possono utilizzare WordPress per avviare il proprio sito Web in pochi minuti.
Gli utenti visiteranno il tuo sito WordPress per cercare i contenuti a cui sono interessati. Una barra di ricerca può aiutarli a farlo. Se il tuo sito non ne ha uno, sarà difficile per le persone trovare il contenuto che stanno cercando. Questa frustrazione fa sì che le persone lascino il tuo sito web e vadano altrove.
Non va bene!
In questo articolo, ti mostreremo come integrare un modulo di ricerca WordPress personalizzato nel tuo sito web.
- Che cos'è un modulo di ricerca WordPress personalizzato?
- #1 Applica un plugin
- # 2 Modifica codice
- #3 Usa CSS personalizzati per dare uno stile al modulo di ricerca e alla pagina dei risultati
Che cos'è un modulo di ricerca WordPress personalizzato?
WordPress ha già una funzione di ricerca nativa integrata. Tuttavia, lo strumento di ricerca predefinito è piuttosto limitato e non è molto "intelligente". Non trova sempre il contenuto che vuoi cercare.
La funzione di ricerca predefinita di WordPress è sufficiente per pagine Web nuove o su piccola scala che non hanno molti contenuti.
Ma man mano che il tuo database di contenuti cresce, l'installazione di uno strumento di ricerca migliore è importante per aiutare i visitatori a navigare nel tuo sito web. Se gestisci un sito di e-commerce, un buon strumento di ricerca è ancora più importante. Aiuta a indirizzare i potenziali clienti verso i prodotti giusti per loro.
Potresti anche volere che il tuo strumento di ricerca visualizzi i risultati in un certo ordine. Ad esempio, prima gli articoli o gli articoli più popolari. Lo strumento di ricerca predefinito non ti consente di farlo. Invece, dovrai modificare manualmente l'algoritmo di ricerca.
Ultimo ma non meno importante, uno strumento di ricerca personalizzato può essere stilizzato per riflettere l'estetica o il marchio del tuo sito web!
Che cos'è la funzione get_search_form?
get_search_form si riferisce a una funzione che visualizza il modulo di ricerca sul tuo sito web. Puoi trovarlo nella scheda Aspetto > Widget nel pannello di amministrazione di WordPress.
Regola il widget del modulo di ricerca e qualsiasi altra pagina del tuo sito Web che necessita di una funzione di ricerca. Senza questa funzione, il tuo sito web è buono quanto manca del tutto uno strumento di ricerca.
Come personalizzare il modulo di ricerca in WordPress
Esistono molti approcci diversi che puoi utilizzare per personalizzare il modulo di ricerca in WordPress. Dipende dal tuo livello di abilità di codifica e da quanto tempo sei disposto a dedicare a questa attività.
#1 Applica un plugin
Un plug-in è il modo più semplice e veloce per ottenere un modulo di ricerca WordPress personalizzato attivo e funzionante sul tuo sito web. Ivory Search, ad esempio, è un plug-in gratuito creato appositamente per migliorare la funzione dello strumento di ricerca di WordPress. Puoi aggiungere e modificare nuovi moduli di ricerca ed eseguire diversi tipi di ricerche.
Inoltre, con gli shortcode, puoi posizionare la barra di ricerca ovunque tu voglia sul sito web (come nell'intestazione, nel piè di pagina, nella barra dei menu, ecc.).
È uno strumento semplice che consigliamo vivamente se non hai molta esperienza di programmazione. Sebbene non sia versatile come codificare uno strumento di ricerca, dovrebbe essere sufficiente per l'utilizzo di base.
# 2 Modifica codice
Esistono due modi per creare un modulo di ricerca da zero direttamente all'interno dei file core .php del tuo sito WordPress: con una funzione o con un modello.
Con una funzione
Puoi sostituire lo strumento di ricerca predefinito di WordPress con uno personalizzato utilizzando l'hook add_filter . Nel tuo file functions.php , aggiungi il seguente codice allo stack:
function custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Ricerca:' ) . '</etichetta>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'Cerca' ) .'" />
</div>
</form>';
return $modulo;
}
add_filter( 'get_search_form', 'custom_search_form', 40 );Ciò che fa questo codice è memorizzare il tuo modulo personalizzato all'interno della variabile $form , che sostituirà lo strumento di ricerca predefinito di WordPress grazie all'hook add_filter .
Puoi personalizzare ulteriormente il codice sopra modificando le etichette, i testi, gli ID e altri elementi nel valore della variabile $form .
Con un modello
Se non sei in grado di modificare il file functions.php , un'alternativa è utilizzare un modello per il modulo di ricerca. Crea un modulo di ricerca WordPress personalizzato, quindi aggiungilo come searchform.php nella tua directory principale. WordPress utilizzerà automaticamente il modulo di ricerca personalizzato anziché quello predefinito.
Per fare ciò, apri il tuo IDE preferito e crea un nuovo file. Chiamalo "searchform.php" . Incolla il seguente codice nell'editor:
<?php /* Modulo di ricerca personalizzato */ ?> <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3"> <div class="input-group"> <input type="search" class="form-control border-0" placeholder="Cerca" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >"> <div class="input-group-append"> <span class="input-group-append p-0"> <i class="fas fa-search text-muted"></i> </span> </div> </div> </form>
Modifica il codice qui sopra secondo le tue preferenze!
#3 Usa CSS personalizzati per dare uno stile al modulo di ricerca e alla pagina dei risultati
Ora che hai attivato e funzionante la tua funzione di ricerca personalizzata, la parte successiva è modellarla. L'aspetto predefinito è piuttosto noioso con le caselle di testo bianche nei normali caratteri Sans Serif.
Se vuoi cambiarlo, la soluzione migliore è attraverso alcune righe di codice CSS.
Questo modello di codice CSS è compatibile con la stragrande maggioranza dei temi WordPress. Basta copiarlo e incollarlo tramite il pannello di amministrazione di WordPress.
.searchform {
famiglia di caratteri:arial;
dimensione carattere: 16px;
sfondo:#ace5e3;
colore:#ffffff;
bordo:1px solido #61c3c0;
imbottitura: 10px;
altezza: 90px;
larghezza: 600px;
}
.risultati di ricerca {
famiglia di caratteri:arial;
dimensione carattere: 16px;
sfondo:#ace5e3;
colore:#000000;
bordo:1px solido #61c3c0;
imbottitura: 10px;
larghezza: 600px;
}Modifica le variabili all'interno del codice a tuo piacimento. Puoi scegliere il carattere, la dimensione del carattere, il colore di sfondo, il bordo e così via. Se c'è qualche elemento nel codice che non vuoi cambiare, cancella semplicemente quella riga.
Ad esempio, se non desideri modificare la famiglia di caratteri del modulo di ricerca, elimina semplicemente "font-family:arial;" linea.
Crea oggi stesso il tuo modulo di ricerca WordPress personalizzato!
La maggior parte delle persone può cavarsela con un semplice modulo di ricerca generato da un plugin. Ma se sei un po' più abile nella codifica e desideri integrare funzionalità avanzate nel modulo di ricerca del tuo sito, i modelli di codice sopra riportati possono rivelarsi utili.
Un modulo di ricerca WordPress personalizzato è una funzionalità piuttosto semplice, ma super efficace nel rendere il tuo sito web più user-friendly. Una funzione di ricerca di moduli per campo personalizzato di WordPress può aiutarti ad attirare più visitatori, convertirli in clienti abituali e, se gestisci un sito di e-commerce, in clienti a pagamento.
Puoi saperne di più sull'aggiunta della ricerca intelligente dei prodotti WooCommerce qui.
Ci auguriamo che questa guida sia stata utile e che tu abbia già installato e funzionante il tuo modulo di ricerca personalizzato prima di leggerlo!