Share
Formularul de căutare WordPress nu oferă în mod implicit clopote și fluiere. Dacă este deja inclus în tema dvs. sau dacă ați adăugat widgetul de căutare la unul dintre barele laterale, puteți atesta acest lucru. O modalitate de a-și îmbunătăți foarte mult funcționalitatea este să includă un script de completare automată care să contribuie la sporirea eficienței transmiterii interogărilor relevante.
Există destul de multe scripturi de autocompletare disponibile și, recent, Jake Harding de la Twitter a lansat typeahead.js, o versiune complet independentă a unui script similar numit care vine ambalat cu Bootstrap. M-am gandit ca ar fi interesant sa-mi dau seama cum sa folosesc acest script usor cu WordPress si, dupa ce am facut un pic de bataie, am reusit sa fac un mic plugin cu ajutorul lui Michal Bluma.
Plugin-ul este destul de simplu deoarece nu există decât un pic de personalizare necesară pentru ca lucrurile să funcționeze corect. Voi rupe fiecare secțiune a codului pluginului pentru a vă explica ce se întâmplă.
Accentsconagua
plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search')); $ bavotasan_wp_typeahead = nou Bavotasan_WP_Typeahead; Pe cont propriu, codul de mai sus va scuipa doar câteva erori, dar acesta este începutul a tot ceea ce trebuie să utilizați typeahead.js cu formularul de căutare WordPress. Prima acțiune este să eliminați fișierele JavaScript / CSS de care aveți nevoie și să plasați JS-ul necesar în subsol. Apoi, apelurile Ajax ajută la găsirea rezultatelor căutării. Să aruncăm o privire la fiecare funcție.
/ ** * Enqueue Typeahead.js și foaia de stil * * @ din 1.0.0 * / funcția publică wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array 'jquery'), ', adevărat); wp_enqueue_script (' wp_hogan_js ', $ this-> plugin_url.' js / hogan.min.js ', array (' wp_typeahead_js '); wp_typeahead_vars = array ('ajaxurl' => admin_url ('wp_typeahead_js'), wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'wp_typeahead_vars'; 'wp_typeahead_cache', $ this-> plugin_url. 'css / typeahead.css');); Există patru fișiere care trebuie enumerate. Prima este realitatea typeahead.js fișier, apoi motorul templating a sunat hogan.js, urmat de un nou fișier JavaScript pe care îl vom crea pentru a pune totul în mișcare și, în sfârșit, o foaie de stil care face să arate bine.
Veți observa că în mijlocul acestuia folosim și noi wp_localize_script pentru a face URL-ul Ajax disponibil pentru JavaScript-ul nostru.
(nume: "căutare", distanță: wp_typeahead.ajaxurl + '? action = ajax_search & fn = get_ajax_search & terms =% QUERY', șablon: 'valoare
',] .join ("), motor: Hogan) .primul (funcția (e) if (13 == e.which) $ (this) ;));) (jQuery);
Puneți asta în noul /js/wp-typeahead.js fişier. Selectorul jQuery de mai sus va atașa funcția tipheadhead la oricare dintre formularele de căutare WordPress implicite și va folosi motorul templating Hogan pentru a formata datele Ajax returnate. Uneori, formularul de căutare poate fi modificat de tema dvs., iar butonul de trimitere va fi eliminat, așa că am adăugat într-un mic script pentru a vă asigura că atunci când apăsați butonul de introducere, formularul de căutare este trimis.
/ ** * Interogare Ajax pentru căutare * * @ din 1.0.0 * / funcția publică ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn' $ search_query = noul WP_Query (array ('s' => $ _REQUEST ['terms'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ rezultate = array (); dacă $ search_query-> get_posts ()) foreach ($ search_query-> get_posts () ca $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('valoare' => $ title, 'url' => get_permalink ($ the_post-> ID), 'token' => explode (", $ title); [] = __ ('Ne pare rău, niciun rezultat nu corespunde căutării dvs.', 'wp-typeahead'); wp_reset_postdata (); Când ceva este introdus în formularul de căutare, typeahead.js îl va lua și îl va trimite prin intermediul Ajax folosind parametrul de la distanță din cod în ultimul pas. Acest text trebuie să treacă printr-o funcție pentru ca aceasta să fie utilă și de aceea aveți nevoie de micul fragment de mai sus.
Este nevoie de textul de căutare, rulează printr-o interogare WordPress pentru a returna orice rezultate relaventate, dacă acestea există. Aceste rezultate sunt trimise înapoi după ce au fost codate folosind JSON, astfel încât scriptul să poată citi datele în mod corespunzător.
Cu totul în loc, fișierul plugin principal ar trebui să arate așa ...
plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search')); / ** * Enqueue Typeahead.js și foaia de stil * * @ din 1.0.0 * / funcția publică wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array ("jquery"), "true"); wp_enqueue_script ('wp_hogan_js', $ this-> plugin_url. 'js / hogan.min.js', array ('wp_typeahead_js'); wp_typeahead_vars = array ('ajaxurl' => admin_url ('wp_typeahead_js'), wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'wp_typeahead_vars'; wp_typeahead_vars); wp_typeahead_vars ('wp_typeahead_css'; $ this-> plugin_url. 'css / typeahead.css'); / ** * Ajax interogare pentru căutare * * @ din 1.0.0 * / funcția publică ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = WP_Query (array ('s' => $ _REQUEST ['terms'], 'posts_per_page' => 10, 'no_found_rows' => true)); )) foreach ($ căutare_query-> get_posts () ca $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'jetoane' => explode (", $ title),); altceva $ results [] = __ ("Ne pare rău, niciun rezultat nu corespunde căutării dvs.", "wp-typeahead"); wp_reset_postdata (); echo json_encode (rezultate $); a muri(); $ bavotasan_wp_typeahead = nou Bavotasan_WP_Typeahead; Când descărcați plugin-ul, veți avea foaia de stil și fișierele JS necesare incluse în fișierul ZIP.
Adăugarea unui script de completare automată la formularul de căutare poate ajuta utilizatorii dvs. să navigheze mai ușor pe site-ul dvs. Aceasta înseamnă o experiență globală mai bună, care, sperăm, va duce la mai multe vizite repetate și la un trafic mai mare. Acest plugin trebuie doar să fie activat pentru ca acesta să funcționeze cu formularele de căutare.
Dacă aveți comentarii sau feedback despre ceva ce ați citit mai sus, vă rugăm să discutați mai jos.
