Automaattisen täydennyshaun tekeminen WordPressissä koodilla

Tämä opetusohjelma on sinulle, joka haluat toteuttaa automaattisen täydennyksen haun WordPressissä, jossa voimme täysin hallita palautettuja osumia.

Käytämme automaattista täydennystä tavalliseen WordPress-hakuun, mutta koodi on erittäin joustava, jotta voit mukauttaa kyselyn tarpeisiisi. Olipa kyseessä tarkempi kysely mukautetun viestityypin, viestin metan, luokkien tai täysin erityyppisen sisällön, kuten käyttäjien, tai tietokannan manuaalisen kyselyn perusteella. Voit myös helposti käyttää automaattista täydennystä mukautetussa haussa tavallisen WordPress-haun sijaan.

Mitä teemme

Automaattinen täydennys on käyttöliittymäruutu, joka näkyy hakukentän alla ja näyttää osumat kirjoittaessasi. Kun napsautat ottelua, selain lähettää sinut kyseisen viestin pysyvään linkkiin. Tämä tarjoaa loppukäyttäjälle nopeamman tavan navigoida sisällössäsi, koska heidän ei tarvitse tehdä ylimääräistä kiertotietä hakutulossivullesi. Käytämme AJAXia otteluiden jatkuvaan päivittämiseen käyttäjän kirjoittaessa.

Automaattinen täydennys luodaan jQuery UI Autocompleten avulla, skripti, joka sisältyy WordPressiin oletuksena.

Koodin asettaminen

Sinun on lisättävä koodi joko teeman functions.phptai aktiivisen lisäosan PHP-tiedostoon. Tämä opetusohjelma perustuu sen lisäämiseen teemaan. Säädä polut sopivaksi projektiisi.

Ensimmäinen vaihe on Javascript-tiedoston luominen, joka sisältää koodimme automaattisen täydennyksen käynnistämiseksi. Mitä tulee tähän opetusohjelmaan, luon tyhjän autocomplete.jstiedoston teemani assets/js/kansioon. Voit päättää, minne sijoitat tiedoston, muista vain säätää alla olevia polkuja. Palaamme tähän tiedostoon, kun olemme lisänneet tämän tiedoston oikein WordPressiin.

Skriptien ja tyylien jonottaminen

Meidän on asetettava jonoon automaattisen täydennyksen Javascript-tiedostomme ja meidän on myös varmistettava, että jQuery ja jQuery UI Autocomplete asetetaan jonoon. Lisäksi WordPress ei sisällä jQuery-käyttöliittymäkirjastojen tyyliä, joten meidän on myös lisättävä jQuery-käyttöliittymän tyylitaulukko Google CDN:stä. Tämä on tietysti valinnainen. Voit lisätä CSS:n jollain muulla tavalla tai ehkä mieluummin muotoilla sen itse.

Panemme kaikki komentosarjat ja tyylit jonoon funktioon, joka on koukussa 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);
});

Yllä oleva [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)()funktiokutsu lisää juuri luodun Javascript-tiedostomme oikeilla riippuvuuksilla (joukko kolmantena parametrina). Tämä varmistaa, että WordPress lisää jQuery- ja jQuery UI Autocomplete -skriptit WordPress-esiintymään.

Seuraavaksi meidän on annettava joitain muuttujia, joita voimme käyttää automaattisen täydennyksen komentosarjastamme. Meidän on tiedettävä AJAX-URL-osoite, ja haluamme myös lisätä nonce -koodin turvallisuuden vuoksi. Voimme tehdä tämän käyttämällä [wp_localize_script](https://developer.wordpress.org/reference/functions/wp_localize_script/)():

Funktio wp_localize_script()luo globaalin Javascript-muuttujan AutocompleteSearch, jossa on kaksi ominaisuutta; ajax_urlja ajax_nonce. Tämän avulla voimme automaattisesti täydennettävässä Javascript-tiedostossamme hakea esimerkiksi WordPressin AJAX-URL-osoitteen arvon AutocompleteSearch.ajax_url.

Lopuksi meidän on lisättävä hieman tyyliä. Kuten mainittiin, WordPress ei sisällä jQuery-käyttöliittymän tyyliä, joten meidän on lisättävä niitä itse. Olen valinnut tyylitaulukon lisäämisen Google CDN :n kautta. Mutta meidän on tiedettävä jQuery-käyttöliittymän versionumero, jotta voimme noutaa sen tyylitaulukon. Voisimme koodata versionumeron, mutta en ole kovakoodauksen ystävä. Alta löydät kivan tempun WordPressiin tallennettujen jQuery-käyttöliittymän versiotietojen hyödyntämiseen.

Käytämme [wp_enqueue_style](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)()rekisteröintiä ja lisäämään uusi tyylitaulukko, jossa on annettu CDN-polku toisena argumenttina. Käytämme funktion antamia tietoja kelvollisen jQuery-käyttöliittymän versionumeron hakemiseksi [wp_scripts](https://developer.wordpress.org/reference/functions/wp_scripts/)().

Ja siinä kaikki, mitä tarvitsemme skriptien jonottamiseen!

Automaattisesti täydentävän Javascriptin kirjoittaminen

Palataan autocomplete.jstiedostoomme. Tiedämme, että kun tämä komentosarja ladataan, jQuery ja jQuery UI Autocomplete on jo ladattu, ja meillä on myös pääsy globaaliin muuttujaan, jossa on tarvittavat tiedot. Aloitetaan määrittämällä jQuery-dokumenttivalmiustoiminto varmistaaksemme, että koodimme suoritetaan sen jälkeen, kun DOM on valmis.

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

Jos viittaamme jQuery-käyttöliittymän automaattisen täydennyksen dokumentaatioon, opimme, että meidän on tehtävä jQuery-valitsin, joka kohdistaa syöttökenttään, ja suoritettava funktio autocomplete()siinä.

Tämä on kohta, jossa voit muokata koodia tarpeidesi mukaan. Tämä opetusohjelma käyttää automaattista täydennystä tavalliseen WordPress-hakukenttään (joka yleensä lisätään teemaan sisällyttämällä hakumalli tai widget). Hakusyötteen luokkien nimet voivat vaihdella teemasta toiseen. Mutta saatat haluta kohdistaa mukautettuun syöttökenttään tai etsiä erityisestä mallista. Sinun tarvitsee vain muuttaa jQuery-valitsin kohdistamaan haluamasi syöte.

Teemassani WordPressin vakiohakukentän syötteen luokka on .search-field. Lisään myös ylälomakkeen luokan nimen kaventaakseni sitä entisestään, jotta emme vaaranna, että automaattista täydennystä sovelletaan johonkin muuhun samaa luokkaa käyttävään.

Automaattisen täydennyksen dokumentaation mukaan voimme suorittaa AJAX-kutsun ominaisuudessa source(jonka on palautettava joukko kohteita näytettäväksi automaattisessa täydennyksessä). Käytämme jQueryn Ajax-funktiota tähän:

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);
                }
            });
        },
    });
});

Rivillä #2kerromme jQuery UI Autocompletelle, mihin syöttökenttään haluamme käyttää automaattista täydennystä. Muuta tämä valitsin tarpeidesi mukaan.

Yksinkertaisimmassa muodossa automaattinen täydennys odottaa joukon nimikeobjekteja sourceominaisuuteen. Tässä luomme funktion kahdella parametrilla; requestsisältää tietoja syötetystä arvostamme (request.term), responsejoka on takaisinsoittotoiminto, jota meidän on kutsuttava ja annettava tiedot. Näin teemme AJAX:n successfunktiossa rivillä #13.

Itse AJAX-puhelu on melko vakio. Määritämme tietotyypiksi JSON – tämä on tärkeää, muuten jQuery UI Autocomplete ei pysty jäsentämään tuloksia. Kun urlkäytämme ajax_urlglobaalia muuttujaa, lokalisoimme skriptimme aiemmin; AutocompleteSearch. Ja kun dataohitamme tiedon kohteen. Ominaisuus actionon pakollinen ja välttämätön seuraavaa vaihetta varten – joka on tämän AJAX-pyynnön tunnistaminen PHP:ssä. Välitämme myös syötetyt termit syötteessä ja nonce turvallisuussyistä.

Siinä se sourcesomaisuudelle. On vielä yksi asia, joka meidän on lisättävä automaattiseen täydennykseen. Oletuksena jQuery-käyttöliittymän automaattisessa täydennyksessä kohteen valitseminen yksinkertaisesti täyttää syötteen automaattisesti valitulla elementillä. Haluamme ohjata käyttäjän julkaisun URL-osoitteeseen valitessaan kohteen luettelosta. Joten lisäämme selectominaisuuteen funktion:

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

Palaamme AJAX-kutsusta (kirjoitamme tämän seuraavaksi) kohteiden joukossa jokainen kohde, jolla on ominaisuuksia. Lisäämme linkjokaiseen kohteeseen mukautetun ominaisuuden (ui.item), joka sisältää pysyvät linkit jokaiseen viestiin. Välitämme tämän URL-osoitteen, [window.location.href](https://www.w3schools.com/js/js_window_location.asp)joka käynnistää selaimen uudelleenohjauksen.

Ja siinä kaikki Javascript-osalle! Jäljelle jää vain PHP-osan kirjoittaminen, joka kuuntelee AJAX-pyyntöjä toiminnolla autocompleteSearch.

PHP-tulosten palauttaminen AJAX-pyyntöihin

Kirjoittaaksemme toimintoja, jotka vastaavat tiettyihin AJAX-pyyntöihin, käytämme koukkuja wp_ajax_{action}(sisäänkirjautuneet vierailijat) ja wp_ajax_nopriv_{action}(kirjautumattomat vierailijat). Määritimme toiminnon kuten autocompleteSearchyllä olevassa AJAX-pyynnössämme. Katso viestiäni, joka selittää, kuinka AJAX toimii WordPressissä, jos et ole perehtynyt tähän.

Asetetaan tämä sisään functions.php(tai mihin tahansa PHP:ssä, johon lisäät koodisi):

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

Yllä olevalla koodilla kytkemme saman toiminnon kahteen AJAX-koukkuun. Kaikissa wp_ajax AJAX-koukkuihin kytketyissä funktioissa meidän on varmistettava, että se on aina die()tai exitlopussa, jotta emme toista ei-toivottua tulosta. Käytän WordPress- [wp_die](https://developer.wordpress.org/reference/functions/wp_die/)()toimintoa.

Voimme hakea välitetyt tiedot Javascriptistä käyttämällä $_REQUEST(toimii sekä GET- että POST-pyynnöissä). Javascript-koodissamme välitimme syötetyn termin avaimessa ‘ term‘. Tämä tarkoittaa, että voimme hakea sen arvon $_REQUEST['term']. Voimme sitten suorittaa kyselyn tämän perusteella. Muista, että haluamme palauttaa vain tuloksia, jotka vastaavat tätä hakutermiä.

Tämä on toinen kohta, jossa voit muuttaa ja muokata koodia täysin tarpeidesi mukaan. Tämä opetusohjelma suorittaa standardin kyselyn viesteistä ja sivuista, mutta voit muokata kyselyä tai suorittaa täysin erilaisen kyselyn eri tiedoille. Ehkä haluat mieluummin tai sinun täytyy suorittaa manuaalinen SQL-kysely (se on varmasti muistitehokkaampi). Ratkaiseva osa tässä on matriisi, jonka toistamme lopussa ja jonka jäsentää Javascriptin automaattinen täydennyskoodi.

Ensin tarkistamme, oliko nonce voimassa AJAX-puhelujemme turvallisuuden luomiseksi. Voimme tehdä tämän kutsumalla funktiota [check_ajax_referer](https://developer.wordpress.org/reference/functions/check_ajax_referer/)(). Olen myös lisännyt koodin varmistaakseni, että emme suorita raskasta pyyntöä, jos palautettu hakutermi on tyhjä. Meidän pitäisi sitten palauttaa tyhjä json-koodattu taulukko.

Yllä oleva esimerkkikoodi suorittaa [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)haun syötetylle termille. Meidän on posts_per_pagevarmistettava -1, että palaamme kaikki ottelut. Tarkista dokumentaatio, WP_Queryjos haluat muokata kyselyä edelleen.

Kierrämme sitten tulokset (rivi #17) ja täytämme taulukon osumilla (rivi #19-23). jQuery-käyttöliittymän automaattinen täydennys tarvitsee vähintään ominaisuuden labelilmaisemaan, mitä automaattisen täydennyksen ruudussa pitäisi näyttää. Välitämme myös pysyvät linkit avaimessa ‘ link‘, jota käytämme Javascript-koodissamme käyttäjän uudelleenohjaukseen.

Lopuksi rivillä #27toistamme luodun taulukon JSON-muodossa käyttämällä [json_encode](https://www.php.net/manual/en/function.json-encode.php)().

Kun tämä PHP-osa on käytössä, automaattisen täydennyksen pitäisi toimia! Päivitä sivustosi ja kokeile sitä!

Valinnaiset parannukset

Yksi yleinen ongelma on, että osumia on liikaa ja automaattisen täydennyksen laatikko tulee liian suureksi. Tähän on kaksi ratkaisua.

Yksi ratkaisu on lisätä ominaisuus minLengthfunktioon autocomplete()Javascriptissä. Tämä ominaisuus käynnistää automaattisen täydennyksen ruudun vasta, kun tietty määrä merkkejä on syötetty. Esimerkkinä voimme vaatia vähintään 3 merkkiä ennen automaattisen täydennyksen käynnistämistä:

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

jQuery UI Autocomplete ehdottaa tässä toista ratkaisua. Siinä on esimerkki CSS:n lisäämisestä kiinteän korkeuden lisäämiseksi ja sisäisen vierityspalkin lisäämisestä automaattisen täydennyksen ruutuun.

Johtopäätös ja täydellinen koodi

Olemme onnistuneesti lisänneet automaattisen täydennyksen WordPressin hakutoimintoihin, joissa voimme täysin hallita palautettavia osumia. Se antaa vierailijoille nopeamman tavan navigoida sisällössäsi, koska osuman napsauttaminen ohjaa suoraan viestiin sen sijaan, että lähdettäisiin ensin hakutulossivulle. Automaattisen täydennyksen käyttöönotto ei välttämättä aina ole järkevää kaikissa WordPress-sivustoissa, mutta se voi olla loistava tapa etsiä tiettyä sisältöä tai erityisiä malleja!

Tässä lopullinen koodi kokonaisuudessaan:

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;
        },
    });
});