Trong mã nguồn WordPress có khá nhiều plugin hỗ trợ hiển thị bài viết mới. Tuy nhiên nhược điểm khi sử dụng đó là website trở nên nặng nề. Chúng ta nên hạn chế thấp nhất việc dùng Plugin. Chính vì thế hôm nay Quỳnh chia sẻ một bài hướng dẫn show code hiển thị bài viết mới nhất wordpress sử dụng Shortcode khá tiện lợi.
Shortcode có thể đặt bất cứ vị trí nào trên website. Viết cũng khá đơn giản tương tự thế này [recent-postss]. Nếu bạn chưa biết cách tạo Shortcode hãy tham khảo bài viết này.
Hướng dẫn viết Shortcode hiển thị bài viết mới nhất trong WordPress
Để không gặp trục trặc trong quá trình làm bạn nên thực hành trên Localhost của máy tính. Dưới đây là các bước thực hiện như sau:
Bước 1: Mở file functions.php
cho đoạn code sau xuống dưới cùng
function rp_quachquynh() {
ob_start();
$args = array(
'post_type' => 'post',
'posts_per_page' => '6',
'order' => 'desc',
'suppress_filters' => 0,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<ul class="recent-posts">';
echo '<li>';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_post_thumbnail().'</a>';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_title().'</a><br/>';
echo get_the_date();
echo '</li>';
echo '</ul>';
endwhile;
wp_reset_postdata();
$output = ob_get_clean();
return $output;
endif;
}
add_shortcode( 'recent-posts', 'rp_quachquynh' );
Bước 2: Sau khi tạo functions xong bạn sẽ vào Appereance
=> Widget
để thêm một widget mới trên sidebar
Ấn chuột trái vào Text
kéo sang Sidebar rồi viết đoạn [recent-posts]
=> Lưu lại
Kết quả
Bước 3: Sử dụng CSS để hiển thị đẹp hơn. Bạn sẽ mở file style.css
kéo xuống dưới cùng cho đoạn mã này vào
.recent-posts li {
list-style: none;
clear: both;
display: inline-block;
}
.recent-posts li img {
width: 90px;
height: 65px;
float: left;
margin-right: 9px!important;
border-radius: 4px;
object-fit: cover;
}
.recent-posts li a {
text-decoration: none;
font-size: 15px;
color: #2b2b2b!important;
}
Kết luận: Với cách thêm bài viết mới trong WordPress này ưu điểm là sử dụng khá ít code. Để website không gặp vấn đề gì nên thử trên máy tính nhé! Chúc bạn học WordPress hiệu quả.
Hướng dẫn cách tắt comment trong wordpress
Trong quá trình xây dựng và quản lý một trang web WordPress, việc tắt chức năng comment có thể là một yêu cầu phổ biến. Điều này…