首页 问答 正文

如何在wordpress主题中添加即时搜索?

注册会员 / 悠然自学 / 2023-06-11/ 浏览 147 次

在WordPress主题中添加即时搜索可以使用以下步骤:

  1. 创建一个搜索框并添加HTML代码到你的主题中,例如:
<form action="/" method="get">
  <input type="text" name="s" placeholder="Search">
  <button type="submit">Search</button>
</form> 
  1. 在functions.php文件中添加以下代码来使用WordPress的ajax功能:
add_action('wp_ajax_my_search', 'my_search');
add_action('wp_ajax_nopriv_my_search', 'my_search');

function my_search() {
  $query = new WP_Query(array(
    's' => esc_attr($_POST['term']),
    'posts_per_page' => 5
  ));

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a><br>';
    }
  } else {
    echo 'No results';
  }

  wp_reset_postdata();
  wp_die();
} 
  1. 添加一个JavaScript文件到你的主题中,并使用以下代码在搜索框中输入文字时向服务器发送请求:
jQuery(document).ready(function($){
  var timer;
  $('input[type="text"]').on('input', function(){
    clearTimeout(timer);
    var term = $(this).val();
    if (term.length < 3) return;
    timer = setTimeout(function(){
      $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'POST',
        data: {
          action: 'my_search',
          term: term
        },
        success: function(data){
          $('#search-results').html(data);
        }
      });
    }, 500);
  });
}); 
  1. 在搜索框下方添加一个容器,用于显示搜索结果:
<div id="search-results"></div> 

通过以上步骤,你就可以在你的WordPress主题中添加即时搜索功能了。其中主要的代码是在functions.php文件中的PHP代码和添加的JavaScript文件。以上的示例代码可供参考。

大家谈论
    我的见解