Hướng dẫn code trang tìm kiếm trong theme wordpress

Hôm nay! tranh thủ làm lại cái page tìm kiếm tranh thủ viết thêm bài mới cho mọi người ạ!

Bước 1: Tạo trang search.php ngang hàng với thư mục trong website của bạn

Code cho trang search.php

<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; ?>
				</div>

Code form tìm kiếm

<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>

 

code css

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;
}

Bài viết mới cập nhập

• 

  Quản lý mẫu web phòng khám

  3 tháng trước, 133 Lượt xem

  Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

• 

  Sửa lỗi Error: MySQL shutdown unexpectedly – tắt Mysql xampp không đúng cách

  4 tháng trước, 184 Lượt xem

  Chào các bạn hôm nay netweb.vn sẽ hướng dẫn các bạn dùng xampp khi bị lỗi Error: MySQL shutdown unexpectedly di tắt mysql không đúng…

• 

  Quản lý mẫu web công ty

  5 tháng trước, 192 Lượt xem

  Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

• 

  Quản lý mẫu web dự án bất động sản

  11 tháng trước, 424 Lượt xem

  Xin chào tất cả các khách hàng dùng mẫu web dự án bất động sản bên netweb, sau đây netweb.vn xin hướng dẫn các bạn…

• 

  Kích hoạt Gutenberg Editor cho các sản phẩm WooCommerce

  11 tháng trước, 185 Lượt xem

  Trình chỉnh sửa khối Gutenberg cũng có thể được sử dụng cho mô tả sản phẩm WooCommerce. Thật không may, không phải là tiêu chuẩn, nhưng…