Własna wyszukiwarka AJAX live search w Wordpress.
Podczas tworzenia własnego motywu dla Wordpress często chcemy skorzystać z wyszukiwania w technologii AJAX. Dzięki wyszukiwaniu AJAX strona się nie przeładowywuje, a my otrzymujemy wyniki od razu w widoku strony. Jak zrobić proste wyszukiwanie AJAX na swoim motywie Wordpress?
Prace będziemy przeprowadzać na (3) trzech plikach:
- któryś jeden z plików szablonu motywu
header.php,page.phplubfooter.phpaby dodać formularz kod HTML wyszukiwarki - utworzymy plik javascript np.
search.js functions.phplub jakiś jego include
1. Kod formularza wyszukiwania
Aby łatwo zobrazować działanie posłużymy się prostym polem <input> do wprowadzenia słowa kluczowego, które chcemy wyszukać. Oczywiście nic nie stoi na przeszkodzie aby następnie otworzyć taki formularz np. na oknie modalnym czy ostylować go wedle naszych potrzeb.
Zdecyduj, w którym miejscu chcesz aby pojawił się formularz. Na potrzeby poradnika zdecydujemy aby formularz pojawiał się na każdej stronie zaraz pod tagiem <header></header>. Użyjemy do tego pliku header.php i tam dodamy formularz HTML.
<form action="/">
<input id="keyword" type="search" name="s" placeholder="Wpisz frazę" class="input_search" onkeyup="">
</form>
<div class="search_result" id="datafetch">
<ul>
<li>Proszę czekać..</li>
</ul>
</div>
Następnie dobrym sposobem będzie ukryć na starcie wyniki wyszukiwania ponieważ przemycamy tu komunikat o tym że wyszukiwanie trwa. Możemy też zamiast komunikatu użyć animowanego GIFa.
Dodaj ten kod albo w sekcji <head> lub usuwając <style> </style> dołącz do swojego pliku .css, którego używasz:
<style>
div.search_result {
display: none;
}
</style>
Wordpress. Własny formularz AJAX search.
Ooo wyszukiwanie działa! Tak, to jest podstawowy formularz z polem <input> dla Wordpress, który od razu działa tradycyjnie. Gdy wpiszemy słowo kluczowe i naciśniemy klawisz [Enter] fraza zostanie przeszukana i wyświetlą się wyniki na osobnym widoku np. search.php. No ale to samo robi zwykły domyślny widget Wordpress. Dlatego lecimy dalej.
2. Funkcja AJAX search dla Wordpress
Tworzymy sobie nowy pusty plik search.js i umieszczamy go gdzieś w katalogu naszego motyw Wordpress. Możemy użyć np. takiej ścieżki nasz-motyw/assets/js/search.js.
Wklejamy do pliku poniższy kod:
(function ($) {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var ajaxSearch = debounce(function(searchKey) {
jQuery.ajax({
url:ajax_var.url,
type: 'post',
data: { action: 'data_fetch', keyword: jQuery('#keyword').val(), nonce: ajax_var.nonce }
}).done(function(data) {
/* odpowiedź */
jQuery('#datafetch').html( data );
});
//1250 milisekund - minimalny czas opóźnienia po wprowadzeniu znaku
}, 1250);
$("#keyword").keyup(function(){
ajaxSearch($("#keyword").val());
});
$("input#keyword").keyup(function() {
if ($(this).val().length > 2) {
$("#datafetch").show();
} else {
$("#datafetch").hide();
}
});
})(jQuery);
Wartość 1250 oznacza ile czasu (ms) ma upłynąć od ostatniego wprowadzenie znaku w polu <input> zanim funkcja zacznie szukać wyników. Możemy to zmienić. Należy jednak pamiętać aby nie ustawiać zbyt niskich wartości.
3.Aktywacja kodu JS i zabezpiecznie (nonce)
Na razie nic nowego się nie dzieje. Nasz kod javascript z pliku search.js nie jest w ogóle dołączany do zasobów motywu.
Aby to zmienić dołącz do pliku functions.php poniższy kod:
/*
==================
Ajax Search
==================
*/
// funkcja AJAX
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )
die ( 'Busted!');
//uruchamiamy tylko jeśli typ żądania jest wywołaniem AJAX
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest')
{
exit(json_encode(['error' => 'Not AJAX']));
}
if ($_SERVER["REQUEST_METHOD"] == "POST"):
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('post') ) );
if( $the_query->have_posts() ) :
echo '<ul>';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
<?php endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
endif;
die();
}
// dodajemy js do kolejki
wp_register_script ( 'xsearch' , get_template_directory_uri().'/assets/js/search.js', array('jquery'),'1',true);
wp_localize_script('xsearch', 'ajax_var', array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce')
));
wp_enqueue_script('xsearch');
Używamy tu mechanizmu WP nonce aby zabezpieczyć żądanie JS oraz upewniamy się iż jest ono odpowiedniego typu tzn. AJAX request. To takie bazowe pewne zabezpieczenie żądań dla Wordpress.
Następnie dodajemy zasób xsearch jako plik /assets/js/search.js do kolejki skryptów JS, z zależnością jQuery.
Przeszukujemy wszystkie Wpisy pod kątem słowa kluczowego. Każdy pojedyńczy wynik zwracamy jako element listy wypunktowanej <li></li> z linkiem i tytułem.
Wordpress. Wyniki z wyszukiwarki AJAX.
Oczywiście w przykładzie dla tego poradnika nie stylujemy dodatkowo CSS, ani nie zakładamy że używasz konkretnego frameworka np. Bootstrap. Wszystko zależy od Ciebie.
Gotowe. Ten poradnik pomoże Ci zrozumieć jak działa mechanizm AJAX i stanowi podstawę do dalszego rozwoju Twojego kodu.
