Sugestie automată de căutare ușoară în WordPress - Tutorial
Publicat: 2022-04-10Crearea unei bare de căutare cu sugestie automată în WordPress este surprinzător de ușoară, rapidă și gratuită. Iată tutorialul nostru despre cum să o faci.
De ce ar trebui să vă faceți timp pentru a adăuga Căutare automată la WordPress? În primul rând, vei economisi timp. Vizitatorii blogului dvs. îl vor iubi mai mult, deoarece le face viața mai ușoară, oferind acces ușor la informațiile pe care le caută în confortul site-ului dvs. Există un motiv pentru care Google și alte instrumente de căutare orientate către informații folosesc acest tip de caracteristică.
Notă: Căutarea automată în WordPress poate fi uneori denumită „ căutare ajax live ”. De asemenea, deoarece WooCommerce folosește aceeași bază de date ca și WP, iar produsele sunt pur și simplu un tip de postare personalizat, acest tutorial va funcționa și pentru popularul plugin de comerț electronic.
De ce vei avea nevoie
Veți avea nevoie de un manager de fragmente de cod, de capacitatea de a copia și de a lipi și de pluginul Live Search (gratuit în repo).
Ar trebui să reținem următoarele: orice formular care utilizează <?php get_search_form() ?> , va funcționa automat cu această soluție și nu va avea nevoie de următorii doi pași. Doar săriți la această secțiune dacă alegeți traseul respectiv.
Cu toate acestea, acesta nu este cazul pentru multe teme, constructori de pagini și alte instrumente. Elementor și Oxygen nu folosesc această formă construită oferită de WordPress (deci utilizatorii lor le pot stila cu ușurință în ceea ce privește dimensiunea, fontul și culoarea). Așadar, pentru a obține o bară de căutare cu completare automată pe Elementor, Oxygen, majoritatea celorlalți constructori de pagini și multe teme, urmați pașii prezentați mai jos.
Chiar dacă îl adăugați prin PHP, așa cum este imaginea de mai sus, fără nici un CSS, veți rămâne cu un formular de căutare fără stil. Cu toate acestea, dacă aveți acces la fișierele/șabloanele dvs. de teme, aceasta este o modalitate viabilă de a obține un formular de căutare pe site-ul dvs. Aceasta va folosi marcajul standard WordPress, astfel încât să puteți ajusta CSS-ul de mai jos.
Preferăm următoarea metodă, deoarece puteți edita stilul și clasele, adăugați elemente speciale, trimiteți utilizatorii la puncte de căutare personalizate și multe altele - construiți acest lucru de la zero.
PHP-ul
Mai întâi, să construim acest formular de căutare. Puteți adăuga intrări suplimentare, clase CSS, substituenți și multe altele. Dacă păstrați codul exact așa cum este, CSS-ul asociat va funcționa alături de HTML. În funcție de modul în care creați un site web, puteți pur și simplu să lipiți acest lucru în structura reală a șablonului în care doriți ca o bară de căutare cu completare automată să ajungă SAU să mergeți pe ruta 2.
Ruta 2 este probabil ceea ce majoritatea proprietarilor de site-uri vor folosi. În loc să folosim acest HTML brut și PHP, îl vom converti într-un cod scurt care îl face mult mai compatibil cu WordPress. În acest fel, îl puteți lipi în Gutenberg, orice generator de pagini doriți și multe altele. Există câteva moduri de a face acest lucru; vom detalia o metodă ușoară, dar plătită, și o metodă mai dificilă, dar mai ușoară.
Mod plătit (ușor)
Alegeți Scripts Orginizer, un plugin WordPress premium care facilitează gestionarea codului pe site-ul dvs. WordPress (recenzie). După instalare, accesați Scripts Organizer -> Import, aflat în meniul de administrare din bara laterală.
Descărcați acest fișier (un export a tot ceea ce este menționat mai jos), importați-l și treceți la preluarea codului scurt.
Odată ajuns în secțiunea CSS personalizată, treceți la secțiunea parțială SCORG, descărcați acel JSON, importați, instalați pluginul de căutare live și fiți activ.
De asemenea, puteți urma pașii manuali. Pentru a începe, creați o intrare nouă:
Acum, parcurgeți următoarele:
- Da-i un titlu
- Activare comutator blocare cod: Activat
- Locația scriptului: Shortcode
- Copiați/Lipiți codul PHP/HTML de mai sus.
- Păstrați toate celelalte setări implicite și faceți clic pe Publicare
Ar trebui să arate așa când ai terminat cu el ️.
Luați codul scurt care se va afișa în intrarea de script din partea stângă jos a editorului de cod sau pe pagina de listare a fragmentelor de cod:
Luați acest shortcode și introduceți-l oriunde cu Gutenberg, TINYMCE, Elementor Shortcode Widget sau orice altă metodă specifică shortcode-ului.
Element de cod scurt Gutenberg 
Widget pentru coduri scurte Elementor
Acum mergeți la pasul doi și adăugați CSS pe site-ul dvs.
Drum liber (puțin mai greu)
Instalați pluginul gratuit Code Snippets. Descărcați următorul fragment de cod și importați-l pe site-ul dvs. web:
Acest fișier poate fi importat și în Advanced Scripts (în esență o versiune premium, mai ușoară a Code Snippets) și chiar în Scripts Organizer.
Apoi, adăugați căutarea folosind următorul cod scurt pe front-end:
Indiferent de modul în care adăugați căutarea, dacă utilizați HTML și PHP de bază din această secțiune, CSS-ul din secțiunea următoare îi va oferi un stil frumos.
CSS-ul
Dacă păstrați intacte structura și clasele, adăugați pur și simplu acest CSS personalizat pe site-ul dvs. pentru a obține un formular de căutare bine stilat, cu capacitatea de completare automată.
Notă: acest cod nu este compatibil cu metoda <?php get_search_form() ?> de inserare a unei bare de căutare. Cu toate acestea, în funcție de tema dvs., inserarea unui formular de căutare în acest fel înseamnă că va moșteni stilurile temei dvs.
Puteți adăuga acest CSS la utilitarul dvs. de generare a paginii, prin Aspect -> Personalizare -> CSS suplimentar sau folosind SCORG.
Vă sugerăm SCORG. Adăugați un nou parțial CSS, inserați codul și publicați-l (sau importați acest fișier). Navigați la Shortcode Snippet creat la pasul anterior, accesați secțiunea „SCSS Partials Manager” și selectați show , căutați titlul acelui parțial și selectați-l. Actualizați-l. Acum, oriunde plasați codul scurt, se va încărca și CSS-ul. Se va încărca numai acolo unde este plasat codul scurt, nu la nivel global , ceea ce este excelent pentru performanță.
Acum, tot ce ne trebuie este Sosul Magic.
Sosul magic (SearchWP Live Ajax Search)
Acesta este un plugin incredibil creat de echipa din spatele suitei de pluginuri SearchWP. Este gratuit și se află în depozitul WordPress. În loc de structuri de cod complexe, putem instala acest lucru și obținem o căutare live în mai puțin de un minut.
Odată instalat, faceți clic pe formularul de căutare pe care l-ați inserat cu cod scurt, cod brut sau unul care utilizează inserarea PHP nativă WordPress și ar trebui să vedeți următorul comportament:
Gata, ai terminat! Bucurați-vă de un formular de căutare pe site-ul dvs. WordPress care va completa automat căutările utilizatorilor folosind tehnologia AJAX.
Extindeți această căutare live în WordPress
SearchWP Live Ajax Search este un plugin gratuit care vă permite să faceți așa cum sugerează numele: adăugați Live Ajax Search. Va funcționa cu sau fără colecția premium de SearchWP și extensiile asociate. Dacă nu utilizați SearchWP, va folosi motorul de căutare standard WP.
Căutarea standard WordPress sortează în funcție de relevanță (în trecut, nu era - sălbatic!), uitându-se în titlul unei postări, apoi la conținut. Dar acesta este încă Elementor și există opțiuni mai bune acolo. De fapt, am scris un alt articol în care discutăm despre alternative mai bune, pe care îl puteți citi aici: Better Search Solutions For WordPress
Cu toate acestea, deoarece Live Search este realizat de Search WP, va folosi automat acel motor dacă este instalat. Search WP este superior, deoarece include derivarea cuvintelor cheie, potriviri mai precise, indexarea documentelor, suport pentru WooCommerce, personalizarea algoritmului și multe altele. Vă sugerăm cu tărie să vă construiți căutarea live și să utilizați celelalte funcții ale pluginului premium pentru a oferi rezultate de căutare și mai bune.
Dacă sunteți în căutarea unei alternative la SearchWP, Ivory Search este un plugin cu un cost mai mic, care oferă caracteristici similare și un LTD! Acest plugin Live Search (WP Search Autocomplete) ar trebui să funcționeze imediat cu Ivory Search. Puteți folosi și alte motoare de căutare; Conform documentelor, tot ce trebuie să faceți este:
Adăugați următorul atribut la
Întrebări frecvente despre listăriinputformularului:data-swpengine="supplemental"înlocuind „supplemental” cu numele dorit de motor de căutare.
Și mai ușor cu oxigenul
Nu este un secret că ne place Oxygen Builder, așa că iată o modalitate și mai ușoară de a adăuga AJAX Live Search (completare automată) cu acel instrument.
Notă: Acest tutorial și plugin nu vor funcționa cu widgetul de formular de căutare Oxygen, deoarece, așa cum sa menționat într-o secțiune anterioară, nu utilizează metoda standard PHP de inserare a unui formular de căutare și nici nu include atributul de date necesar.
Pași simpli:
- Adăugați bloc de cod oriunde doriți formularul de căutare, inserați în PHP găsit mai jos (sau inserați în coduri scurte Hydrogen, care vor face blocarea automată a codului).
- Adăugați CSS găsit mai jos la Oxygen Global CSS, modificați după cum doriți (în principal culori).
- Instalați și activați pluginul Live Search, gratuit pe repo aici.
- Bucură-te de gloria căutării în direct.
Deoarece putem plasa PHP direct în șabloane și pagini cu Page Builder, putem pur și simplu să lipim următorul PHP într-un bloc de cod, să adăugăm CSS-ul prin setări globale și să-l numim o noapte (asigurați-vă că ați adăugat plugin de căutare live, găsit aici).
De asemenea, puteți copia/lipi următoarele coduri scurte de hidrogen (dacă aveți Hydrogen Pack (revizuit aici)).
Pur și simplu faceți clic pe Copiere, instalați Hydrogen și inserați în pagina dvs. CSS va fi inclus în blocul de cod.
În cele din urmă, utilizați CSS (luat de mai sus):
Vă sugerăm să inserați acest CSS prin CSS global al Oxygen.
Iată cum ar trebui să arate rezultatul final:
Dacă doriți să reutilizați această parte, puteți, de asemenea, să o transformați într-o parte reutilizabilă. Atâta timp cât ai instalat pluginul Live Search, ar trebui să mergi cu o bară de căutare AJAX plăcută pentru vizitatorii tăi.
<?php get_search_form() ?>
Sau, utilizați codul de mai sus dacă nu aveți nevoie de personalizare avansată (inclusiv, dar fără a se limita la soluții de căutare mai bune decât căutarea de bază a WP). Desigur, deoarece putem folosi coduri scurte în acest generator de pagini, puteți urma, de asemenea, jumătatea superioară a acestui tutorial, care vă va ghida prin crearea unui cod scurt pentru a fi utilizat pe partea frontală a site-ului dvs. web.
Concluzie
În 2022, este mai important ca niciodată să oferi utilizatorilor o experiență grozavă și instrumentele de care au nevoie pentru a accesa conținutul pe care și-l doresc. Acest articol a prezentat mai multe metode de instalare a căutării WordPress live Ajax pe un site web în mai puțin de 15 minute.
Există mai multe metode descrise aici, astfel încât să puteți alege să îl utilizați pe fișierele șablon de temă, să generați coduri scurte care sunt compatibile cu constructorii de pagini și să încorporați și mai multe metode. Pluginul folosit pentru a obține funcționalitatea de căutare live este complet gratuit și bine conceput.
Alte intrebari? Simțiți-vă liber să le lăsați în secțiunea de comentarii de mai jos.