#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.

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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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.

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

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

• search.php
• get_search_form

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ị.

Liên hệ