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