Cel mai simplu mod de a adăuga Live Search

Căutați cel mai bun plugin WordPress de căutare AJAX?

Adăugarea căutării live bazate pe AJAX la WordPress este o modalitate excelentă de a îmbunătăți experiența utilizatorului (UX) a site-ului dvs. și de a crește gradul de descoperire a conținutului.

În această postare, veți învăța pas cu pas cum să configurați căutarea AJAX în WordPress folosind o soluție complet fără cod.

De fapt, puteți fi activ și funcțional în doar câteva minute, având în același timp acces la funcționalitatea pentru a îmbunătăți modul în care funcționează căutarea AJAX a site-ului dvs.

Tot ce trebuie să faci este:

1. Instalați pluginul Otter Blocks.
2. Adăugați blocul Căutare acolo unde doriți să apară caseta de căutare AJAX WordPress și activați comutatorul Căutare live.
3. Personalizați funcționalitatea de căutare live AJAX după cum este necesar, cum ar fi configurarea acesteia pentru a căuta numai postări de blog, dar nu pagini.

Dacă doriți să treceți direct la tutorial, puteți face clic pe acest link de salt.

Ce este căutarea AJAX pentru WordPress?

Probabil că veți folosi funcționalitatea de căutare live în fiecare zi. De exemplu, toate motoarele de căutare și site-urile video majore, cum ar fi YouTube, oferă acest tip de caracteristică.

Începeți să tastați în caseta de căutare și vedeți instantaneu o listă de interogări sugerate (sau rezultate sugerate) – nu este necesară încărcarea paginii.

Deși WordPress are propria bară de căutare, nu folosește AJAX în mod implicit. În schimb, utilizatorii introduc un termen de căutare în casetă, apăsați Enter și se încarcă o pagină nouă cu rezultate.

Pentru a adăuga căutare live pe site-ul dvs., veți avea nevoie de ajutorul unui plugin, despre care este vorba în această postare.

Beneficiile căutării AJAX live în WordPress

Orice puteți introduce și care îmbunătățește UX va oferi valoare site-ului dvs. Cu toate acestea, căutarea AJAX live pentru WordPress poate oferi utilizatorilor dvs. ceva special:

• Puteți oferi utilizatorilor o modalitate de a-și „servi singur” nevoile. Ei vor avea o modalitate rapidă de a căuta întregul site și de a găsi pagina potrivită.
• Elementele interactive pot oferi o conexiune mai mare între site-ul dvs. și utilizatori. Acest lucru se datorează faptului că puteți oferi rezultate de căutare relevante mai rapid și fără a fi nevoie de clicuri suplimentare pe butoane.
• De asemenea, puteți menține timpii de încărcare a paginii la minimum, deoarece căutarea AJAX în direct nu trebuie să facă alte solicitări HTTP sau să încarce alte pagini.

De ce o soluție de codificare manuală pentru căutarea live ar putea să nu fie cea mai bună

Având în vedere că AJAX folosește JavaScript, s-ar putea să vă gândiți să vă „rulați propria” soluție folosind limbajul de programare.

Aceasta este o idee bună în teorie, dar nu va fi cea mai bună metodă de a adăuga căutare AJAX live la WordPress. Iata de ce:

• În primul rând, poți crea doar o soluție la fel de bună ca și abilitățile tale. Dacă nu aveți cunoștințe JavaScript la nivel de expert, acest lucru se va afișa în rezultate.
• În plus, va trebui să știți și despre structura fișierelor WordPress, structura șablonului și multe altele. Există o mulțime de roți dințate care alcătuiesc roata WordPress.
• Chiar dacă aveți abilitățile necesare pentru a codifica o soluție de căutare live, veți avea nevoie și de timp și bani pentru ao dezvolta și implementa. Acest lucru poate fi greu de obținut, mai ales dacă dezvoltarea nu este ocuparea ta principală.
• Dacă trebuie să depanați soluția manuală, aceasta vă poate consuma mai mult timp, bani și resurse. Ai putea să muști mai mult decât poți mesteca.

În schimb, există o modalitate mai bună de a implementa funcționalitatea potrivită în WordPress: pluginuri. Să aruncăm o privire la cum funcționează în continuare.

Utilizați în schimb un plugin WordPress de căutare AJAX

Pentru majoritatea oamenilor, utilizarea unui plugin WordPress de căutare AJAX este o opțiune mult mai bună.

Deși există o mulțime de pluginuri WordPress de căutare AJAX din care să alegeți, nu toate sunt create egale. De exemplu, unele plugin-uri sunt limitate când vine vorba de opțiuni de stil sau de control al conținutului în care să caute.

Din acest motiv, vom folosi pluginul Otter Blocks pentru acest tutorial.

După cum sugerează și numele, Otter Blocks este o colecție de elemente pentru editorul de blocuri WordPress nativ.

În ceea ce privește funcționalitatea de căutare AJAX, cea mai relevantă caracteristică este blocul de căutare.

Vă permite să alegeți în ce tipuri de postări să căutați și să personalizați complet designul casetei de căutare. Îl puteți adăuga în orice parte a site-ului dvs., inclusiv în postări, pagini, bare laterale și multe altele.

Dincolo de funcționalitatea WordPress de căutare AJAX, Otter Blocks vă oferă câteva modalități suplimentare de a vă condimenta machetele și designul:

• Puteți adăuga titluri cu un nivel mai mare de personalizare decât veți obține în mod implicit.
• Există opțiunea de a crea o secțiune receptivă care include personalizare avansată și spațiu pentru șase coloane.
• Veți putea adăuga animații uimitoare, cum ar fi efectele Lottie și cărți de întoarcere.
• Dacă vindeți produse prin intermediul site-ului dvs., Otter Blocks include tabele de prețuri, abilitatea de a implementa butoane „adăugați în coș”, programul de lucru și multe altele.

De fapt, Otter Blocks oferă funcționalități suplimentare pentru toate blocurile oferite – chiar și pentru cele native. De exemplu, puteți seta condiții de vizibilitate, CSS personalizat și multe altele din interfața tipică Block Editor.

Cum să utilizați Otter Blocks pentru a adăuga căutare AJAX live la WordPress

Veți avea nevoie doar de câțiva pași pentru a configura Otter Blocks pentru a adăuga căutare AJAX live la WordPress. Să începem cu procesul de instalare:

1. Instalați și activați Otter Blocks
2. Activați căutarea AJAX live pentru WordPress în setările Otter Blocks
3. Modificați setările pentru a rafina experiența de căutare în partea frontală a site-ului dvs

1. Instalați și activați Otter Blocks

În primul rând, va trebui să instalați Otter Blocks și să îl activați pentru site-ul dvs. web. Există o mulțime de modalități de a face acest lucru, dar am repeta ceea ce este deja în celălalt articol al nostru de pe blogul ThemeIsle.

Acest lucru vă va arăta cum să instalați atât versiunile gratuite, cât și cele premium ale Otter Blocks. Cu toate acestea, pentru această postare, veți avea nevoie de versiunea premium, deoarece aceasta vă oferă funcționalitate de căutare live.

2. Activați căutarea AJAX live pentru WordPress în setările Otter Blocks

După ce ați instalat pluginul, utilizați instrumentul de inserare a blocurilor pentru a adăuga blocul Căutare din Otter Blocks.

După ce faceți acest lucru, va adăuga un câmp de formular și un buton la aspectul paginii dvs.

Aceasta implementează funcționalitatea de bază de căutare, dar aceasta nu este căutare AJAX live în WordPress.

În configurația sa implicită, va acționa ca o căutare tipică WordPress.

Pentru a activa funcția WordPress de căutare AJAX, activați comutatorul Activare căutare live din bara laterală din dreapta:

3. Modificați setările pentru a rafina experiența de căutare în partea frontală a site-ului dvs

Odată ce aveți funcționalitate de căutare live pe site-ul dvs., o puteți rafina în mai multe moduri.

Desigur, există o serie de opțiuni cosmetice și UX.

De exemplu, puteți modifica poziția butonului, indiferent dacă utilizați o etichetă pentru caseta de căutare și puteți modifica culorile, animațiile și chenarele pentru secțiunea de căutare:

De acolo, puteți, de asemenea, să dați căutării limitele unde să căutați pe site-ul dvs., alegând în ce tipuri de postări să căutați.

Pentru aceasta, veți folosi caseta Căutare în din bara laterală din dreapta:

Acest lucru vă permite să adăugați „entități” pentru locul în care doriți să funcționeze căutarea.

De exemplu, puteți alege să căutați numai în conținutul postării dvs. sau printre produsele magazinului dvs.

Dacă lăsați acest câmp gol, Otter Blocks va căuta în întregul conținut al site-ului dvs.

Configurați funcționalitatea WordPress de căutare AJAX astăzi

Cu toate acestea, WordPress nu oferă acest lucru în mod implicit. În schimb, puteți folosi Otter Blocks pentru a adăuga acest lucru pe site-ul dvs. Nu este implicat niciun cod și obțineți mult mai multe funcționalități decât căutarea AJAX live.

În timp ce Otter Blocks este un plugin gratuit, versiunea premium oferă posibilitatea de a configura căutarea AJAX live în WordPress, printre alte opțiuni.

Mai aveți întrebări despre cum să configurați căutarea live AJAX pe WordPress? Întrebați-ne în comentariile de mai jos!