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

28/11/2019, 29/11/2019, 9:56 sáng

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ừ khóa bạn tìm không thấy vui lòng thử lại.</p>
					<?php endif; ?>
				</div>

<?php if(have_posts()) : while(have_posts()) : the_post() ?>

<a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>">

<?php the_post_thumbnail(); ?>

</a>

</div>

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

</div>

<?php endwhile; else: ?>

<p>Từ khóa bạn tìm không thấy vui lòng thử lạ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>

<form action="<?php echo get_home_url(); ?>/" method="get">

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

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ác bài viết cùng chuyên mục

Lọc bài viết theo url danh mục taxonomy wordpress

01/03/2020, 05/03/2020 2:46 sáng

Code lọc bài viết theo url danh mục taxonomy trong wordpress

Code phần hỏi đáp web wordpress Accordion Bootstrap 4

29/02/2020, 29/02/2020 1:55 chiều

Phần code cho phần hỏi đáp trượt lên xuống khá là đẹp hi

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

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

code css

Các bài viết cùng chuyên mục

Lọc bài viết theo url danh mục taxonomy wordpress

Code phần hỏi đáp web wordpress Accordion Bootstrap 4

Netweb.vn trên Facebook

LIÊN HỆ

CÔNG TY TNHH TECHCORP

DỊCH VỤ

HỖ TRỢ

THIẾT KẾ WEB CHUYÊN NGHIỆP

CÔNG TY TNHH TECHCORP CHUYÊN THIẾT KẾ WEBSITE