wordpress ajax поиск публикаций

Вопрос или проблема

<?php
// ajax функция
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => 5, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <a href="https://wordpress.stackexchange.com/questions/326104/<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a>

        <?php endwhile;
  wp_reset_postdata();  
 else: 
  echo '<h3>Нет результатов</h3>';
    endif;
    die();
}

// добавляем js для ajax fetch
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">

$("input").keyup(function() {

 var keyword = jQuery('#searchInput').val();
 if(keyword == ""){
  jQuery('#datafetch').html("");
 } else {
  jQuery.ajax({
   url: '<?php echo admin_url('admin-ajax.php'); ?>',
   type: 'post',
   data: { action: 'data_fetch', keyword: keyword  },
   success: function(data) {
    jQuery('#datafetch').html( data );
   }
  });
  });
 }

</script>
<?php
}
?>

<div class="container ">

  <div class="d-flex justify-content-center ">

      <div class="searchbar">

 <input id="searchInput" class="search_input" type="text" name=""  placeholder="Поиск...">

   <a href="#" class="search_icon"><i class="fas fa-search"></i></a>

 </div>

 </div>

</div>
<div id="datafetch">
</div>

.

Ответ или решение

Для настройки AJAX-поиска постов в WordPress, вам необходимо проверить несколько ключевых аспектов вашего кода и структуры. Очевидно, вы уже реализовали большую часть функционала, однако есть несколько моментов, на которые стоит обратить внимание, чтобы гарантировать корректную работу системы поиска. Давайте рассмотрим основные моменты, которые могут помочь вам решить проблему, когда результаты поиска не отображаются.

1. Исправление Используемых Функций

В вашем коде используется функция post_permalink(), которая является устаревшей. Вам следует заменить ее на одну из следующих функций:

• get_permalink() — возвращает ссылку на пост (не выводит).
• the_permalink() — выводит ссылку на пост.

Обновите ваш код следующим образом:

<a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a>

2. Проверка AJAX Запроса

Убедитесь, что AJAX-запрос действительно выполняется. Для этого добавьте отладочный вывод в вашу функцию data_fetch. Например, перед началом логики поиска можно просто возвращать строку:

function data_fetch(){
    // Для проверки успешности вызова AJAX
    echo 'AJAX вызван'; 
    die();
}

Это поможет вам убедиться, что вызов AJAX происходит корректно. Если вы видите это сообщение, значит, проблема не в вызове функции.

3. Корректное Подключение jQuery

Убедитесь, что jQuery корректно загружен. Вам может понадобиться следующее:

function enqueue_styles_and_scripts() {
    wp_enqueue_script('jquery'); // Подключаем jQuery
}
add_action('wp_enqueue_scripts', 'enqueue_styles_and_scripts');

4. Исправление JavaScript кода

В вашем JavaScript коде есть возможная ошибка в расположении фигурной скобки, перед тем как начнется обработка события keyup. Смотрите исправленный вариант:

jQuery("input").keyup(function() {
    var keyword = jQuery('#searchInput').val();
    if (keyword == "") {
        jQuery('#datafetch').html("");
    } else {
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { action: 'data_fetch', keyword: keyword },
            success: function(data) {
                jQuery('#datafetch').html(data);
            }
        });
    }
});

5. Добавление Стилей и Разметки

Убедитесь, что ваши элементы поиска имеют правильный CSS-класс, и проверьте стили, если результаты не отображаются должным образом.

<div id="datafetch"></div>

Убедитесь, что #datafetch видим и не скрыт никакими CSS-правилами.

6. Проверка Ошибок

Не забывайте проверять консоль браузера на предмет ошибок JavaScript во время выполнения. Это может дать подсказку о том, почему AJAX-запрос не работает.

Заключение

Следуя данным рекомендациям, вы сможете настроить эффективный AJAX-поиск для постов в WordPress. Проверьте все упомянутые аспекты, обновите код и проведите отладку. После этих шагов ваш функционал поиска должен начать работать корректно. Если проблемы продолжатся, рекомендую дополнительно исследовать ответ сервера через инструменты разработчика вашего браузера, что может помочь выявить дополнительные проблемы, такие как права доступа или ошибки сервера.