NỘI DUNG (HIGHLIGHTS)
Custom tìm kiếm theo Ajax cho WordPress không dùng Plugin – Tìm kiếm là một chức năng khá quan trọng với Blog hoặc Website, nó giúp tăng trải nghiệm người dùng giúp họ tìm kiếm nhữn thứ mà mình cần tìm kiếm. Trong bài viết này mình sẽ chia sẻ bạn một đoạn code nhỏ khi bạn gõ tìm kiếm thì nó sẽ hiện những nội dung tương tự giúp người dùng dễ dàng tìm kiếm hơn.
Custom tìm kiếm theo Ajax cho WordPress không dùng Plugin
Custom tìm kiếm theo Ajax cho WordPress sẽ thuận tiện hơn nhiều cho khách truy cập của bạn khi nhận được kết quả tìm kiếm tức thì thay vì nhìn thấy chúng trên một trang riêng mới nơi WordPress hiển thị chúng theo mặc định.
Có thể bạn quan tâm: code trình phát nhạc không cần Plugin cho wordpress
Nó cho phép họ tiết kiệm thời gian và nhanh chóng tìm hiểu xem nội dung họ đang tìm kiếm có trên trang web của bạn hay không.
Thứ hai, nó giúp bạn tăng số lần xem trang vì những khách truy cập đã có trải nghiệm tìm kiếm tích cực trên trang web của bạn có nhiều khả năng sử dụng lại trang đó hơn.
1] Chèn code vào Functions
Đoạn code này đã bao gồm cả form tìm kiếm của bootstrap. Các bạn có thể tùy biến theo ý riêng của mình
add_shortcode( 'asearch', 'asearch_func' );
function asearch_func( $atts ) {
$atts = shortcode_atts( array(
'source' => 'post,product',
'image' => 'true'
), $atts, 'asearch' );
static $asearch_first_call = 1;
$source = $atts["source"];
$image = $atts["image"];
$sForam = '<div class="search_bar">
<form class="asearch" id="asearch'.$asearch_first_call.'" action="/" method="get" autocomplete="off">
<input type="text" name="s" placeholder="Từ khóa tìm kiếm" id="keyword" class="input_search form-control shadow-none rounded-0" onkeyup="searchFetch(this)">
<button class="btn btn-success shadow-none rounded-0" type="submit">Search</button>
</form><div class="search_result" id="datafetch" style="display: none;">
<ul>
<li>Please wait..</li>
</ul>
</div></div>';
$java = '<script>
function searchFetch(e) {
var datafetch = e.parentElement.nextSibling
if (e.value.trim().length > 0) { datafetch.style.display = "block"; } else { datafetch.style.display = "none"; }
const searchForm = e.parentElement;
e.nextSibling.value = "Please wait..."
var formdata'.$asearch_first_call.' = new FormData(searchForm);
formdata'.$asearch_first_call.'.append("source", "'.$source.'")
formdata'.$asearch_first_call.'.append("image", "'.$image.'")
formdata'.$asearch_first_call.'.append("action", "asearch")
AjaxAsearch(formdata'.$asearch_first_call.',e)
}
async function AjaxAsearch(formdata,e) {
const url = "'.admin_url("admin-ajax.php").'?action=asearch";
const response = await fetch(url, {
method: "POST",
body: formdata,
});
const data = await response.text();
if (data){ e.parentElement.nextSibling.innerHTML = data}else {
e.parentElement.nextSibling.innerHTML = `<ul><a href="#"><li>Sorry, nothing found</li></a></ul>`
}}
document.addEventListener("click", function(e) { if (document.activeElement.classList.contains("input_search") == false ) { [...document.querySelectorAll("div.search_result")].forEach(e => e.style.display = "none") } else {if (e.target.value.trim().length > 0) { e.target.parentElement.nextSibling.style.display = "block"}} })
</script>';
$css = '<style>form.asearch {display: flex;flex-wrap: nowrap;border-radius: 5px;padding: 3px 5px;}
form.asearch button#mybtn {padding: 5px;cursor: pointer;background: none;}
form.asearch input#keyword {border: none;}
div#datafetch {
background: white;
z-index: 10;
position: absolute;
max-height: 425px;
overflow: auto;
box-shadow: 0px 15px 15px #00000036;
right: 0;
left: 0;
top: 50px;
}
div.search_bar {
max-width: 90% !important;
position: relative;
margin: 0 auto;
}
div.search_result ul a li {
margin: 0px;
padding: 5px 0px;
padding-inline-start: 18px;
color: #3f3f3f;
font-weight: bold;
}
div.search_result li {
margin-inline-start: 20px;
}
div.search_result ul {
padding: 13px 0px 0px 0px;
list-style: none;
margin: auto;
}
div.search_result ul a {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
div.search_result ul a:hover {
background-color: #f3f3f3;
}
.asearch input#keyword {
width: 100%;
}
</style>';
if ( $asearch_first_call == 1 ){
$asearch_first_call++;
return "{$sForam}{$java}{$css}"; } elseif ( $asearch_first_call > 1 ) {
$asearch_first_call++;
return "{$sForam}"; }}
add_action('wp_ajax_asearch' , 'asearch');
add_action('wp_ajax_nopriv_asearch','asearch');
function asearch(){
$the_query = new WP_Query( array( 'posts_per_page' => 10, 's' => esc_attr( $_POST['s'] ), 'post_type' => explode(",", esc_attr( $_POST['source'] ))) );
if( $the_query->have_posts() ) :
echo '<ul>';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<a href="<?php echo esc_url( post_permalink() ); ?>"><li><?php the_title();?></li>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );?>
<?php if ( $image[0] && trim(esc_attr( $_POST['image'] )) == "true" ) { ?> <img src="<?php the_post_thumbnail_url('thumbnail'); ?>" style="height: 60px;padding: 0px 5px;"> <?php } ?> </a>
<?php endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
die();
}
2] Chèn shortcode vào nơi bạn muốn hiện thị form tìm kiếm
<?php echo do_shortcode('[asearch image="false" source="product, post, page"]'); ?>
Kết luận
Trên mạng có rất nhiều chia sẻ về form tìm kiếm loại này, nhưng tôi thấy nó khá rắc rối với đa số người dùng, tôi đã rút gọn tối đa nhất có thế theo cách đơn giản nhất. Hy vọng với hướng dẫn custom tìm kiếm theo Ajax cho WordPress không dùng Plugin này sẽ có ích với bạn, chúc bạn thành công.