Bài viết sau mình sẽ hướng dẫn bạn cách tạo form tìm kiếm trong wordpress. Chức năng tạo form tìm kiếm trong wordpress giúp cho người dùng dễ tìm kiếm nội dung trong website của bạn hơn. Ngoài ra nó cũng là một yếu tố để google đánh giá cao website của bạn khi có form tìm kiếm cho người dùng. Bài viết sau thuộc chuyên mục WordPress Development. Dưới đây mình sẽ hướng dẫn bạn cách tạo form tìm kiếm trong wordpress dùng code php, html, css. Bạn sẽ không cần phải dùng thêm plugin nào nữa.

Cách tạo form tìm kiếm trong wordpress bằng code

Đầu tiên trong file function.php của theme bạn thêm đoạn code sau để thêm shortcode tìm kiếm vào:

add_shortcode( 'csw_search_form', 'csw_search_form_fc' );
function csw_search_form_fc(){
    ?>
    <form method="get" class="csw-search-form" action="<?php echo get_home_url() ?>">
    <input type="search" class="csw-search-field" placeholder="Tìm Kiếm" value="" name="s">
    <button type="submit" class="csw-search-submit">
        <i class="fas fa-search"></i>
    </button><br>
    </form>
    <?php
}

Để sử dụng bạn cần sử dụng shortcode . Bạn dán shortcode trên vào widget, editor, những nơi hỗ trợ shortcode trong wordpress.

Đoạn mã trên mới giúp hiển thị form search HTML nên bạn nhìn sẽ rất xấu. Bạn cần css cho form seach này. Bạn có thể sử dụng code CSS sau:

.csw-search-form {
  position: relative;
}
.csw-search-form input.csw-search-field {
  width: 100%;
  border: 1px solid #e5e5e5;
  padding: 20px 15px;
  height: 48px;
  color: #333;
  font-size: 16px;
  border-radius: 3px;
}
.csw-search-form input.csw-search-field::placeholder {
  color: #666;
}
.csw-search-form button.csw-search-submit {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: #fff;
  border: none;
  height: 46px;
  cursor: pointer;
  width: 46px;
  padding: 0;
  padding-right: 10px;
}
.csw-search-form button.csw-search-submit i {
  font-size: 18px;
  color: #666;
}

Như vậy là bạn đã hoàn thành cách tạo form tìm kiếm trong wordpress bằng shortcode khá đơn giản. Để sử dụng bạn thêm đoạn shortcode vào những nơi hỗ trợ shortcode như editor, widget, …

Kết quả form tìm kiếm khi hoàn thành:

Kết Luận

Qua bài viết trên Chuẩn Seo Web đã hướng dẫn bạn cách tạo form tìm kiếm trong wordpress đơn giản nhất. Hy vọng sẽ giúp ích cho bạn. Nếu bạn có thắc mắc hay câu hỏi gì bạn vui lòng để lại bình luận bên dưới. Cám ơn bạn đã theo dõi bài viết.