Đôi lúc các bạn muốn show một số bài viết mới ra Sidebar hoặc Trang Chủ nhưng chưa biết phải dùng cách nào, để có thể tiền cho các bạn tham khảo và nhanh chóng xử lý yêu cầu một cách nhanh nhất mình xin chia sẻ một cách đơn giản dễ thực hiện các bạn có thể tham khảo qua nhé.
Cách thêm code Show bài viết mới nhất cho WordPress
Để hiển thị được bài viết mới nhất ở vị trí mong muốn, ở đây mình sẽ demo một đoạn code để hiể thị bài viết bên thanh sidebar.php hoặc file index.php tùy ý.
<div class="new-post">
<h3 class="title-news">Bài viết mới</h3>
<ul class="news">
<?php $postquery = new WP_Query(array('posts_per_page' => 5));
if ($postquery->have_posts()) {
while ($postquery->have_posts()) : $postquery->the_post();
$do_not_duplicate = $post->ID;?>
<li>
<a href="<?php the_permalink(); ?>"><?php thumbnails_news_hk(); ?></a>
<h4><a href=" <?php the_permalink(); ?> " title=" <?php the_title(); ?> "><?php the_title(); ?></a></h4>
<div class="info">
<span class="date">Ngày đăng: <?php echo get_the_date(); ?></span>
</div>
</li>
<?php endwhile;} ?>
<div class="clear"></div>
</ul>
</div>
- ‘posts_per_page’ => 5 là số bài viết bạn muốn hiển thị.
Định dạng lại bằng CSS cho đẹp mắt
Sau đó bạn có thể CSS một chút cho đẹp mắt theo bố cục website bạn đang thể hiện, mình giới thiệu đoạn CSS tham khảo tương đối cho các bạn cần.
.new-post, .sidebar {
float: right;
width: 330px;
}
h3.title-news {
background: blue;
padding: 10px 5px;
color: #fff;
font-family: 'Tahoma';
text-transform: uppercase;
font-size: 15px;
}
ul.news {
padding: 10px;
border: 1px solid blue;
}
ul.news li {
width: 100%;
clear: both;
padding: 9px 0px;
}
ul.news li a img {
width: 90px;
height: 65px;
float: left;
margin-right: 9px;
padding: 1px;
box-shadow: 0px 0px 2px #999;
}
ul.news li h4 a {
text-decoration: none;
font-family: Tahoma;
color: blue;
text-transform: uppercase;
font-size: 13px;
}
Các bạn thêm vào file style.css của theme bạn đang dùng rồi SAVE lại xem sự thay đổi. Xong mình đã chia sẽ cách Show bài viết mới nhất cho WordPress. Chúc các bạn thành công!
