在WordPress主题中添加即时搜索可以使用以下步骤:
<form action="/" method="get">
<input type="text" name="s" placeholder="Search">
<button type="submit">Search</button>
</form>
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();
}
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);
});
});
<div id="search-results"></div>
通过以上步骤,你就可以在你的WordPress主题中添加即时搜索功能了。其中主要的代码是在functions.php文件中的PHP代码和添加的JavaScript文件。以上的示例代码可供参考。