Hiện nay có một số theme wordpress không hỗ trợ tích hợp tìm kiếm trên thanh menu mà tích hợp ở header hay ở widget. Việc chèn thêm hộp tìm kiếm là điều cần thiết giúp website chúng ta đầy đủ về bố cục hơn, thân thiện người dùng hơn.
Trong bài viết này, mình sẽ hướng dẫn cách insert box search vào 1 thanh menu từ 1 theme chưa được tích hợp sẵn.
Tại sao nên có hộp tìm kiếm cho website?
Với những trang web blog cá nhân thông thường có thể không sử dụng vì ít dữ liệu, nhưng với những trang web tin tức hay bán hàng online thương mại điện tử chứa nhiều thông tin dữ liệu thì tìm kiếm là điều bắt buộc phải có, giúp người dùng khách hàng nhanh chóng tìm được nhu cầu của mình.
Khi bạn thiết kế website bằng wordpress thì mặc định trong widget của wordpress đã có hộp tìm kiếm, bạn chỉ cần vào widget kéo qua sidebar là xong. Tuy nhiên nhiều người mong muốn để box tìm kiếm xuất hiện ngay trên thanh menu để người dùng tiện sử dụng và website bắt mắt hơn thì bắt buộc bạn phải làm thêm những việc khác. Và ở bài này sẽ hướng dẫn bạn.
Thêm hộp tìm kiếm vào thanh menu trong wordpress sử dụng function
Có nhiều cách để bạn thêm 1 hộp tìm kiếm vào wordpress, nhưng ở bài này mình sẽ hướng dẫn bạn dưới dạng function. Thêm đoạn code function và 1 chút css lại là xong.
Bước 1 : Copy đoạn code sau thêm vào file function.php. Chú ý file function rất nhạy cảm dễ làm web bị sập nếu bạn bỏ sai vị trí. Vì vậy cần xem đúng vị trí của các function và bỏ đúng vào đó.
add_filter('wp_nav_menu_items','add_search_box_to_nav_menu', 10, 2);
function add_search_box_to_nav_menu( $items, $args ) {
if( $args->theme_location == 'primary' )
return $items.get_search_form();
return $items;
}
Bước 2 : Thêm đoạn code css sau vào file style.css hoặc custom css ở trong theme option của bạn.
nav#access form#searchform {
float: right;
padding-top: 5px;
right: 15px;
max-width: 200px;
}
nav#access #searchform:after {
top: 5px;
}
nav#access #searchsubmit {
top: 5px;
}
Chỉ qua 2 bước này thôi là bạn đã chèn thành công hộp tìm kiếm vào thanh menu của website. Dưới đây là kết quả của mình.
Chúc bạn thành công!
