{"id":233361,"date":"2023-02-12T12:24:00","date_gmt":"2023-02-12T09:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233361"},"modified":"2023-02-16T16:42:10","modified_gmt":"2023-02-16T13:42:10","slug":"wyszukiwanie-autouzupelniania-w-wordpress-z-kodem","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/wyszukiwanie-autouzupelniania-w-wordpress-z-kodem\/","title":{"rendered":"Wyszukiwanie autouzupe\u0142niania w WordPress z kodem"},"content":{"rendered":"\n

Ten samouczek jest dla tych, kt\u00f3rzy chc\u0105 zaimplementowa\u0107 wyszukiwanie autouzupe\u0142niania w WordPress, gdzie mamy pe\u0142n\u0105 kontrol\u0119 nad zwracanymi dopasowaniami.<\/p>\n

Zastosujemy autouzupe\u0142nianie do standardowego wyszukiwania WordPress, ale kod jest bardzo elastyczny, dzi\u0119ki czemu mo\u017cesz dostosowa\u0107 zapytanie do swoich potrzeb. Niezale\u017cnie od tego, czy jest to bardziej szczeg\u00f3\u0142owe zapytanie wed\u0142ug niestandardowego typu postu, meta postu, kategorii lub zapytania dotycz\u0105ce zupe\u0142nie innego rodzaju tre\u015bci, takich jak u\u017cytkownicy lub co\u015b r\u0119cznego z bazy danych. Mo\u017cesz r\u00f3wnie\u017c \u0142atwo zastosowa\u0107 autouzupe\u0142nianie do niestandardowych danych wej\u015bciowych wyszukiwania zamiast standardowego wyszukiwania WordPress.<\/p>\n

Co zrobimy<\/h2>\n

Autouzupe\u0142nianie to pole interfejsu u\u017cytkownika, kt\u00f3re pojawia si\u0119 pod polem wyszukiwania, pokazuj\u0105c dopasowania podczas pisania. Po klikni\u0119ciu na dopasowanie przegl\u0105darka prze\u015ble Ci bezpo\u015bredni link do tego posta. Zapewnia to u\u017cytkownikowi ko\u0144cowemu szybszy spos\u00f3b poruszania si\u0119 po tre\u015bci, poniewa\u017c nie b\u0119dzie musia\u0142 omija\u0107 strony wynik\u00f3w wyszukiwania. U\u017cyjemy AJAX do ci\u0105g\u0142ej aktualizacji dopasowa\u0144 podczas pisania przez u\u017cytkownika.<\/p>\n

\"Wyszukiwanie<\/a><\/p>\n

Autouzupe\u0142nianie jest generowane za pomoc\u0105 jQuery UI Autocomplete<\/a>, skryptu domy\u015blnie zawartego w WordPressie.<\/p>\n

Konfigurowanie kodu<\/h2>\n

B\u0119dziesz musia\u0142 doda\u0107 kod w functions.php<\/code>pliku PHP motywu lub aktywnej wtyczki. Ten samouczek polega na dodaniu go do motywu. Dostosuj \u015bcie\u017cki do swojego projektu.<\/p>\n

Pierwszym krokiem jest utworzenie pliku JavaScript, kt\u00f3ry b\u0119dzie zawiera\u0142 nasz kod uruchamiaj\u0105cy autouzupe\u0142nianie. Je\u015bli chodzi o ten samouczek, utworz\u0119 pusty autocomplete.js<\/code>plik w folderze mojego motywu assets\/js\/<\/code>. To, gdzie umie\u015bcisz plik, zale\u017cy od Ciebie, pami\u0119taj tylko o dostosowaniu poni\u017cszych \u015bcie\u017cek. Powr\u00f3cimy do tego pliku po prawid\u0142owym umieszczeniu go w kolejce w WordPressie.<\/p>\n

Kolejkowanie skrypt\u00f3w i styl\u00f3w<\/h3>\n

Musimy umie\u015bci\u0107 w kolejce nasz autouzupe\u0142niaj\u0105cy plik JavaScript, a tak\u017ce upewni\u0107 si\u0119, \u017ce wstawili\u015bmy do kolejki jQuery i jQuery UI Autocomplete. Ponadto WordPress nie zawiera \u017cadnych styl\u00f3w dla bibliotek jQuery UI, wi\u0119c musimy r\u00f3wnie\u017c zakolejkowa\u0107 arkusz styl\u00f3w dla jQuery UI z Google CDN. Jest to oczywi\u015bcie opcjonalne. Mo\u017cesz doda\u0107 CSS w inny spos\u00f3b, a mo\u017ce wolisz sam go ostylowa\u0107.<\/p>\n

Wszystkie skrypty i style umie\u015bcimy w kolejce w funkcji pod\u0142\u0105czonej do wp_enqueue_scripts<\/code>:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n});<\/code><\/pre>\n
Powy\u017csze [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>wywo\u0142anie funkcji doda nasz nowo utworzony plik JavaScript z poprawnymi zale\u017cno\u015bciami (tablica jako trzeci parametr). Gwarantuje to, \u017ce WordPress doda skrypty jQuery i jQuery UI Autocomplete w naszej instancji WordPress.<\/p>\n
Nast\u0119pnie musimy poda\u0107 kilka zmiennych, do kt\u00f3rych mo\u017cemy uzyska\u0107 dost\u0119p z naszego skryptu autouzupe\u0142niania. Musimy zna\u0107 adres URL AJAX, a tak\u017ce chcemy doda\u0107 jednorazow\u0105<\/a> warto\u015b\u0107 dla bezpiecze\u0144stwa. Mo\u017cemy to zrobi\u0107 za pomoc\u0105 [wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n});<\/code><\/pre>\n
Funkcja wp_localize_script()<\/code>utworzy globaln\u0105 zmienn\u0105 JavaScript AutocompleteSearch<\/code>z dwiema w\u0142a\u015bciwo\u015bciami; ajax_url<\/code>i ajax_nonce<\/code>. Dzi\u0119ki temu mo\u017cemy w naszym autouzupe\u0142nianym pliku JavaScript pobra\u0107 na przyk\u0142ad warto\u015b\u0107 adresu URL WordPress AJAX z AutocompleteSearch.ajax_url<\/code>.<\/p>\n
Na koniec musimy doda\u0107 troch\u0119 stylizacji. Jak wspomniano, WordPress nie zawiera \u017cadnych styl\u00f3w jQuery UI, wi\u0119c musimy doda\u0107 troch\u0119 sami. Zdecydowa\u0142em si\u0119 doda\u0107 arkusz styl\u00f3w przez Google CDN<\/a>. Ale musimy zna\u0107 numer wersji jQuery UI, aby pobra\u0107 arkusz styl\u00f3w. Mogliby\u015bmy zakodowa\u0107 numer wersji na sztywno, ale nie jestem fanem zapisywania niczego na sztywno. Poni\u017cej znajdziesz fajn\u0105 sztuczk\u0119, kt\u00f3ra pozwoli wyprzedzi\u0107 informacje o wersji jQuery UI przechowywane w WordPressie.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    ...\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});<\/code><\/pre>\n
U\u017cywamy [wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>do zarejestrowania i dodania nowego arkusza styl\u00f3w z podan\u0105 \u015bcie\u017ck\u0105 CDN jako drugim argumentem. W celu pobrania prawid\u0142owego numeru wersji jQuery UI korzystamy z informacji dostarczonych z funkcji [wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n
I to wszystko, czego potrzebujemy do kolejkowania skrypt\u00f3w!<\/p>\n
Pisanie autouzupe\u0142niania JavaScript<\/h3>\n
Wr\u00f3\u0107my do naszych autocomplete.js<\/code>akt. Wiemy, \u017ce kiedy ten skrypt jest za\u0142adowany, jQuery i jQuery UI Autocomplete s\u0105 ju\u017c za\u0142adowane, a tak\u017ce mamy dost\u0119p do zmiennej globalnej z niezb\u0119dnymi informacjami. Zacznijmy od skonfigurowania funkcji gotowo\u015bci dokumentu jQuery, aby upewni\u0107 si\u0119, \u017ce nasz kod zostanie uruchomiony po przygotowaniu DOM.<\/p>\n
jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n
Je\u015bli odwo\u0142amy si\u0119 do dokumentacji autouzupe\u0142niania jQuery UI, dowiemy<\/a> si\u0119, \u017ce musimy utworzy\u0107 selektor jQuery nakierowany na pole wej\u015bciowe i uruchomi\u0107 na autocomplete()<\/code>nim funkcj\u0119.<\/p>\n
Jest to punkt, w kt\u00f3rym mo\u017cesz dostosowa\u0107 kod do swoich potrzeb. Ten samouczek zastosuje autouzupe\u0142nianie do standardowego pola wyszukiwania WordPress (kt\u00f3re jest zwykle dodawane do motywu poprzez do\u0142\u0105czenie szablonu wyszukiwania lub jako wid\u017cet). Nazwy klas danych wej\u015bciowych wyszukiwania mog\u0105 si\u0119 r\u00f3\u017cni\u0107 w zale\u017cno\u015bci od motywu. Ale mo\u017cesz chcie\u0107 kierowa\u0107 na niestandardowe pole wprowadzania lub wyszukiwa\u0107 w specjalnym szablonie. Wszystko, co musisz zrobi\u0107, to zmieni\u0107 selektor jQuery tak, aby kierowa\u0107 na dane wej\u015bciowe, kt\u00f3re chcesz.<\/p>\n
W moim motywie standardowe pole wyszukiwania WordPress ma klas\u0119 .search-field<\/code>. Dodaj\u0119 r\u00f3wnie\u017c nazw\u0119 klasy formularza nadrz\u0119dnego, aby jeszcze bardziej j\u0105 zaw\u0119zi\u0107, wi\u0119c nie ryzykujemy zastosowania autouzupe\u0142niania do czego\u015b innego przy u\u017cyciu tej samej klasy.<\/p>\n
Zgodnie z dokumentacj\u0105 Autocomplete mo\u017cemy wykona\u0107 wywo\u0142anie AJAX we w\u0142a\u015bciwo\u015bci source<\/code>(kt\u00f3ra musi zwr\u00f3ci\u0107 tablic\u0119 element\u00f3w do wy\u015bwietlenia w autouzupe\u0142nianiu). W tym celu u\u017cyjemy funkcji Ajax jQuery<\/a> :<\/p>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n    });\n});<\/code><\/pre>\n
W wierszu #2<\/code>m\u00f3wimy jQuery UI Autocomplete na kt\u00f3rym polu wej\u015bciowym chcemy zastosowa\u0107 autouzupe\u0142nianie. Zmie\u0144 ten selektor, aby dopasowa\u0107 go do swoich potrzeb.<\/p>\n
W najprostszej formie Autouzupe\u0142nianie oczekuje tablicy obiekt\u00f3w pozycji do source<\/code>w\u0142a\u015bciwo\u015bci. Tutaj tworzymy funkcj\u0119 z dwoma parametrami; request<\/code>zawiera informacje o wprowadzonej przez nas warto\u015bci (request.term<\/code>) oraz response<\/code>funkcji zwrotnej, kt\u00f3r\u0105 musimy wywo\u0142a\u0107 i poda\u0107 dane. To w\u0142a\u015bnie robimy w funkcji AJAX success<\/code>w line #13<\/code>.<\/p>\n
Samo wywo\u0142anie AJAX jest do\u015b\u0107 standardowe. Definiujemy typ danych jako JSON \u2013 jest to wa\u017cne, w przeciwnym razie autouzupe\u0142nianie jQuery UI nie b\u0119dzie w stanie przeanalizowa\u0107 wynik\u00f3w. Poniewa\u017c url<\/code>uzyskujemy dost\u0119p ajax_url<\/code>do zmiennej globalnej, zlokalizowali\u015bmy j\u0105 wcze\u015bniej w naszym skrypcie; AutocompleteSearch<\/code>. I jak data<\/code>mijamy obiekt informacji. W\u0142a\u015bciwo\u015b\u0107 action<\/code>jest obowi\u0105zkowa i niezb\u0119dna do nast\u0119pnego kroku \u2013 czyli identyfikacji tego konkretnego \u017c\u0105dania AJAX w PHP. Przekazujemy r\u00f3wnie\u017c wprowadzony termin w wej\u015bciu i nonce ze wzgl\u0119d\u00f3w bezpiecze\u0144stwa.<\/p>\n
To wszystko na sources<\/code>w\u0142asno\u015b\u0107. Jest jeszcze jedna rzecz, kt\u00f3r\u0105 musimy doda\u0107 do naszego skryptu autouzupe\u0142niania. Domy\u015blnie w jQuery UI Autocomplete wybieranie elementu po prostu automatycznie wype\u0142nia dane wej\u015bciowe wybranym elementem. Chcemy przekierowa\u0107 u\u017cytkownika na adres URL posta przy wyborze pozycji z listy. Wi\u0119c dodajemy funkcj\u0119 do select<\/code>w\u0142a\u015bciwo\u015bci:<\/p>\n
                ...\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },      \n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
W tablicy element\u00f3w, kt\u00f3re zwr\u00f3cimy z naszego wywo\u0142ania AJAX (o czym napiszemy dalej), ka\u017cdy element jest obiektem z w\u0142a\u015bciwo\u015bciami. Do ka\u017cdego elementu () dodamy niestandardow\u0105 link<\/code>w\u0142a\u015bciwo\u015b\u0107 ui.item<\/code>, kt\u00f3ra b\u0119dzie zawiera\u0142a linki bezpo\u015brednie do ka\u017cdego posta. Przekazujemy ten adres URL, na [window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>kt\u00f3ry wywo\u0142a przekierowanie przegl\u0105darki.<\/p>\n
I to wszystko dla cz\u0119\u015bci JavaScript! Pozostaje tylko napisa\u0107 cz\u0119\u015b\u0107 PHP, kt\u00f3ra nas\u0142uchuje \u017c\u0105da\u0144 AJAX za pomoc\u0105 akcji autocompleteSearch<\/code>.<\/p>\n
Zwracanie wynik\u00f3w w PHP do \u017c\u0105da\u0144 AJAX<\/h3>\n
W celu napisania funkcji odpowiadaj\u0105cych na konkretne \u017c\u0105dania AJAX wykorzystujemy hooki wp_ajax_{action}<\/code>(zalogowani go\u015bcie) i wp_ajax_nopriv_{action}<\/code>(niezalogowani go\u015bcie). Zdefiniowali\u015bmy akcj\u0119 tak, jak autocompleteSearch<\/code>w powy\u017cszym \u017c\u0105daniu AJAX. Zapoznaj si\u0119 z moim postem, kt\u00f3ry wyja\u015bnia, jak AJAX dzia\u0142a w WordPressie<\/a>, je\u015bli nie znasz tego.<\/p>\n
Ustawmy to w functions.php<\/code>(lub gdziekolwiek w PHP dodasz sw\u00f3j kod):<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    \/\/ echo result\n    die();\n}<\/code><\/pre>\n
W powy\u017cszym kodzie podpinamy t\u0119 sam\u0105 funkcj\u0119 do dw\u00f3ch hook\u00f3w AJAX. We wszystkich funkcjach, kt\u00f3re s\u0105 zaczepione do zaczep\u00f3w wp_ajax AJAX, musimy upewni\u0107 si\u0119, \u017ce zawsze die()<\/code>lub exit<\/code>na ko\u0144cu, aby nie wywo\u0142ywa\u0107 niepo\u017c\u0105danego wyniku. Korzystam z [wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>funkcji WordPressa.<\/p>\n
Mo\u017cemy pobra\u0107 przekazane dane z Javascriptu $_REQUEST<\/code>(dzia\u0142a zar\u00f3wno dla \u017c\u0105da\u0144 GET, jak i POST). W naszym kodzie JavaScript przekazali\u015bmy termin wprowadzony w kluczu \u201e term<\/code>". Oznacza to, \u017ce mo\u017cemy pobra\u0107 jego warto\u015b\u0107 w $_REQUEST['term']<\/code>. Na tej podstawie mo\u017cemy wykona\u0107 zapytanie. Pami\u0119taj, \u017ce chcemy zwraca\u0107 tylko wyniki pasuj\u0105ce do tego wyszukiwanego has\u0142a.<\/p>\n
To kolejny punkt, w kt\u00f3rym mo\u017cesz w pe\u0142ni zmieni\u0107 i dostosowa\u0107 kod do swoich potrzeb. Ten samouczek wykona standardowe zapytanie na postach i stronach, ale mo\u017cesz dostosowa\u0107 zapytanie lub wykona\u0107 zupe\u0142nie inne zapytanie na r\u00f3\u017cnych danych. By\u0107 mo\u017ce wolisz lub musisz wykona\u0107 r\u0119czne zapytanie SQL (z pewno\u015bci\u0105 jest to bardziej wydajne pod wzgl\u0119dem pami\u0119ci). Kluczow\u0105 cz\u0119\u015bci\u0105 jest tablica, kt\u00f3rej echo pojawia si\u0119 na ko\u0144cu, kt\u00f3ra jest analizowana przez kod autouzupe\u0142niania naszego JavaScriptu.<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
Najpierw sprawdzamy, czy numer jednorazowy by\u0142 prawid\u0142owy, aby zapewni\u0107 pewne bezpiecze\u0144stwo naszych wywo\u0142a\u0144 AJAX. Mo\u017cemy to zrobi\u0107, wywo\u0142uj\u0105c funkcj\u0119 [check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Doda\u0142em r\u00f3wnie\u017c kod, aby upewni\u0107 si\u0119, \u017ce nie wykonamy du\u017cego \u017c\u0105dania, je\u015bli zwr\u00f3cony wyszukiwany termin jest pusty. Powinni\u015bmy wtedy zwr\u00f3ci\u0107 pust\u0105 tablic\u0119 zakodowan\u0105 w formacie json.<\/p>\n
Powy\u017cszy przyk\u0142adowy kod wykonuje a [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>z wyszukiwaniem wprowadzonego terminu. Musimy ustawi\u0107 posts_per_page<\/code>tak, -1<\/code>aby zapewni\u0107, \u017ce zwr\u00f3cimy wszystkie mecze. Zapoznaj si\u0119 z dokumentacj\u0105 WP_Query<\/code>, je\u015bli chcesz jeszcze bardziej ulepszy\u0107 zapytanie.<\/p>\n
Nast\u0119pnie przegl\u0105damy wyniki w p\u0119tli (line #17<\/code>) i wype\u0142niamy tablic\u0119 dopasowaniami (line #19-23<\/code>). Autouzupe\u0142nianie jQuery UI wymaga co najmniej uprawnie\u0144 label<\/code>do oznaczania, co powinno by\u0107 wy\u015bwietlane w polu autouzupe\u0142niania. Przekazujemy r\u00f3wnie\u017c permalinki w kluczu \u201e link<\/code>„, kt\u00f3rego u\u017cywamy w naszym kodzie JavaScript do przekierowywania u\u017cytkownika.<\/p>\n
Na koniec w linii #27<\/code>powtarzamy wygenerowan\u0105 tablic\u0119 jako JSON za pomoc\u0105 [json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n
Po zainstalowaniu tej cz\u0119\u015bci PHP nasze autouzupe\u0142nianie powinno dzia\u0142a\u0107! Od\u015bwie\u017c swoj\u0105 witryn\u0119 i wypr\u00f3buj j\u0105!<\/p>\n
Opcjonalne ulepszenia<\/h2>\n
Jednym z powszechnych problem\u00f3w jest zbyt du\u017ca liczba dopasowa\u0144 i zbyt du\u017ce pole autouzupe\u0142niania. S\u0105 na to dwa rozwi\u0105zania.<\/p>\n
Jednym z rozwi\u0105za\u0144 jest dodanie w\u0142a\u015bciwo\u015bci minLength<\/code>do autocomplete()<\/code>funkcji w JavaScript. Ta w\u0142a\u015bciwo\u015b\u0107 uruchomi okno autouzupe\u0142niania dopiero po wprowadzeniu okre\u015blonej liczby znak\u00f3w. Jako przyk\u0142ad mo\u017cemy wymaga\u0107 co najmniej 3 znak\u00f3w przed uruchomieniem autouzupe\u0142niania:<\/p>\n
        ...\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n        minLength: 3,\n    });\n});<\/code><\/pre>\n
jQuery UI Autocomplete proponuje tutaj inne rozwi\u0105zanie<\/a>. Pokazuje przyk\u0142ad dodania odrobiny CSS, aby doda\u0107 sta\u0142\u0105 wysoko\u015b\u0107 i wewn\u0119trzny pasek przewijania w polu autouzupe\u0142niania.<\/p>\n
Wniosek i kompletny kod<\/h2>\n
Pomy\u015blnie dodali\u015bmy autouzupe\u0142nianie do funkcji wyszukiwania WordPressa, gdzie mamy pe\u0142n\u0105 kontrol\u0119 nad zwracanymi dopasowaniami. Daje odwiedzaj\u0105cym szybszy spos\u00f3b poruszania si\u0119 po tre\u015bci, poniewa\u017c klikni\u0119cie dopasowania spowoduje przekierowanie bezpo\u015brednio do posta, zamiast najpierw objazdu strony wynik\u00f3w wyszukiwania. Wdro\u017cenie autouzupe\u0142niania mo\u017ce nie zawsze mie\u0107 sens we wszystkich witrynach WordPress, ale mo\u017ce by\u0107 \u015bwietne do wyszukiwania okre\u015blonych tre\u015bci lub w specjalnych szablonach!<\/p>\n
Oto ostateczny kod w ca\u0142o\u015bci:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});\n\u00a0\nadd_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n\u00a0\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n\u00a0\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ten samouczek jest dla tych, kt\u00f3rzy chc\u0105 zaimplementowa\u0107 wyszukiwanie autouzupe\u0142niania w WordPress, gdzie mamy pe\u0142n\u0105 kontrol\u0119 nad zwracanymi dopasowaniami.<\/p>\n","protected":false},"author":1,"featured_media":224845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,897,1110,805,805,836,836,845,845,866,866],"tags":[1169],"class_list":["post-233361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-n-a","category-php-7","category-przewodnik-dla-poczatkujacych","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233361"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}