Привет. Совсем недавно приходилось переносить существующий проект с самописного движка на WordPress и необходимо было сделать в точности так же вместе с поиском по сайту, который был реализован на Ajax. И если перед вами тоже стоит такая задача, то сейчас расскажу, как я ее решал. Если вы не знали, то поддержка Ajax в WordPress уже есть и его функционал активно используется в админ-панели. Обработчик Ajax запросов находится в файле:
Но для того, чтобы использовать его для поиска по сайту — нужно написать небольшой хук, чтобы Ajax заработал на фронтенде, а так же создать запрос с помощью встроенного в WP класса WP_Query . Чем мы сейчас и займемся. Конечно реализовать поиск можно при помощи специальных плагинов, но в моем случае гораздо проще написать с самого начала, чем переделывать существующий код. Если в вашей теме нет файла functions.php, то создайте его и пометите этот фрагмент кода:
Обработчик Ajax запросов ы WordPress
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| add_action('wp_ajax_send_data' , 'data_query');
add_action('wp_ajax_nopriv_send_data','data_query');
function data_query(){
$the_query = new WP_Query( array( 'posts_per_page' => 5, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'post' ) );
if( $the_query->have_posts() ) :
echo '<ul class="list-group shadow">';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li class="list-group-item"><a href="<?php echo esc_url( post_permalink() ); ?>">< ?php the_title();?></a></li>
< ?php endwhile;
echo '</ul>';
wp_reset_postdata();
else:
echo '</ul><ul class="list-group shadow"><li class="list-group alert-danger p-1"><h4>Товаров не найдено</h4></li></ul>';
endif;
wp_die();
} |
add_action('wp_ajax_send_data' , 'data_query');
add_action('wp_ajax_nopriv_send_data','data_query');
function data_query(){
$the_query = new WP_Query( array( 'posts_per_page' => 5, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'post' ) );
if( $the_query->have_posts() ) :
echo '<ul class="list-group shadow">';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li class="list-group-item"><a href="<?php echo esc_url( post_permalink() ); ?>">< ?php the_title();?></a></li>
< ?php endwhile;
echo '</ul>';
wp_reset_postdata();
else:
echo '</ul><ul class="list-group shadow"><li class="list-group alert-danger p-1"><h4>Товаров не найдено</h4></li></ul>';
endif;
wp_die();
}
Теперь разберем подробно:
| 1 |
Включение Ajax для неавторизованных пользователей |
| 2 |
Включение Ajax для авторизованных пользователей |
| 3 |
Начало функции data_query |
| 4 |
Запрос к БД в переменной $the_query |
| 5 |
Проверка, есть ли посты |
| 6 |
Формируем список ul с классами bootstrap |
| 7 |
Запускаем стандартный WordPress цикл вывода постов |
| 8 |
Выводим заголовок найденной записи и делаем его ссылкой |
| 9 |
Конец цикла |
| 10 |
Закрывающий тег списка |
| 11 |
Функция сброса данных |
| 12 |
else |
| 13 |
Что выводить, если данные не найдены |
| 14 |
Окончание проверок |
| 15 |
Останавливаем дальнейшее выполнение функции |
| 16 |
Закрытие функции |
Скрипт Ajax поиска WordPress
Теперь, чтобы у нас все заработало, напишем сам Ajax запрос. Соответственно у вас должна быть подключена библиотека jQuery. Поместить его можно как в файл темы, например в footer, так и через функцию все в том же файле functions.php примерно таким образом:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| add_action( 'wp_footer', 'ajax_script' );
function ajax_script(){ ?>
<script type="text/javascript">
function fetchResults(){
var keyword = jQuery('#searchInput').val();
if(keyword == "" || keyword.length < = 3){
$('#search').html("");
} else {
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'send_data', keyword: keyword },
beforeSend: function (){
$('#search').html('<img src="<?php echo get_template_directory_uri() ?/>/img/Preloader.svg">');
},
success: function(data) {
$('#search').html( data );
}
});
}
}
</script>
< ?php } |
add_action( 'wp_footer', 'ajax_script' );
function ajax_script(){ ?>
<script type="text/javascript">
function fetchResults(){
var keyword = jQuery('#searchInput').val();
if(keyword == "" || keyword.length < = 3){
$('#search').html("");
} else {
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'send_data', keyword: keyword },
beforeSend: function (){
$('#search').html('<img src="<?php echo get_template_directory_uri() ?/>/img/Preloader.svg">');
},
success: function(data) {
$('#search').html( data );
}
});
}
}
</script>
< ?php }
И на форму поиска, то есть на сам input вешаем эту функцию:
<input type="text" name="s" onkeyup="fetchResults();" id="searchInput" value="" autocomplete="off"/> |
<input type="text" name="s" onkeyup="fetchResults();" id="searchInput" value="" autocomplete="off"/>
Под формой помещаем блок с id search, в который будет помещен результат поиска. Теперь давайте разберем построчно JavaScript.
| 3 |
Объявляем функцию fetchResults |
| 4 |
Вносим в переменную keyword данные из input |
| 5, 6 |
Если поле пустое или меньше или равно 3-м символам — оставляем блок с результатами поиска пустым |
| 7 |
else |
| 8 |
Начало Ajax запроса |
| 9 |
Ссылка на обработчик |
| 10 |
Указываем метод передачи данных |
| 11 |
Создаем 2 переменных (action и keyword) |
| 12, 13, 14 |
Выводим gif изображение до загрузки данных |
| 15, 16, 17 |
Получаем данные и выводим их в блоке #search |
| 18 |
Закрытие Ajax |
| 19 |
Закрытие else |
| 20 |
Конец функции fetchResults |
Ajax форма поиска в Wodpress
Напомню, что проект, который я делал сверстан при помощи Bootstrap и его работающая форма выглядит вот так:
1
2
3
4
5
6
7
8
9
10
11
| <div class="input-group has-search col-12 col-md-6 text-center">
<form method="get" action="<?php echo esc_url( home_url() ); ?>" class="col-12">
<input type="text" class="form-control" name="s" onkeyup="fetchResults();" id="searchInput"
placeholder="Введите название продукта"
value="<?php echo get_search_query(); ?/>" autocomplete="off">
<button type="submit" class="search-image">
<span class="fa fa-search form-control-feedback"></span>
</button>
</form>
<div class="col-12 p-0" id="search"></div>
</div> |
<div class="input-group has-search col-12 col-md-6 text-center">
<form method="get" action="<?php echo esc_url( home_url() ); ?>" class="col-12">
<input type="text" class="form-control" name="s" onkeyup="fetchResults();" id="searchInput"
placeholder="Введите название продукта"
value="<?php echo get_search_query(); ?/>" autocomplete="off">
<button type="submit" class="search-image">
<span class="fa fa-search form-control-feedback"></span>
</button>
</form>
<div class="col-12 p-0" id="search"></div>
</div>
Искренне надеюсь, что вы хорошо освоили данные материал и у вас получилось самостоятельно сделать на сайте WordPress Ajax поиск. Если возникли какие-то вопросы, то смело задавайте их в комментариях.
3977
![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Куда этот код нужно вставить?
Какой именно?