Khung tìm kiếm trên WordPress là một công cụ quan trọng giúp người dùng tìm kiếm và truy cập thông tin trên website của bạn một cách nhanh chóng và dễ dàng. Trong bài viết dưới đây Vietnix sẽ gợi ý cho bạn cách code tìm kiếm trong WordPress dễ thực hiện nhất. Cùng theo dõi nhé.
Code tìm kiếm trong WordPress theme
Để code trang tìm kiếm trong theme WordPress bạn thực hiện như sau:
Bước 1: Tạo trang search.php ngang hàng với thư mục tại website của bạn
Đầu tiên bạn vào mục Appearance trong WordPress Admin sau đó chọn Theme File Editor.
Ở mục Theme Files, bạn tìm kiếm và nhấn vào mục search.php.
Bước 2: Code cho trang search.php
Sau đó bạn chỉnh sửa và code cho trang search.php như sau:
<div id="searchResults">
<?php if(have_posts()) : while(have_posts()) : the_post() ?>
<div class="search">
<div class="post">
<div class="post-image">
<a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="post-info">
<a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><h3><?php the_title(); ?></h3></a>
<div class="location">Ngày đăng: <i><?php the_time('d/m/Y'); ?></i>, Update: <?php the_modified_time('d/m/Y'); ?> Vào lúc: <?php the_modified_time(); ?> </div>
<p><?php the_excerpt(); ?> </p>
</div>
</div>
</div>
<?php endwhile; else: ?>
<p>Từ khóa bạn tìm không thấy vui lòng thử lại.</p>
<?php endif; ?>
Form tìm kiếm với code:
<div class ="timkiem-right">
<form action="<?php echo get_home_url(); ?>/" method="get">
<input type="text" id="s" name="s" class="form-control" value="" placeholder="Bạn muốn tìm gì?">
<button type="submit" class ="tim-tintuc">Tìm ngay</button>
</form>
</div>
Bước 3: Code CSS
Cuối cùng là code CSS cho trang web của bạn.
input#s {
width: 83%;
height: auto;
margin: 10px 0px;
}
@media screen and (max-width: 950px)
{
input#s {
width: 71%;
height: auto;
margin: 10px 0px;
}
}
button.tim-tintuc {
background: #4285f4;
color: #fff;
font-size: 16px;
padding: 6px 20px;
font-weight: bold;
}
Cách tạo shortcode khung tìm kiếm trong WordPress
Để tạo shortcode cho khung tìm kiếm bạn chỉ cần chèn đoạn code dưới đây vào file functions.php của theme hay child theme mà bạn đang dùng.
1 function wpcb_display_search_form() {
2 return get_search_form(false);
3 }
4 add_shortcode('display_search_form', 'wpcb_display_search_form');
Nếu cần tùy chỉnh khung tìm kiếm mặc định, các bạn có thể áp dụng với code sau:
1
2
3
4
5
6
7
function wpcb_display_search_form() {
$search_form = '<form method="get" id="search-form-alt" action="'. esc_url(home_url('/')) .'">
<input type="text" name="s" id="s" placeholder="Tìm kiếm...">
</form>';
return $search_form;
}
add_shortcode('display_search_form', 'wpcb_display_search_form');
Đến đây, để khung tìm kiếm được hiển thị, các bạn sử dụng đoạn shortcode: [display_search_form]
Ngoài ra, bạn có thể dùng plugin WP Shortcode Pro để tạo shortcode cho khung tìm kiếm trong WordPress một cách dễ dàng và nhanh chóng, không lo bị xóa mất khi cập nhật theme. Hoặc bạn cũng có thể sử dụng plugin search WordPress để thiết kế khung tìm kiếm đẹp và chuyên nghiệp hơn.