Cum să adăugați WordPress Ajax Search fără plugin?

Publicat: 2023-04-13

Funcționalitatea de căutare este o componentă esențială a oricărui site web care permite vizitatorilor să găsească rapid informațiile pe care le caută. Deși WordPress oferă o funcție de căutare încorporată, este posibil să nu răspundă întotdeauna nevoilor tuturor utilizatorilor. Adăugarea căutării Ajax pe site-ul dvs. WordPress poate îmbunătăți semnificativ experiența utilizatorului, oferind rezultate de căutare în timp real, fără a fi necesară reîmprospătarea paginii.

Deși sunt disponibile multe plugin-uri pentru a adăuga funcționalitatea de căutare WordPress Ajax, acestea pot deseori încetini site-ul dvs. și pot să nu ofere nivelul de personalizare de care aveți nevoie. În acest articol, vă vom ghida prin ghidul despre cum să adăugați căutare WordPress Ajax fără un plugin. La sfârșitul articolului, vă prezentăm și o altă modalitate ușoară de a adăuga căutare live la WordPress. Urmând procesul nostru pas cu pas, veți putea personaliza funcționalitatea de căutare pentru a se potrivi nevoilor dvs. și veți oferi o experiență de utilizator mai bună pentru vizitatorii dvs.

Cuprins
  1. Ce este WordPress Ajax Search?
  2. De ce ar trebui să adăugați Live Ajax Search pe site-ul dvs. WordPress?
  3. Cum să adăugați WordPress Ajax Search fără pluginuri?
    • Avantajele și dezavantajele utilizării codului pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress
      • Avantaje:
      • Dezavantaje:
    • Ce să rețineți când utilizați codul pentru a adăuga căutare Ajax pe site-ul dvs. WordPress?
    • Adăugați manual o căutare Ajax live pe site-ul dvs. WordPress folosind cod
  4. Cum să adăugați o căutare Ajax live pe site-ul dvs. cu programul de căutare Ajax de la Woostify?
    • Avantajele și dezavantajele utilizării addonului Woostify Ajax Search pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress
    • Proces detaliat pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress folosind programul de completare Ajax Search de la Woostify
  5. Cuvinte finale,

Ce este WordPress Ajax Search?

Căutarea Ajax este un tip de funcționalitate de căutare care utilizează tehnologia Ajax (Asynchronous JavaScript and XML) pentru a oferi rezultate de căutare în timp real, fără a fi nevoie de reîmprospătare a paginii. Ajax permite trimiterea interogărilor de căutare către server în fundal, în timp ce utilizatorul continuă să interacționeze cu pagina. Rezultatele căutării sunt apoi încărcate dinamic în pagină, permițând o experiență de utilizator mai simplă și mai rapidă.

În contextul WordPress, căutarea Ajax poate fi utilizată pentru a îmbunătăți funcționalitatea de căutare încorporată sau pentru a o înlocui complet cu o funcție de căutare mai robustă și personalizabilă. Cu căutarea Ajax, utilizatorii pot obține rezultate instantanee pe măsură ce introduc interogarea, făcând găsirea conținutului pe care îl caută mai ușor și mai rapid. Acest lucru poate fi util în special pentru site-urile web cu o cantitate mare de conținut sau produse, unde funcțiile de căutare tradiționale pot dura mai mult pentru a încărca sau returna rezultate irelevante.

De ce ar trebui să adăugați Live Ajax Search pe site-ul dvs. WordPress?

Mai jos sunt câteva motive majore pentru care ar trebui să adăugați căutare Ajax live pe site-ul dvs. WordPress.

  • Îmbunătățește experiența utilizatorului: căutarea Ajax oferă rezultate de căutare în timp real, fără a fi nevoie de reîmprospătare a paginii, ceea ce face ca utilizatorii să găsească mai rapid și mai eficient informațiile de care au nevoie.
  • Reduce rata de respingere: dacă utilizatorii nu găsesc rapid ceea ce caută, pot părăsi site-ul dvs. Căutarea Ajax poate ajuta la prevenirea acestui lucru, oferind rezultate relevante instantaneu, reducând probabilitatea ca utilizatorii să iasă de pe site-ul dvs.
  • Personalizat: cu căutarea Ajax, puteți personaliza funcționalitatea de căutare pentru a satisface cerințele dvs. specifice, inclusiv adăugarea de filtre sau ajustarea clasamentului rezultatelor căutării.
  • Rezultate de căutare mai precise: căutarea Ajax poate fi configurată pentru a oferi rezultate de căutare mai precise, incluzând criterii de căutare suplimentare sau folosind algoritmi de căutare neclare.
  • Îmbunătățește funcționalitatea de căutare a site-ului: în timp ce WordPress oferă o funcție de căutare încorporată, este posibil să nu răspundă întotdeauna nevoilor tuturor utilizatorilor. Adăugarea căutării Ajax poate îmbunătăți funcționalitatea de căutare a site-ului dvs. și poate oferi o experiență mai bună pentru utilizator.

Cum să adăugați WordPress Ajax Search fără pluginuri?

Avantajele și dezavantajele utilizării codului pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress

Aruncă o privire mai atentă la avantajele și dezavantajele de mai jos dacă te gândești să folosești codul pentru a adăuga o căutare Ajax live pe site-ul tău WordPress.

Avantaje:

  • Personalizare: Când utilizați cod pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress, aveți control complet asupra funcționalității și designului caracteristicii de căutare. Îl puteți personaliza pentru a se potrivi nevoilor și preferințelor dumneavoastră specifice.
  • Viteză: Căutarea Ajax bazată pe cod poate fi mai rapidă decât utilizarea unui plugin, deoarece nu există nicio suprasarcină suplimentară din codul pluginului.
  • Fără dependențe: prin faptul că nu vă bazați pe un plugin, eliminați potențialele conflicte cu alte plugin-uri sau problemele de compatibilitate cu viitoarele actualizări WordPress.
  • Oportunitate de învățare: scrierea codului pentru a implementa căutarea Ajax pe site-ul dvs. WordPress este o oportunitate excelentă de a afla mai multe despre dezvoltarea web și cum funcționează Ajax.

Dezavantaje:

  • Cunoștințe tehnice necesare: Implementarea căutării Ajax folosind cod necesită anumite cunoștințe tehnice în dezvoltarea web și WordPress.
  • Consumator de timp: scrierea codului pentru a adăuga căutarea Ajax poate consuma mult timp, mai ales dacă nu sunteți familiarizat cu procesul sau trebuie să depanați erori.
  • Risc de erori: dacă codul nu este scris corect sau testat, poate cauza erori sau vulnerabilități de securitate site-ului dvs.
  • Asistență limitată: atunci când utilizați codul, trebuie să mențineți și să actualizați caracteristica de căutare, ceea ce poate necesita timp și resurse suplimentare.

În rezumat, utilizarea codului pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress oferă personalizare și control excelente. Totuși, necesită cunoștințe tehnice și timp pentru implementare și întreținere. Poate fi o opțiune bună pentru cei care doresc să învețe mai multe despre dezvoltarea web și sunt dispuși să investească timpul și resursele necesare.

Ce să rețineți când utilizați codul pentru a adăuga căutare Ajax pe site-ul dvs. WordPress?

Iată câteva lucruri de reținut atunci când adăugați căutare Ajax live pe site-ul dvs. WordPress fără un plugin:

Faceți o copie de rezervă a site-ului dvs. : înainte de a face orice modificări site-ului dvs., este important să creați o copie de rezervă a site-ului dvs. în cazul în care ceva nu merge bine.

Personalizarea codului : Adăugarea funcționalității de căutare Ajax necesită anumite cunoștințe de codare, așa că asigurați-vă că aveți o înțelegere de bază a HTML, CSS, JavaScript și PHP.

Testați temeinic : asigurați-vă că testați temeinic funcționalitatea de căutare după implementarea codului pentru a vă asigura că funcționează corect și oferă rezultatele așteptate.

Actualizări viitoare : rețineți că orice actualizări ale temei dvs. sau ale fișierelor de bază WordPress pot afecta funcționalitatea căutării dvs. personalizate Ajax. Asigurați-vă că verificați și actualizați în mod regulat codul pentru a asigura compatibilitatea cu orice actualizări.

Compatibilitate teme : Codul pentru adăugarea căutării Ajax poate varia în funcție de tema dvs. Asigurați-vă că testați mai întâi codul pe un site de pregătire pentru a vă asigura că funcționează cu tema dvs. specifică. Prin urmare, înainte de a începe să adăugați căutare WordPress Ajax fără plugin, trebuie să creați o temă secundară a temei curente pe care o utilizați pe site-ul dvs. și să o activați pe site-ul dvs.

Adăugați manual o căutare Ajax live pe site-ul dvs. WordPress folosind cod

Urmați procesul detaliat de mai jos pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress.

  • Pasul 1: Accesați Editorul de fișiere de teme

Din tabloul de bord WordPress, accesați Aspect > Editor fișiere teme

adăugați-wordpress-ajax-căutare-fără-plugin
  • Pasul 2: Copiați codul principal care afișează căutarea Ajax în WordPress

Copiați codul de mai jos. În interogarea postării, vă puteți personaliza HTML după cum doriți. Acest cod va interacționa cu HTML pentru a vă ajuta să creați căutare WP Ajax fără plugin.

 } // the ajax function add_action ( 'wp_ajax_data_fetch' , 'data_fetch' ); add_action ( 'wp_ajax_nopriv_data_fetch' , 'data_fetch' ); function data_fetch () { $the_query = new WP_Query ( array ( 'posts_per_page' => - 1 , 's' => esc_attr ( $_POST [ 'keyword' ] ), 'post_type' => array ( 'page' , 'post' ) ) ); if ( $the_query -> have_posts () ) : echo '<ul>' ; while ( $the_query -> have_posts () ): $the_query -> the_post (); ?> <li><a href= "<?php echo esc_url( post_permalink() ); ?>" > <?php the_title (); ?> </a></li> <?php endwhile ; echo '</ul>' ; wp_reset_postdata (); endif ; die (); }
  • Pasul 3: Adăugați codul de căutare Ajax în fișierul temă functions.php.

Pe pagina de editare a codului, navigați la functions.php din meniul din dreapta. Și inserați codul pe care l-ați copiat în zona editorului de cod.

add-wordpress-ajax-search-without-plugin-2
  • Pasul 4: Salvați modificările

Nu uitați să faceți clic pe butonul Actualizare fișier din pagina de jos.

Asta este. Ați introdus căutarea Ajax live în WordPress fără plugin.

Acesta va oferi vizitatorilor dvs. rezultate de căutare instantanee și va îmbunătăți numărul de afișări de pagină.

Dacă vi se pare complicat și doriți să încercați o altă abordare, să descarcăm și să instalăm tema Woostify și să o facem cu programul de completare Ajax Product Search de la Woostify.

Cum să adăugați o căutare Ajax live pe site-ul dvs. cu programul de căutare Ajax de la Woostify?

Acesta este modul de a adăuga căutare WordPress Ajax fără plugin. Dacă vi se pare prea dificil să adăugați cod personalizat pe site-ul dvs. WordPress și, de asemenea, nu doriți să instalați un plugin terță parte pentru a evita încetinirea site-ului dvs., puteți utiliza tema Woostify.

După cum știți, pentru a rula un magazin online, aveți nevoie de o temă WooCommerce. În loc să utilizați o temă simplă WordPress WooCommerce fără funcții de stimulare a vânzărilor, ar trebui să alegeți Woostify. Tema premium Woostify WooCommerce vă oferă mai multe funcții utile pentru a rula și dezvolta site-ul dvs. de comerț electronic. Tema Woostify vă oferă, de asemenea, suplimentul Ajax Product Search, care face procesul de adăugare a căutării Ajax WordPress mai ușor fără a instala un plugin extern.

Instalați Woostify Pro acum

Avantajele și dezavantajele utilizării addonului Woostify Ajax Search pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress

Complementul de căutare Ajax al Woostify este un plugin care adaugă funcționalitate de căutare bazată pe Ajax magazinelor WooCommerce folosind tema Woostify. Pluginul folosește tehnologia Ajax pentru a oferi rezultate de căutare în timp real, fără a fi nevoie de reîmprospătare a paginii, ceea ce face ca utilizatorii să găsească mai rapid și mai eficient produsele pe care le caută.

Acest supliment de căutare Ajax este conceput să funcționeze perfect cu tema Woostify și pluginul WooCommerce, oferind funcții de căutare avansate, cum ar fi afișarea imaginii produsului, sugestii automate și posibilitatea de a căuta după SKU de produs, categorie sau etichetă. Suplimentul include, de asemenea, opțiuni pentru a personaliza aspectul barei de căutare, culorile și fonturile pentru a se potrivi cu designul site-ului dvs.

Folosirea addonului Ajax Search poate îmbunătăți funcționalitatea de căutare a magazinului dvs. WooCommerce, îmbunătățind experiența utilizatorului și potențial creșterea vânzărilor, facilitând găsirea și achiziționarea de produse de către clienți. Suplimentul este disponibil ca parte a pachetului Woostify Pro, care include funcții premium și suport suplimentar.

Singurul dezavantaj al acestei abordări este că trebuie să achiziționați Woostify theme pro cu un cost începând de la 49 USD pe an pentru 1 site. Desigur, dacă utilizați tema Woostify, nu aveți nevoie de nicio altă temă pe site-ul dvs. WordPress. Și această temă este cea mai potrivită pentru magazinele online fizice.

Proces detaliat pentru a adăuga o căutare Ajax live pe site-ul dvs. WordPress folosind programul de completare Ajax Search de la Woostify

Aceasta este cea mai simplă metodă de a adăuga căutare Ajax live pe site-ul dvs. WordPress, în special pentru site-urile WooCommerce.

Pentru a implementa căutarea WordPress Ajax pe site-urile WooCommerce utilizând addonul Woostify Ajax Search, ar trebui să urmați pașii de mai jos.

  • Pasul 1: Activați suplimentul Woostify Ajax Search

Să presupunem că ați instalat Woostify theme pro pe site-ul dvs. WooCommerce. Deci, primul pas este să activați programul de completare Ajax Product Search al Woostify. Din tabloul de bord WordPress, accesați Woostify .

Apoi, navigați la fila Suplimente din meniul de sus. După aceea, veți vedea un tabel cu suplimente premium Woostify acolo.

add-wordpress-ajax-search-without-plugin-3

Mișcați mouse-ul pentru a găsi suplimentul Ajax Product Search și porniți butonul de activare la lumina verde, ca mai jos.

add-wordpress-ajax-search-without-plugin-4
  • Pasul 2: Configurați căutarea Ajax pe site-ul dvs. WooCommerce.

Pentru a accesa pagina de setări a suplimentului Ajax Product Search, ar trebui să apăsați pictograma Setare din colțul casetei, după cum urmează:

add-wordpress-ajax-search-without-plugin-5

Acum că ajungeți la pagina de setări pentru a configura suplimentul Ajax Product Search.

add-wordpress-ajax-search-without-plugin-6

După cum puteți vedea, în această secțiune, puteți face setări cu următoarele elemente.

– Filtru : bifați această opțiune dacă doriți să afișați un filtru de categorie.

– Căutare categorie : bifați această opțiune dacă doriți să afișați căutarea în categorii.

– Etichetă de căutare : bifați această casetă dacă doriți să afișați căutarea în etichete.

– Atribute de căutare : bifați această casetă dacă doriți să afișați căutarea în atributele produsului.

– Căutare în câmpuri personalizate : în această secțiune, puteți alege câmpurile personalizate pe care doriți să le adăugați la domeniul de căutare.

– Produse epuizate : bifați această opțiune dacă doriți să eliminați produsele epuizate din rezultatele căutării.

– Limitați rezultatul : introduceți „-1” pentru a afișa toate rezultatele căutării

Căutare după : în această secțiune, puteți selecta să căutați după titluri de produs/ SKU produs/ Descriere produs/ sau descriere scurtă a produsului. Cu toate acestea, vă sugerăm să le alegeți pe toate pentru a vă asigura că clienții dvs. pot afla cu ușurință produsele din magazinul dvs. cu orice au în vedere.

– Culoare evidențiere : puteți personaliza culoarea textului în rezultatele căutării.

– Date de indexare : bifați această casetă pentru a păstra Addon-ul de căutare Ajax pentru a indexa toate datele de pe site-ul dvs. WooCommerce.

– Ultima actualizare : Aceasta arată cele mai recente actualizări ale setărilor.

– Index total de produse : acesta arată numărul total de produse indexate.

  • Pasul 3: Salvați și previzualizați

În ultimul pas, nu uitați să apăsați butonul Salvare și să vizitați magazinul în față pentru a verifica dacă căutarea dvs. ajax funcționează corect sau nu.

add-wordpress-ajax-search-without-plugin-7

Cuvinte finale,

Adăugarea căutării Ajax live pe site-ul dvs. WordPress fără un plugin poate fi o modalitate excelentă de a îmbunătăți experiența utilizatorului și de a le face mai ușor pentru vizitatori să găsească conținutul pe care îl caută fără niciun cost. Deși necesită anumite cunoștințe de codificare, beneficiile unei căutări Ajax personalizate pot fi semnificative. Nu uitați să faceți o copie de rezervă a site-ului dvs., să testați temeinic și să păstrați codul actualizat cu orice actualizări viitoare ale temei sau ale fișierelor de bază WordPress.

Alternativ, dacă nu vă simțiți confortabil cu codificarea, puteți alege tema premium Woostify pentru a vă proiecta site-ul, în special site-ul de comerț electronic. Cu programul de completare Ajax Product Search de la Woostify, procesul de adăugare a căutării Ajax live este mult mai simplu, dar obțineți rezultate mai bune cu mai puțin efort.

Dacă aveți întrebări sau recomandări despre cum să adăugați căutare WordPress Ajax fără plugin, vă rugăm să ne anunțați lăsând un comentariu mai jos.