Cum se creează un formular de căutare WordPress personalizat (pas cu pas)

Publicat: 2021-11-04

Trebuie să creați un formular de căutare personalizat pentru site-ul dvs. WordPress?

Căutarea este modul în care majoritatea utilizatorilor vor găsi conținut pe site-ul dvs. Dacă nu găsesc cu ușurință ceea ce caută, atunci se pot muta pe un alt site web.

În acest articol, vă vom arăta cum să vă îmbunătățiți căutarea pe site prin crearea unui formular de căutare WordPress personalizat, pas cu pas.

Cum se creează un formular de căutare WordPress personalizat (pas cu pas)

De ce să creați un formular de căutare personalizat pentru WordPress?

Funcția implicită de căutare WordPress este destul de limitată și nu găsește întotdeauna conținutul cel mai relevant.

Pe măsură ce adăugați mai mult conținut pe site-ul dvs., veți avea nevoie de modalități mai bune de a ajuta vizitatorii site-ului dvs. să găsească cu ușurință conținutul de pe site.

Acest lucru devine și mai important dacă gestionați un magazin online sau un site de membru unde doriți ca utilizatorii să găsească produsul sau cursul potrivit.

De asemenea, este posibil să doriți să personalizați algoritmul de căutare pentru a afișa un anumit conținut mai mare decât alții sau să personalizați aspectul formularului dvs. de căutare.

Acestea fiind spuse, haideți să aruncăm o privire la cum să personalizați formularul de căutare WordPress și pagina cu rezultate. Vom acoperi două metode pe care le puteți alege folosind link-urile de mai jos:

Cum să personalizați formularul de căutare și rezultatele WordPress

SearchWP este cel mai bun plugin de căutare personalizat pentru WordPress. Este ușor de utilizat, vă oferă control complet asupra rezultatelor căutării și este mai precis decât căutarea implicită din WordPress.

Primul pas este să instalați pluginul SearchWP. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să vizitați pagina Setări » SearchWP și apoi să faceți clic pe opțiunea de meniu „Licență”.

Introduceți cheia de licență SearchWP

Apoi, introduceți cheia de licență în caseta „Licență” și faceți clic pe butonul „Activare”. Puteți găsi aceste informații în contul dvs. pe site-ul web SearchWP.

Personalizarea motorului de căutare

Odată ce ați făcut asta, trebuie să faceți clic pe opțiunea de meniu „Motoare”. Odată ajuns acolo, ar trebui să faceți clic pe butonul „Adăugați nou” pentru a crea un nou motor de căutare.

SearchWP Adăugați un motor nou

Aceasta va crea un nou motor de căutare numit „suplimentar”. Pentru a schimba numele, trebuie să faceți clic pe butonul „Surse și setări”.

SearchWP Motor de căutare suplimentar

Aceasta vă duce la o pagină care vă permite, de asemenea, să alegeți dacă doriți să căutați postări, pagini, fișiere media, comentarii și utilizatori. Vom lăsa setările implicite așa cum sunt.

Vom schimba numele motorului de căutare în „Personalizat”. Continuați și introduceți-o în câmpul „Etichetă motor”.

Eticheta motorului de căutare WP

Observați că a fost selectată opțiunea „Răspunsuri de cuvinte cheie”. Acest lucru va ignora terminațiile cuvintelor atunci când utilizatorii dvs. efectuează o căutare, astfel încât să fie afișate cele mai relevante rezultate ale căutării.

Asigurați-vă că faceți clic pe butonul „Terminat” când ați terminat.

Pagina de setări pentru motorul de căutare conține secțiuni pentru Postări, Pagini, Media și Utilizatori. În fiecare secțiune, puteți acorda prioritate diferitelor atribute ale postării sau puteți include numai anumite categorii sau etichete în rezultatele căutării.

Puteți face acest lucru ajustând glisoarele „Relevanța atributului”.

Acestea schimbă modul în care motoarele de căutare evaluează și clasifică conținutul. De exemplu, dacă doriți să apreciați titlul postării mai mult decât conținutul, atunci puteți ajusta glisorul în consecință.

Ar trebui să parcurgeți fiecare secțiune și să faceți orice ajustări la glisoarele care vă plac.

Sliderele de relevanță a atributului SearchWP

De asemenea, puteți crea reguli pentru fiecare secțiune care determină dacă un anumit conținut este inclus sau exclus din rezultatele căutării.

De exemplu, le-ați putea permite vizitatorilor să caute cu ușurință conținut despre același subiect despre care tocmai citeau. Sau într-un magazin online, puteți ajuta clienții să găsească rapid alte produse din aceeași categorie.

Continuați și faceți clic pe butonul „Editați reguli” din secțiunea Postări.

Veți observa că puteți crea reguli despre categoriile, etichetele și formatul postării, data publicării și ID-ul postării.

CăutareWP Editare reguli

Poate doriți să lăsați vizitatorii să caute anumite categorii de site-uri web. De exemplu, puteți adăuga o funcție de căutare pe categorii în paginile dvs. de arhivă pentru a ajuta vizitatorii să găsească rapid ceea ce caută.

Pentru a afla cum să faceți acest lucru, consultați Metoda 1 din ghidul nostru pas cu pas despre cum să căutați după categorie în WordPress.

După ce ați terminat de personalizat setările implicite ale motorului de căutare, asigurați-vă că faceți clic pe butonul „Salvați motoarele” din partea de sus a paginii pentru a vă crea motorul de căutare personalizat.

Faceți clic pe butonul Salvare motoare

Adăugarea formularului de căutare cu Shortcode

Extensia SearchWP Shortcodes simplifică sarcina de a adăuga noul formular personalizat de căutare a postărilor pe site-ul dvs. WordPress.

Pur și simplu vizitați site-ul web SearchWP Shortcodes Extension și apoi faceți clic pe butonul „Descărcați disponibil cu licență activă”.

Descărcați extensia SearchWP Shortcodes

După aceea, trebuie să instalați și să activați extensia în același mod în care ați instalat pluginul de mai sus.

Acum puteți adăuga un formular de căutare personalizat la postările, paginile și widget-urile dvs. folosind coduri scurte. Dacă nu ați mai folosit coduri scurte înainte, atunci puteți afla mai multe în ghidul nostru pentru începători despre cum să adăugați un cod scurt în WordPress.

Pur și simplu editați o postare și plasați cursorul acolo unde doriți să adăugați formularul de căutare. După aceea, faceți clic pe pictograma plus „ + " Adăugați bloc pentru a afișa meniul blocuri.

Adăugați un bloc HTML personalizat

Apoi, tastați „html” în caseta de căutare și apoi faceți clic pe blocul „HTML personalizat” pentru a-l adăuga la postare.

Odată ce ați adăugat noul bloc, ar trebui să lipiți următoarele coduri scurte și HTML în el.


[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" 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="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Acest cod va adăuga formularul de căutare personalizat la postare, va crea o secțiune pentru a afișa rezultatele căutării, va afișa un mesaj fără rezultate dacă este necesar și va adăuga paginare dacă rezultatele ajung în mai multe pagini.

Dacă ați dat motorului dvs. de căutare un nume diferit, atunci va trebui să schimbați engine=“custom” cu propriul nume de motor în patru locuri.

De asemenea, puteți alege să schimbați textul de pe butonul de căutare cu ceva mai descriptiv prin editarea button_text=“Custom Search” . Restul codului poate rămâne același.

Asigurați-vă că faceți clic pe Publicare sau Actualizare pentru a vă salva postarea și a o publica.

Faceți clic pe Publicați sau Actualizați pentru a vă salva postarea

Pentru a vedea formularul de căutare în acțiune, pur și simplu vizualizați postarea pe site-ul dvs. WordPress. Așa arată pe site-ul nostru demonstrativ care rulează tema Twenty Twenty-One.

Previzualizare formular de căutare personalizată SearchWP

Adăugarea Live Ajax Search

Căutarea live Ajax vă îmbunătățește formularul de căutare, oferind automat rezultate de căutare derulante pe măsură ce utilizatorul își tastează interogarea.

Exemplu de pagină de căutare live

Cel mai simplu mod de a adăuga căutarea live Ajax la WordPress este pluginul gratuit SearchWP Live Ajax Lite Search, deoarece permite căutarea live automat.

Pentru instrucțiuni pas cu pas despre cum să-l instalați, consultați ghidul nostru despre cum să adăugați căutare Ajax live pe site-ul dvs. WordPress.

Utilizarea setărilor avansate pentru SearchWP

Acum ar trebui să navigați la Setări » SearchWP și să faceți clic pe fila Avansat. Pe această pagină, puteți activa unele setări care vor facilita utilizatorilor dvs. să găsească ceea ce caută.

SearchWP Setări avansate

Verificați oricare dintre aceste opțiuni pe care le doriți:

  • Potrivirile parțiale vor afișa, de asemenea, rezultate care nu se potrivesc cu termenul care este căutat.
  • Automată „Voi să spui?” corecțiile vor sugera un termen de căutare ușor diferit, care se va potrivi cu mai multe postări de pe site-ul dvs.
  • Suportul „căutări citate/expresie” va permite utilizatorilor să folosească ghilimele atunci când caută expresii exacte.
  • Evidențiați termeni în rezultate va face mai ușor pentru vizitatori să găsească ceea ce caută în rezultatele căutării.

Stilizarea formularului de căutare și a paginii cu rezultate

Tema dvs. WordPress controlează aspectul site-ului dvs. web, inclusiv formularul de căutare și pagina cu rezultatele căutării. Acestea stochează regulile de formatare pentru toate elementele site-ului dvs. WordPress într-o foaie de stil CSS.

Puteți adăuga propriul dvs. CSS personalizat pentru a înlocui regulile de stil ale temei.

Dacă nu ați făcut acest lucru înainte, atunci vedeți articolul nostru despre cum să adăugați CSS personalizat în WordPress pentru începători.

De exemplu, iată câteva CSS personalizate care vor funcționa cu majoritatea temelor. Prima secțiune modifică stilul formularului de căutare, iar cea de-a doua secțiune personalizează rezultatele căutării.


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Puteți modifica formatarea din cod pentru a se potrivi propriului site. De asemenea, puteți șterge orice rând pe care nu doriți să le modificați. De exemplu, dacă nu doriți să modificați înălțimea și lățimea formularului de căutare, atunci pur și simplu ștergeți acele linii.

Iată capturi de ecran ale site-ului nostru demonstrativ înainte și după adăugarea CSS-ului personalizat.

Previzualizare CSS personalizată SearchWP

Măsurarea rezultatelor căutării și îmbunătățirea conversiilor

Odată ce ați configurat formularul personalizat de căutare WordPress, următorul pas este măsurarea rezultatelor.

SearchWP vine cu o extensie pentru valorile de căutare care vă arată exact cum funcționează căutarea pe site.

SearchWP Metrics

De asemenea, puteți utiliza valorile de căutare pentru a îmbunătăți automat rezultatele căutării prin promovarea rezultatelor care obțin mai multe clicuri în partea de sus.

Site-urile de comerț electronic implementează, de asemenea, ferestre pop-up cu intenția de ieșire și campanii gamificate pentru a implica utilizatorii pe paginile de căutare, astfel încât aceștia să se poată converti în abonați de e-mail și apoi în clienți la scurt timp după.

OptinMonster spin to win popup example

Sperăm că acest tutorial te-a ajutat să înveți cum să creezi un formular de căutare WordPress personalizat. De asemenea, poate doriți să vedeți selecția noastră de experți a celor mai bune servicii de telefonie pentru afaceri pentru întreprinderile mici și compararea noastră cu cei mai buni registratori de domenii.

Dacă ți-a plăcut acest articol, atunci abonează-te la canalul nostru YouTube pentru tutoriale video WordPress. Ne puteți găsi și pe Twitter și Facebook.