Tùy chỉnh form tìm kiếm của wordpress

Cập nhật lần cuối 16/03/2017 by trong WordPress vào 23/11/2013 có 1008 Views

Mặc định wordpress đã cho chúng ta một form với 1 thuộc tính là text để nhập từ khóa tìm kiếm. Hôm nay chúng ta sẽ thêm thuộc tính cho form để tìm kiếm chính xác hơn nhé. ^^

Dưới đây là hình ảnh sau khi chúng ta hoàn thiện. Chức năng của form này là có thể tìm kiếm theo từ khóa hoặc tìm kiếm theo từ khóa và trong chuyên mục nào.

Tùy chỉnh Form tìm kiếm

Đến chỗ mà bạn muốn hiển thị nội dung form và thêm vào đoạn code sau:


<form method="get" class="searchform" action="<?php echo home_url( '/'); ?>" >
 <select class="form-control" name="cat">
 <option value="">Toàn bộ</option>
 <?php
 $allcategories= get_categories();
 foreach ($allcategories as $c) {
 $option = '<option value="'.$c->cat_ID.'"';
 $option .= '>';
 $option .= $c->name.'('.$c->count.')';
 $option .= '</option>';
 echo $option;
 }
 ?>
 </select>
 <input type="text" class="field s" name="s" value="<?php _e('Nhập từ khóa để tìm kiếm...', '') ?>" onfocus="if (this.value == '<?php _e('Nhập từ khóa để tìm kiếm...', '') ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Nhập từ khóa để tìm kiếm...', '') ?>';}" />
 <input type="submit" class="search-submit btn" name="submit" value="Tìm kiếm" />
</form>

Code trên chúng ta cần quan tâm những thuộc tính như sau:

Liệt kê toàn bộ category trong trang web của chúng ta: get_categories() xem thêm get_categories()

Điều quan trong thứ 2 là name của các thuộc tính. Ở form trên chúng ta đã dùng cat (Trong category nào đó) và s (Từ khóa tìm kiếm). Dưới đây là liệt kê các name khác giúp chúng ta có thể tùy chọn được nhiều hơn nữa ^^


$keys = array(
 'error'
 , 'm'
 , 'p'
 , 'post_parent'
 , 'subpost'
 , 'subpost_id'
 , 'attachment'
 , 'attachment_id'
 , 'name'
 , 'static'
 , 'pagename'
 , 'page_id'
 , 'second'
 , 'minute'
 , 'hour'
 , 'day'
 , 'monthnum'
 , 'year'
 , 'w'
 , 'category_name'
 , 'tag'
 , 'cat'
 , 'tag_id'
 , 'author_name'
 , 'feed'
 , 'tb'
 , 'paged'
 , 'comments_popup'
 , 'meta_key'
 , 'meta_value'
 , 'preview'
 , 's'
 , 'sentence'
 , 'fields'
 , 'menu_order'
 );

Demo tùy chỉnh form tìm kiếm của wordpress
Và đã xong chúc các bạn thành công ^^

Tùy chỉnh form tìm kiếm của wordpress
5 (100%) 1 vote
  • Bình luận
Có thể bạn quan tâm
x