Custom tìm kiếm gợi ý wordpress (instant search wordpress)

20/03/2021 01:35 4234

Custom tìm kiếm gợi ý wordpress (instant search wordpress): tính năng này không có sẳn trong wordpress, trong theme flatsome thì có mà đôi lúc chúng ta lại muốn một thêm một tùy biến tìm kiếm trên google giống hình dưới đây chẳn hạn thì làm thế nào?. Ngay sau đây mình sẽ chia sẽ cách làm

Table of Contents

1. Kịch bản script

Nhu cầu của chúng ta là custom search mặc định wordpress để nó làm các việc như sau: tìm kiếm gợi ý giống google và nó sẽ search trong post title và cung cấp một tùy biên nữa là nếu site đã index nhiều trên google thì có thể tìm các kết quả trên google từ chỉ site hiện tại

2. Custom phần mã html

Ở đây mình sẽ làm trường hợp search cho post nha còn woocommerce thì sử dụng hook khác để làm và hook ở đây sẽ là get_search_form

Mở file functions.php bỏ vào

function custom_form_search($var){
    $html_form='';
    $html_form.='<form id="main-search" method="get" action="'.home_url().'" class="headsearch mainsearch ncart input-serach">';
    $html_form.='<input type="hidden" name="post_type" id="what_post_type" value="product" />';
    $html_form.='<select name="search_type" id="search_type">';
    $html_form.='<option value="2">Bài viết</option>';
    $html_form.='<option value="3">Google</option>';
    $html_form.='</select>';
    $html_form.='<input class="topinput" type="text"  placeholder="Bạn tìm gì ...?" name="s" id="search_key" autocomplete="off" > ';
    $html_form.='<button class="btntop" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>';
    $html_form.='<div id="search-result"></div>';
    $html_form.='</form>';
    return $html_form;
}
add_filter("get_search_form","custom_form_search");

function custom_form_search($var){

$html_form='';

$html_form.='<form id="main-search" method="get" action="'.home_url().'" class="headsearch mainsearch ncart input-serach">';

$html_form.='<input type="hidden" name="post_type" id="what_post_type" value="product" />';

$html_form.='<select name="search_type" id="search_type">';

$html_form.='<option value="2">Bài viết</option>';

$html_form.='<option value="3">Google</option>';

$html_form.='</select>';

$html_form.='<input class="topinput" type="text" placeholder="Bạn tìm gì ...?" name="s" id="search_key" autocomplete="off" > ';

$html_form.='<button class="btntop" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>';

$html_form.='<div id="search-result"></div>';

$html_form.='</form>';

return $html_form;

}

add_filter("get_search_form","custom_form_search");

Các bài viết khác có thể hữu ích với bạn

3. Mã css và js

Và tất nhiên linh hồn sẽ là mã js và css để form tìm kiếm của chúng ta đẹp hơn và nó sẽ xử lý như thế nào. Sự kiện được sử dụng trong trường hợp này là keyup. Mở file functions.php bỏ code này vào

add_action("wp_head","add_js_form_search");
function add_js_form_search(){
    ?>
    <script>
    jQuery(function($){
		//xử lý ký tự gõ vào
 		$(".topinput").on("keyup", function(t) {
    		t.preventDefault();
    		var a = $(".topinput").val().replace(/:|;|!|@@|#|\$|%|\^|&|\*|'|"|>|<|,|\.|\?|`|~|\+|=|_|\(|\)|{|}|\[|\]|\\|\|/gi, "");
    		var search_type = $('#search_type').val();
    		if (a.length >= 3) {
				var data = {
					action: "search_for_woocommerce_instant",
					text: a,
					search_type : search_type
				};
				$.ajax({
					type: "GET",
					dataType: "json",
					url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
					data: data,
					success: function(t) {
						//console.log(t);
						var data = t.data;
						if(data.search_type == '3'){
							//console.log(3);
							$("#search-result").hide();
						}else{
							 $("#search-result").html(data.html);
							 $("#search-result").show();
							 //console.log('test');
						}
					}
				});
    		}else{
				 $("#search-result").html("");
			}
		});
	});
	//Xử lý phần tìm kiếm theo google hay là tìm kiếm trong data
	jQuery(function($){
		$('#main-search').submit(function(e){
			e.preventDefault();
			var search_type = $('#search_type').val();
			var key = $('#search_key').val();
			//console.log(key);
			var url_redirect=''
			if(search_type == "1"){
				url_redirect = sfwc_vars.home_url+'?post_type=product&search_type=1&s='+key;	
				window.location.href = url_redirect;
			}else if(search_type == "2"){
				url_redirect = sfwc_vars.home_url+'?post_type=post&search_type=1&s='+key;
				window.location.href = url_redirect;
			}else if(search_type == "3"){
				window.open('https://www.google.com/search?q=site:biettuot.info '+key, '_blank');
			}
			
		});
	});
		</script>
     <style>
		 form.headsearch.mainsearch.ncart.input-serach {
		position: relative;
		}
		
		form.headsearch.mainsearch.ncart.input-serach div#search-result {
			position: absolute;
			top: 34px;
			background: #fff;
			z-index: 999;
			width: 100%;
			-webkit-box-shadow: -1px 2px 5px 0 rgb(0 0 0 / 75%);
			-moz-box-shadow: -1px 2px 5px 0 rgba(0,0,0,.75);
			box-shadow: -1px 2px 5px 0 rgb(0 0 0 / 75%);
		}
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li:hover {
			background: #f8f8f8;
		}
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li .viewed {
			background: #f5f5f5;
			font-size: 13px;
			color: #666;
			font-weight: 400;
			padding: 8px 10px;
			margin: -8px -10px;
		}
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest {}
		
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li {
			padding: 8px 10px;
			margin-bottom: 0;
			width: 100%;
			float: left;
		}
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li a {
			display: block;
			color: #262626;
		}
		
		form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest .avata {
			display: block;
			float: left;
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin-right: 15px;
		}
		form.headsearch.mainsearch.ncart.input-serach {
			display: flex;	
		}
		
		form.headsearch.mainsearch.ncart.input-serach select#search_type {
			border-right: 0;
			max-width: 84px;
		}
		 </style>   
        <?php
	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

add_action("wp_head","add_js_form_search");

function add_js_form_search(){

jQuery(function($){

//xử lý ký tự gõ vào

$(".topinput").on("keyup", function(t) {

t.preventDefault();

var a = $(".topinput").val().replace(/:|;|!|@@|#|\$|%|\^|&|\*|'|"|>|<|,|\.|\?|`|~|\+|=|_|$|$|{|}|\[|\]|\\|\|/gi, "");

var search_type = $('#search_type').val();

if (a.length >= 3) {

var data = {

action: "search_for_woocommerce_instant",

text: a,

search_type : search_type

};

$.ajax({

type: "GET",

dataType: "json",

url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',

data: data,

success: function(t) {

//console.log(t);

var data = t.data;

if(data.search_type == '3'){

//console.log(3);

$("#search-result").hide();

}else{

$("#search-result").html(data.html);

$("#search-result").show();

//console.log('test');

}

});

}else{

$("#search-result").html("");

}

});

//Xử lý phần tìm kiếm theo google hay là tìm kiếm trong data

jQuery(function($){

$('#main-search').submit(function(e){

e.preventDefault();

var search_type = $('#search_type').val();

var key = $('#search_key').val();

//console.log(key);

var url_redirect=''

if(search_type == "1"){

url_redirect = sfwc_vars.home_url+'?post_type=product&search_type=1&s='+key;

window.location.href = url_redirect;

}else if(search_type == "2"){

url_redirect = sfwc_vars.home_url+'?post_type=post&search_type=1&s='+key;

window.location.href = url_redirect;

}else if(search_type == "3"){

window.open('https://www.google.com/search?q=site:biettuot.info '+key, '_blank');

}

});

</script>

<style>

form.headsearch.mainsearch.ncart.input-serach {

position: relative;

}

form.headsearch.mainsearch.ncart.input-serach div#search-result {

position: absolute;

top: 34px;

background: #fff;

z-index: 999;

width: 100%;

-webkit-box-shadow: -1px 2px 5px 0 rgb(0 0 0 / 75%);

-moz-box-shadow: -1px 2px 5px 0 rgba(0,0,0,.75);

box-shadow: -1px 2px 5px 0 rgb(0 0 0 / 75%);

}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li:hover {

background: #f8f8f8;

}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li .viewed {

background: #f5f5f5;

font-size: 13px;

color: #666;

font-weight: 400;

padding: 8px 10px;

margin: -8px -10px;

}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest {}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li {

padding: 8px 10px;

margin-bottom: 0;

width: 100%;

float: left;

}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest li a {

display: block;

color: #262626;

}

form.headsearch.mainsearch.ncart.input-serach div#search-result ul.suggest .avata {

display: block;

float: left;

width: 40px;

height: 40px;

line-height: 40px;

margin-right: 15px;

}

form.headsearch.mainsearch.ncart.input-serach {

display: flex;

}

form.headsearch.mainsearch.ncart.input-serach select#search_type {

border-right: 0;

max-width: 84px;

}

</style>

<?php

}

4. Mã php

Đây là nơi chung ta tương tác với cơ sở dữ liệu để tìm ra kết quả phù hợp để trả về gợi ý. Và hook ajax của chung ta ở đây là search_for_woocommerce_instant (hook này do chúng ta đặt tên ở phần mã js). Mở file functions.php bỏ vào

add_action("wp_ajax_search_for_woocommerce_instant","search_for_woocommerce_instant");
add_action("wp_ajax_nopriv_search_for_woocommerce_instant","search_for_woocommerce_instant"
function search_for_woocommerce_instant(){
    global $wpdb;
    $response=array();
    $search_type = $_GET['search_type'];
    $search_title='Kết quả tìm kiếm:';
    switch ($search_type) {
    case '2':
         $query = "SELECT *  FROM  `" . $wpdb->prefix . "posts` where `post_title` like '%{$_GET['text']}%'  and `post_type` = 'post' and `post_status` = 'publish'  limit 0,10";
         //$response['sql']= $query;
      $search_title="Bài viết gợi ý:";
       $posts = $wpdb->get_results($query);
    default:
        break;
    }
    $response['onlytest'] = $posts;
    $response['search_type']=$_GET['search_type'];
    $html='<ul class="suggest"><li><div class="viewed">'.$search_title.'</div></li>';
    if ($posts):
    
        foreach ($posts as $post):
            
        if($search_type == "2"):
                $post_thumbnail_id = get_post_thumbnail_id($post->ID);
                $src_thumbnail =wp_get_attachment_image_src($post_thumbnail_id ,'thumbnail');
                 $html .= '<li><a href="'.get_permalink($post->ID).'" ><div class="avata"><img width="50" height="50" src="'.$src_thumbnail[0].'" alt="'.get_the_title($post->ID).'"></div><div class="info"><span title="'.get_the_title($post->ID).'">'.get_the_title($post->ID).'</span></div><div class="clr"></div></a></li>';
                
            endif;	
        endforeach;
        $html .= '</ul>';
        $response['html'] =$html;
    endif;
    
    wp_send_json_success($response);
 });

add_action("wp_ajax_search_for_woocommerce_instant","search_for_woocommerce_instant");

add_action("wp_ajax_nopriv_search_for_woocommerce_instant","search_for_woocommerce_instant"

function search_for_woocommerce_instant(){

global $wpdb;

$response=array();

$search_type = $_GET['search_type'];

$search_title='Kết quả tìm kiếm:';

switch ($search_type) {

case '2':

$query = "SELECT * FROM `" . $wpdb->prefix . "posts` where `post_title` like '%{$_GET['text']}%' and `post_type` = 'post' and `post_status` = 'publish' limit 0,10";

//$response['sql']= $query;

$search_title="Bài viết gợi ý:";

$posts = $wpdb->get_results($query);

default:

break;

}

$response['onlytest'] = $posts;

$response['search_type']=$_GET['search_type'];

$html='<ul class="suggest"><li><div class="viewed">'.$search_title.'</div></li>';

if ($posts):

foreach ($posts as $post):

if($search_type == "2"):

$post_thumbnail_id = get_post_thumbnail_id($post->ID);

$src_thumbnail =wp_get_attachment_image_src($post_thumbnail_id ,'thumbnail');

$html .= '<li><a href="'.get_permalink($post->ID).'" ><div class="avata"><img width="50" height="50" src="'.$src_thumbnail[0].'" alt="'.get_the_title($post->ID).'"></div><div class="info"><span title="'.get_the_title($post->ID).'">'.get_the_title($post->ID).'</span></div><div class="clr"></div></a></li>';

endif;

endforeach;

$html .= '</ul>';

$response['html'] =$html;

endif;

wp_send_json_success($response);

});

Chúc các bạn thành công!. Nếu có gì góp ý hoặc thắc mắt thì để lại bình luận bên dưới nha

5/5 (10 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Custom tìm kiếm gợi ý wordpress (instant search wordpress)

1. Kịch bản script

2. Custom phần mã html

3. Mã css và js

4. Mã php

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)