Người Viết : ViKiMi Editor

Hướng dẫn tuỳ chỉnh tìm kiếm / Search Form cho WordPress Website phù hợp ý đồ !
Tìm kiếm / Search là một chức năng của WordPress, không phải một lập trình viên nào cũng muốn phải xử lý. Thực tế đã có quá nhiều những phần mềm hay Plugin hỗ trợ điều này. Nhưng luôn thú vị nếu có thể tự thiết kế một giao diện Search Form theo cách muốn, vì nó luôn luôn đẹp và ổn nhất.

Thiết kế Tìm kiếm / Search cho WordPress Website có khó? Thực tế, không quá khó. Chúng ta chỉ cần một vài xử lý với Function get_search_form và giao diện phù hợp là sẽ thành công. Function get_search_form() sẽ cho phép bạn hiển thị Chức năng tìm kiếm ở bất kỳ đâu trên Website.
<?php get_search_form(); ?>
Trước tiên, chúng ta cần hiểu cách hoạt động của Function này. Khi Function get_search_form được gọi, Function sẽ tìm đến searchform.php trong theme được kích hoạt, nếu searchform.php không tồn tại thì WordPress sẽ cung cấp chức năng thay thế ( của chính WordPress : wp-includes/general-template.php ).
Nếu không muốn sử dụng các cung cấp tìm kiếm / Search của WordPress hoặc Theme, bạn có thể tự tạo một customize cho chức năng này. Đầu tiên, chúng ta cần tạo một Custom HTML search form. Và có thể sử dụng theo ý muốn, Ví dụ như dưới :
<form role=”search” method=”GET” id=”searchform” class=”searchform” action=“<?php home_url( ‘/’ )?>” >
<div class=”custom-form”>
<label class=”screen-reader-text” for=”s”>Tìm Kiếm :</label>
<input type=”text” value=“<?php get_search_query() ?>” name=”s” id=”s” />
<input type=”submit” id=”searchsubmit” value=”Tìm Kiếm” />
</div>
</form>
Tuy nhiên, đây chỉ là một ví dụ Search Form với HTML và nó không thể đẹp như mong muốn của bạn. Có thể Paste và sử dụng Search Form này ở bất kỳ đâu, có thể tìm kiếm mọi thông tin. Nhưng có sẽ không hiệu quả như mong muốn. Cách tốt nhất là thiết kế Search Form với Bootstrap và gọi nó theo đúng cách mà WordPress cung cấp.
A. Thực hiện Cách 1 với Filter ‘get_search_form’
Tạo một Search Form với Bootstrap như sau (Tất nhiên, hãy cài đặt Bootstrap trong Theme) :
<form role=”search” method=”get” id=”search-form” action=“<?php home_url( ‘/’ )?>” class=”form-horizontal”>
<div class=”form-group has-feedback”>
<div class=”col-sm-12″>
<input type=”search” class=”form-control border-0″ placeholder=”Tìm Kiếm” aria-label=”search nico” name=”s” id=”search-input” value=“<?php get_search_query() ?>”>
<span class=”form-control-feedback text-info glyphicon glyphicon-search text-muted”></span>
</div>
</div>
</form>
Với giao diện được thiết kế với Bootstrap chúng ta sẽ sử dụng chúng với Filter ‘get_search_form’ để có một chứa năng phù hợp với WordPress.
Bước 1 : Tạo Function my_search_form
function my_search_form( $form ) {
$form .= ‘<form role=”search” method=”get” id=”search-form” action=”‘. home_url( ‘/’ ) .'” class=”form-horizontal”>’;
$form .= ‘<div class=”form-group has-feedback”>’;
$form .= ‘<div class=”col-sm-12″>’;
$form .= ‘<input type=”search” class=”form-control border-0″ placeholder=”Tìm Kiếm” aria-label=”search nico” name=”s” id=”search-input” value=”‘. get_search_query() . ‘”>’;
$form .= ‘<span class=”form-control-feedback text-info glyphicon glyphicon-search text-muted”></span>’;
$form .= ‘</div>’;
$form .= ‘</div>’;
return $form;
}
Bước 2 : Thêm my_search_form vào Filter ‘get_search_form’
add_filter( ‘get_search_form’, ‘custom_search_form’, 40 );
Bước 3: Gọi Function get_search_form() ở những nơi bạn muốn để hiển thị Chức năng Tìm Kiếm / Search được tuỳ chỉnh. Tại Sidebar.php, search.php … bạn cũng có thể gọi nó.
B. Thực hiện cách 2 tạo searchform.php cho Theme
Cũng có tuỳ chỉnh bằng cách tạo một Template, chỉ cần tạo File searchform.php trong Theme kích hoạt của bạn. WordPress sẽ sử dụng Temaplate này thay cho tìm kiếm lõi được tích hợp. Nội dung của searchform.php như bên dưới :
<?php
/* Custom template for displaying search forms in Theme */
?>
<form role=”search” method=”get” id=”search-form” action=”<?php home_url( ‘/’ )?>” class=”form-horizontal”>
<div class=”form-group has-feedback”>
<div class=”col-sm-12″>
<input type=”search” class=”form-control border-0″ placeholder=”Tìm Kiếm” aria-label=”search nico” name=”s” id=”search-input” value=”<?php get_search_query() ?>”>
<span class=”form-control-feedback text-info glyphicon glyphicon-search text-muted”></span>
</div>
</div>
</form>
Bạn chỉ cần sử dụng Function get_search_form() yêu cầu chức năng Tìm kiếm / Search của WordPress để sử dụng. Bạn cũng có thể tạo các Shortcode hoặc Widgets để sử dụng tuỳ chỉnh mong muốn.
Tất nhiên, Bạn có thể thiết kế các tuỳ chỉnh Search Form sử dụng Bootstrap theo cách mong muốn. Nhờ những tuỳ chỉnh mà có thể có giao diện tốt hơn, chuyên nghiệp hơn. Nếu tuỳ chỉnh nhiều với các chức năng hỗ trợ, có thể hoàn toàn yên tâm cho một Website tương tác cao.