WordPressis automaatse täitmise otsingu tegemine koodiga

See õpetus on mõeldud teile, kes soovite WordPressis rakendada automaatse täitmise otsingut, kus meie kontrollime tagastatud vasteid täielikult.

Rakendame standardsele WordPressi otsingule automaatse täitmise, kuid kood on väga paindlik, et saaksite päringut oma vajadustele vastavaks kohandada. Olgu see siis spetsiifilisem päring kohandatud postituse tüübi, postituse meta, kategooriate või täiesti erinevat tüüpi sisu (nt kasutajad) või mõne andmebaasi käsitsi esitatud päringuga. Automaatse täitmise saate hõlpsalt rakendada ka kohandatud otsingusisendile WordPressi standardotsingu asemel.

Mida me teeme

Automaatne täitmine on kasutajaliidese kast, mis kuvatakse tippimise ajal otsinguvälja all ja näitab vasteid. Kui klõpsate vastel, saadab brauser teid selle postituse püsilingile. See annab lõppkasutajale kiirema viisi teie sisus navigeerimiseks, kuna nad ei pea teie otsingutulemuste lehele lisapõike tegema. Kasutame vastete pidevaks värskendamiseks kasutaja tippimise ajal AJAX-i.

Automaatne täitmine luuakse skripti jQuery UI Autocomplete abil, mis sisaldub WordPressis vaikimisi.

Koodi seadistamine

Peate lisama koodi kas teema functions.phpvõi aktiivsesse pistikprogrammi PHP-faili. See õpetus põhineb selle lisamisel teemasse. Kohandage teid oma projektiga sobivaks.

Esimene samm on Javascripti faili loomine, mis sisaldab meie koodi automaatse täitmise käivitamiseks. Selle õpetuse osas loon autocomplete.jsoma teema assets/js/kausta tühja faili. See, kuhu faili paigutate, on teie otsustada, pidage meeles, et kohandage allolevaid teid. Tuleme selle faili juurde tagasi pärast seda, kui oleme selle faili WordPressis korralikult järjekorda paigutanud.

Skriptide ja stiilide järjestamine

Peame järjekorda panema oma automaatse täitmise Javascripti faili ning veenduma ka jQuery ja jQuery kasutajaliidese automaatse täitmise järjekorda panemises. Lisaks ei sisalda WordPress jQuery kasutajaliidese teekide jaoks ühtegi stiili, seega peame ka jQuery kasutajaliidese jaoks laaditabeli Google CDN-ist järjekorda lisama. See on muidugi vabatahtlik. Saate CSS-i lisada muul viisil või eelistate seda ise kujundada.

Paneme kõik skriptid ja stiilid järjekorda funktsiooniga, mis on ühendatud wp_enqueue_scripts:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '/assets/js/autocomplete.js', 
        ['jquery', 'jquery-ui-autocomplete'], null, true);
});

Ülaltoodud [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)()funktsioonikutse lisab meie vastloodud Javascripti faili õigete sõltuvustega (kolmanda parameetrina massiiv). See tagab, et WordPress lisab meie WordPressi eksemplari jQuery ja jQuery kasutajaliidese automaatse täitmise skriptid.

Järgmisena peame esitama mõned muutujad, millele pääseme juurde meie automaatse täitmise skripti kaudu. Peame teadma AJAX-i URL-i ja tahame turvalisuse huvides lisada ka nonce’i. Saame seda teha kasutades [wp_localize_script](https://developer.wordpress.org/reference/functions/wp_localize_script/)():

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '/assets/js/autocomplete.js', 
        ['jquery', 'jquery-ui-autocomplete'], null, true);
    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')
    ]);
});

Funktsioon wp_localize_script()loob globaalse Javascripti muutuja AutocompleteSearchkahe atribuudiga; ajax_urlja ajax_nonce. Selle abil saame oma automaatse täitmisega Javascripti failis tuua näiteks WordPressi AJAX-i URL-i väärtuse koos AutocompleteSearch.ajax_url.

Lõpuks peame lisama veidi stiili. Nagu mainitud, ei ole WordPressiga kaasas ühtegi jQuery kasutajaliidese stiili, seega peame mõned ise lisama. Olen valinud stiilitabeli lisamise Google’i CDN -i kaudu. Kuid selle stiilitabeli toomiseks peame teadma jQuery kasutajaliidese versiooninumbrit. Võiksime versiooninumbri kõvasti kodeerida, aga ma ei ole millegi kõvakodeerimise fänn. Altpoolt leiate toreda nipi, kuidas WordPressis salvestatud jQuery kasutajaliidese versiooniteavet edasi kasutada.

add_action('wp_enqueue_scripts', function() {
    ...
 
    $wp_scripts = wp_scripts();
    wp_enqueue_style('jquery-ui-css',
        '//ajax.googleapis.com/ajax/libs/jqueryui/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '/themes/smoothness/jquery-ui.css',
        false, null, false
    );
});

Kasutame [wp_enqueue_style](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)()registreerimiseks ja uue stiilitabeli lisamiseks teise argumendina esitatud CDN-i teega. Kehtiva jQuery kasutajaliidese versiooninumbri toomiseks kasutame funktsioonist saadud teavet [wp_scripts](https://developer.wordpress.org/reference/functions/wp_scripts/)().

Ja see on kõik, mida vajame skriptide järjekorda seadmiseks!

Automaatselt täidetava Javascripti kirjutamine

Tuleme tagasi oma autocomplete.jsfaili juurde. Teame, et selle skripti laadimisel on jQuery ja jQuery kasutajaliidese automaatne täitmine juba laaditud ning meil on juurdepääs ka globaalsele muutujale koos vajaliku teabega. Alustame jQuery dokumendi valmidusfunktsiooni seadistamisega, et tagada meie koodi käitamine pärast seda, kui DOM on valmis.

jQuery(function($) {
    // All code in here
});

Kui viitame jQuery kasutajaliidese automaatse täitmise dokumentatsioonile, saame teada, et peame looma jQuery valija, mis sihiks sisendvälja, ja käivitama sellel funktsiooni autocomplete().

See on punkt, kus saate koodi oma vajadustele vastavaks kohandada. See õpetus rakendab automaatse täitmise standardsele WordPressi otsinguväljale (mis lisatakse tavaliselt teemasse, lisades otsingumalli või vidina). Otsingusisendi klassinimed võivad teemati erineda. Kuid võite sihtida kohandatud sisestusvälja või otsida spetsiaalset malli. Kõik, mida pead tegema, on muuta jQuery valijat soovitud sisendi sihtimiseks.

Minu teemas on standardse WordPressi otsinguvälja sisendi klass .search-field. Lisan ka emavormi klassi nime, et seda veelgi kitsendada, et me ei riskiks sellega, et automaatne täitmine rakendub millelegi muule sama klassi kasutamisel.

Vastavalt automaatse täitmise dokumentatsioonile saame atribuudis teha AJAX-i kõne source(mis peab tagastama automaatse täitmisega kuvatavate üksuste massiivi). Selleks kasutame jQuery Ajaxi funktsiooni :

jQuery(function($) {
    $('.search-form .search-field').autocomplete({
        source: function(request, response) {
            $.ajax({
                dataType: 'json',
                url: AutocompleteSearch.ajax_url,
                data: {
                    term: request.term,
                    action: 'autocompleteSearch',
                    security: AutocompleteSearch.ajax_nonce,
                },
                success: function(data) {
                    response(data);
                }
            });
        },
    });
});

Rida #2on koht, kus me ütleme jQuery kasutajaliidese automaatsele täitmisele, millisele sisestusväljale soovime automaatse täitmise rakendada. Muutke seda valijat vastavalt oma vajadustele.

Kõige lihtsamal kujul ootab automaatne täitmine atribuudile üksuseobjektide massiivi source. Siin loome kahe parameetriga funktsiooni; requestsisaldab teavet meie sisestatud väärtuse (request.term) kohta, responsemis on tagasihelistamisfunktsioon, mida peame helistama ja andmeid esitama. Seda me teeme AJAX-i successfunktsioonis real #13.

AJAX-kõne ise on üsna tavaline. Määrame andmetüübiks JSON – see on oluline, vastasel juhul ei saa jQuery kasutajaliidese automaatne täitmine tulemusi sõeluda. Globaalses muutujas ligi urlpääsedes ajax_urllokaliseerisime oma skripti varem; AutocompleteSearch. Ja kui datame infoobjektist möödume. Atribuut actionon kohustuslik ja vajalik järgmise sammu jaoks, milleks on selle konkreetse AJAX-i päringu tuvastamine PHP-s. Samuti anname turvalisuse huvides edasi sisestatud termini sisendis ja nonce.

See on sourcesvara jaoks. Meil on veel üks asi, mille peame oma automaatse täitmise skripti lisama. jQuery kasutajaliidese automaatse täitmise vaikeseadena täidab üksuse valimine lihtsalt sisendi valitud elemendiga automaatselt. Soovime kasutaja loendist üksuse valimisel ümber suunata postituse URL-ile. Seega lisame selectatribuudile funktsiooni:

                ...
                success: function(data) {
                    response(data);
                }
            });
        },      
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
    });
});

Üksuste massiivi naaseme oma AJAX-i kõnest (kirjutame selle järgmisena) iga üksus on omadustega objekt. Lisame linkigale üksusele (ui.item) kohandatud atribuudi, mis sisaldab iga postituse püsilinke. Edastame selle URL-i, [window.location.href](https://www.w3schools.com/js/js_window_location.asp)mis käivitab brauseri ümbersuunamise.

Ja see on Javascripti osa jaoks kõik! Jääb vaid kirjutada PHP osa, mis kuulab koos toiminguga AJAX-i päringuid autocompleteSearch.

Tulemuste tagastamine PHP-s AJAX-i päringutele

Konkreetsetele AJAX-i päringutele vastavate funktsioonide kirjutamiseks kasutame konkse wp_ajax_{action}(sisselogitud külastajad) ja wp_ajax_nopriv_{action}(sisselogimata külastajad). Määratlesime toimingu nagu autocompleteSearchülaltoodud AJAX-i taotluses. Kui te pole sellega tuttav, vaadake minu postitust, mis selgitab, kuidas AJAX WordPressis töötab .

Seadistame selle sisse functions.php(või kuhu iganes PHP-s koodi lisate):

add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
    // echo result
    die();
}

Ülaltoodud koodiga ühendame sama funktsiooni kahe AJAX-konksuga. Kõikides funktsioonides, mis on ühendatud wp_ajax AJAX konksudega, peame alati die()või exitlõpus tagama, et me ei kajaks välja soovimatuid väljundeid. Kasutan WordPressi [wp_die](https://developer.wordpress.org/reference/functions/wp_die/)()funktsiooni.

Saame edastatud andmeid Javascriptist hankida kasutades $_REQUEST(töötab nii GET kui ka POST päringute puhul). Oma Javascripti koodis edastasime sisestatud termini võtmes ‘ term‘. See tähendab, et saame selle väärtuse hankida $_REQUEST['term']. Seejärel saame selle põhjal päringu sooritada. Pidage meeles, et tahame tagastada ainult sellele otsinguterminile vastavad tulemused.

See on veel üks punkt, kus saate koodi täielikult oma vajadustele vastavaks muuta ja kohandada. See õpetus teeb postituste ja lehtede kohta standardpäringu, kuid saate päringut muuta või teha erinevate andmete kohta täiesti erineva päringu. Võib-olla eelistate või peate selle asemel sooritama käsitsi SQL-päringu (see on kindlasti mälutõhusam). Siin on otsustava tähtsusega massiiv, mida me lõpus kordame ja mida sõelub meie Javascripti automaatse täitmise kood.

add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
    check_ajax_referer('autocompleteSearchNonce', 'security');
    $search_term = $_REQUEST['term'];
    if (!isset($_REQUEST['term'])) {
        echo json_encode([]);
    }
    $suggestions = [];
    $query = new WP_Query([
        's' => $search_term,
        'posts_per_page' => -1,
    ]);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $suggestions[] = [
                'id' => get_the_ID(),
                'label' => get_the_title(),
                'link' => get_the_permalink()
            ];
        }
        wp_reset_postdata();
    }
    echo json_encode($suggestions);
    wp_die();
}

Esmalt kontrollime, kas meie AJAX-kõnede turvalisuse tagamiseks ei kehti. Seda saame teha funktsiooni kutsumisega [check_ajax_referer](https://developer.wordpress.org/reference/functions/check_ajax_referer/)(). Lisasin ka koodi tagamaks, et me ei esitaks rasket päringut, kui tagastatud otsingutermin oli tühi. Seejärel peaksime tagastama tühja json-kodeeringuga massiivi.

Ülaltoodud näitekood sooritab [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)sisestatud termini otsinguga a. Peame tagama posts_per_page, et tagastame kõik tikud. Kui soovite päringut veelgi muuta, -1vaadake dokumentatsiooni .WP_Query

Seejärel vaatame tulemusi läbi (rida #17) ja täidame massiivi vastetega (rida #19-23). jQuery kasutajaliidese automaatne täitmine vajab labelautomaatse täitmise kastis kuvatava sisu tähistamiseks vähemalt võimsust. Samuti edastame püsilingid võtmes ‘ link‘, mida kasutame oma Javascripti koodis kasutaja ümbersuunamiseks.

Lõpuks kordame real #27loodud massiivi JSON-ina, kasutades [json_encode](https://www.php.net/manual/en/function.json-encode.php)().

Kui see PHP osa on paigas, peaks meie automaatne täitmine toimima! Värskendage oma saiti ja proovige seda!

Valikulised täiustused

Üks levinud probleem on see, et vasteid on liiga palju ja automaatse täitmise kast läheb liiga suureks. Sellele on kaks lahendust.

Üks lahendus on lisada atribuut minLengthfunktsioonile autocomplete()Javascriptis. See atribuut käivitab automaatse täitmise kasti alles pärast teatud arvu märkide sisestamist. Näiteks võime enne automaatse täitmise käivitamist nõuda vähemalt 3 tähemärki:

        ...
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
        minLength: 3,
    });
});

jQuery UI Autocomplete pakub siin välja teise lahenduse. See näitab näidet natuke CSS-i lisamisest, et lisada automaatse täitmise kasti fikseeritud kõrgus ja sisemine kerimisriba.

Järeldus ja täielik kood

Oleme edukalt lisanud WordPressi otsingufunktsiooni automaatse täitmise, kus meil on täielik kontroll tagastatavate vastete üle. See annab külastajatele kiirema viisi teie sisus navigeerimiseks, kuna vastel klõpsamine suunab otse postitusele, selle asemel et minna esmalt otsingutulemuste lehele. Automaatse täitmise rakendamine ei pruugi kõigil WordPressi saitidel alati mõttekas olla, kuid see võib olla suurepärane konkreetse sisu või spetsiaalsete mallide otsimiseks!

Siin on lõplik kood tervikuna:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '/assets/js/autocomplete.js', 
        ['jquery', 'jquery-ui-autocomplete'], null, true);
    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')
    ]);
 
    $wp_scripts = wp_scripts();
    wp_enqueue_style('jquery-ui-css',
        '//ajax.googleapis.com/ajax/libs/jqueryui/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '/themes/smoothness/jquery-ui.css',
        false, null, false
    );
});
 
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
    check_ajax_referer('autocompleteSearchNonce', 'security');
 
    $search_term = $_REQUEST['term'];
    if (!isset($_REQUEST['term'])) {
        echo json_encode([]);
    }
 
    $suggestions = [];
    $query = new WP_Query([
        's' => $search_term,
        'posts_per_page' => -1,
    ]);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $suggestions[] = [
                'id' => get_the_ID(),
                'label' => get_the_title(),
                'link' => get_the_permalink()
            ];
        }
        wp_reset_postdata();
    }
    echo json_encode($suggestions);
    wp_die();
}

jQuery(function($) {
    $('.search-form .search-field').autocomplete({
        source: function(request, response) {
            $.ajax({
                dataType: 'json',
                url: AutocompleteSearch.ajax_url,
                data: {
                    term: request.term,
                    action: 'autocompleteSearch',
                    security: AutocompleteSearch.ajax_nonce,
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
    });
});