#15 – WP Search.php | Tùy biến form tìm kiếm – trang kết quả tìm kiếm
Trong bài học này, chúng ta sẽ tiến hành tùy biến form tìm kiếm – trang kết quả tìm kiếm, 2 template file là search.php và searchform.php.
Nội dung chính
Video Tùy biến khung tìm kiếm – Hiển thị danh sách bài viết
Hướng dẫn chi tiết
Khung tìm kiếm
Các bạn tạo cho mình file searchform.php nằm trong thư mục chính của theme. Đây sẽ là nơi chứa giao diện form tìm kiếm của chúng ta.
<form class="search" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input
type="search"
name="s"
placeholder="<?php _e('Search your keywords','glw'); ?>"
value="<?php the_search_query(); ?>"
id="<?php echo esc_attr( uniqid( 'search-form-' ) ); ?>"
/>
<button aria-label="Search" type="submit"><i class="zmdi zmdi-search"></i></button>
</form>
Để gọi khung tìm kiếm ra, các bạn dùng hàm get_search_form. WordPress sẽ tự nhận diện searchform.php và lấy nội dung bên trong hiển thị ra cho người dùng. Nhớ phải đặt đúng tên searchform.php nhé.
Mình cũng chỉnh lại html và css một chút cho đơn giản hơn. Các bạn lưu ý phần chỉnh sửa này nhé.
form.search {
margin: auto;
max-width: 100%;
width: 300px;
height: 50px;
display: flex;
}
form.search input {
border: 0 none;
font-style: italic;
line-height: 50px;
padding: 0 15px;
width: 80%;
border: 1px solid #777;
}
form.search button {
background-color: #169eb7;
border: 0 none;
color: #fff;
font-size: 20px;
line-height: 50px;
width: 20%;
}
form.search button {
-webkit-padding-after:0px;
}
.selection{
color: #fff;
background: #169eb7;
}
Hiển thị danh sách bài viết kết quả tìm kiếm
Chúng ta sẽ dùng lại template file index.php và chỉnh sửa lại đôi chút. Trước hết, các bạn copy và paste toàn bộ code trong file index.php vào file search.php mà chúng ta sẽ tạo trong thư mục chính của theme.
Khởi tạo lại vòng lặp mới, lấy danh sách bài viết theo từ khóa tìm kiếm. Mình chỉ trích dẫn những đoạn code quan trọng, phần còn lại bạn download code hoàn thành để xem nhé.
global $query_string; wp_parse_str( $query_string, $search_string ); $search_query = new WP_Query( $search_string );
Hiển thị số kết quả
$total_results = $search_query->found_posts ? $search_query->found_posts : 0 ;
echo '<h3>';
printf(__('We found %1$s articles for your search','glw'), $total_results);
echo '</h3>';
Sau đó, bạn triển khai vòng lặp bài viết như những bài học trước. Tuy nhiên, mình sẽ chỉnh lại một chính về cách hiển thị tiêu đề và đoạn văn bản rút gọn.
In đậm từ khóa trong kết quả tìm kiếm – Cải thiện trải nghiệm người dùng
Chúng ta sẽ in đậm từ khóa tìm kiếm trong tiêu đề và nội dung bài viết. Trong file custom-post-content.php chúng ta đã tạo từ những bài trước, các bạn tạo thêm 2 hàm glw_highlight_search_keyword_title và glw_highlight_search_keyword_excerpt.
Hàm in đậm từ khóa trong tiêu đề
if(!function_exists('glw_highlight_search_keyword_title')){
function glw_highlight_search_keyword_title(){
$title = get_the_title();
$keys = implode('|', explode(' ', get_search_query()));
$title = preg_replace('/(' . $keys .')/iu', '\0', $title);
echo $title;
}
}
Class section chúng ta đã định dạng ở phần css phía trên.
Chúng ta sẽ lấy tiêu đề, tách thành mảng với mỗi phần tử là mỗi từ riêng lẻ. Ví dụ: Eget inceptos voluptate sociosqu sẽ tách thành mảng array( ‘Eget’ , ‘inceptos’ , ‘voluptate’ , ‘sociosqu’) và ghép lại thành chuỗi thay dấu cách bằng dấu |. Mục đích là để có thể sử dụng biểu thức chính quy trong việc tìm kiếm và thay thế từ khóa
Kiểm tra xem từ khóa có trong chuỗi | hay không, nếu có sẽ thay thế bằng chính từ khóa đó bao bọc trong thẻ strong và class seclection.
Chúng ta cũng làm tương tự cho excerpt. Về phần biểu thức chính quy, các bạn tìm hiểu trên google nhé :v
if(!function_exists('glw_highlight_search_keyword_excerpt')){
function glw_highlight_search_keyword_excerpt($limit, $id_post){
$excerpt = get_the_excerpt();
$keys = implode('|', explode(' ', get_search_query()));
// limit words
$excerpt = explode(' ', get_the_excerpt(), $limit);
array_pop($excerpt);
$excerpt = implode(" ",$excerpt);
// highlight keywords
$excerpt = preg_replace('/(' . $keys .')/iu', '<strong class="selection"></strong>', $excerpt)
.'... <b><a class="ml-2 mr-2" href="' .get_permalink($id_post) .'">'.__('Read more','glw').'</a></b>';
echo $excerpt;
}
}
Các bạn hiển thị bài viết trong vòng lặp, sử dụng tiêu đề và đoạn văn bản rút gọn excerpt đã tùy chỉnh
<?php
if($search_query->have_posts()):
?>
<div class="row">
<?php
while($search_query->have_posts()):
$search_query->the_post();
?>
<div class="col-xs-12 col-sm-6 mb-30">
<div class="blog-post">
<div class="thumb text-center">
<a href="<?php the_permalink( ); ?>">
<?php
the_post_thumbnail( 'grid_post_thumbnail', array(
'alt' => get_post_meta( get_post_thumbnail_id(get_the_ID()),
'_wp_attachment_image_alt', true)
));
?>
</a>
</div>
<div class="blog-content ptb-30 plr-35">
<div class="date-box clearfix mb-20">
<h4 class="theme-color pull-left no-margin"><?php echo get_the_time('d'); ?>
<span><?php echo get_the_time('m') ?></span>
</h4>
<div class="name-comment pl-15">
<h5 class=" mb-5"><span class="theme-color">
<?php echo __('By: ', 'glw');?></span> <?php the_author(); ?>
</h5>
<h5 class="no-margin">
<span class="theme-color">
<?php echo __('Comments: ', 'glw'); ?>
</span>
<?php echo get_comments_number( get_the_ID() ); ?>
</h5>
</div>
</div>
<a href="<?php the_permalink( ); ?>">
<h3 class="text-capitalize">
<?php glw_highlight_search_keyword_title(4,get_the_ID( )); ?>
</h3>
</a>
<p><?php glw_highlight_search_keyword_excerpt(7, get_the_ID( )); ?></p>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="row">
<div class="col-xs-12">
<?php
glw_custom_pagination();
?>
</div>
</div>
<?php
endif;
?>
Tài liệu WordPress
Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn
Code hoàn thành của bài học: Google Drive
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu thấy bài viết thú vị.
