...
✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Come creare un modulo di ricerca personalizzato in WordPress

44

Stai cercando di creare un modulo di ricerca personalizzato su un sito Web WordPress? Eravamo soliti creare temi da zero in modo da poter aggiungere il nostro stile alle sezioni del sito web. Potresti aver creato un design di un modulo di ricerca dall’aspetto gradevole e ora desideri inserirlo in WordPress.

WordPress fornisce un metodo get_search_form()che rende il modulo di ricerca. Se utilizzi questo metodo nel tuo tema personalizzato, otterrai un modulo di ricerca predefinito creato nel core di WordPress. E non vuoi il modulo di ricerca predefinito poiché il design del tuo modulo è diverso. Per superare questa situazione, è necessario creare un modulo di ricerca personalizzato che sovrascrive quello predefinito.

Creando un modulo di ricerca personalizzato puoi aggiungere il tuo markup e il tuo stile. In questo articolo, ti mostro come creare un modulo di ricerca personalizzato in WordPress.

Il metodo get_search_form()cerca il searchform.phpfile nella directory del tema attivo. Se questo file non esiste, WordPress utilizza il modulo di ricerca predefinito che è incluso nel suo nucleo.

Crea un modulo di ricerca personalizzato

Crea un searchform.phpfile nella directory del tuo tema attivo. In questo file aggiungi il markup del modulo di ricerca. Ad esempio, nel mio caso il modulo di ricerca è il seguente.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="submit" value="Search">
</form>

Non c’è niente di elaborato o complesso nel codice sopra. Ho appena dato l’id ‘searchform’ al tag del modulo e la classe ‘search-field’ al campo di testo di ricerca. Usando questo ID e classe posso aggiungere uno stile al modulo di ricerca. Come questo nel tuo caso, devi usare il tuo markup.

Visualizza modulo di ricerca

Il prossimo passo è visualizzare il modulo di ricerca sul sito web. Potresti voler posizionare il modulo di ricerca nella barra laterale, nell’intestazione, accanto al menu, ecc.

Utilizzando la funzione è get_search_form()possibile visualizzare il proprio modulo di ricerca in qualsiasi punto del sito. Tutto quello che devi fare è chiamare questo metodo dal punto in cui vuoi visualizzare il modulo di ricerca.

<?php get_search_form(); ?>

Dopo aver inserito il codice sopra nella posizione desiderata, vai al browser. Ora dovresti vedere il tuo modulo di ricerca sul sito web.

Personalizza il risultato della ricerca

Potrebbe essere il caso, il tuo sito web ha più risorse come libri, riviste, ebook, PDF, ecc. e devi mostrare il contenuto di tutte queste risorse nei risultati di ricerca. Può essere fatto facilmente.

Supponendo che tu abbia tipi di post personalizzati per tutte queste risorse, devi aggiungere un campo nascosto per ogni tipo di post nel modulo di ricerca.

Supponiamo che tu abbia creato tipi di post personalizzati libro, rivista, ebook, pdf per le risorse di cui sopra. Quindi, i tuoi campi nascosti saranno i seguenti.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Ora, quando qualcuno inserisce una parola chiave nel modulo di ricerca, WordPress cerca quella parola chiave in tutti i tipi di post sopra per abbinare il risultato.

Spero che tu capisca come creare un modulo di ricerca personalizzato in WordPress. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

articoli Correlati

Fonte di registrazione: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More