Hiển thị ngày cập nhật bài viết trên WordPress

hien thi ngay cap nhat bai viet tren wordpress

Hiển thị ngày cập nhật bài viết trên wordpress

Hôm nay Hocban.vn sẽ chia sẻ đến anh em thủ thuật để hiển thị ngày cập nhật bài viết trên WordPress, và cụ thể là nó áp dụng cho theme Smartline. Từ đó anh em vận dụng để làm trên theme đang sử dụng nhé !

Thêm ngày cập nhật để làm gì ?

Xét về mặt trải nghiệm người dùng thì việc hiển thị thông tin ngày cập nhật sẽ giúp người đọc có thêm thông tin về bài viết mà họ đang xem, cụ thể là coi thử nó đã được chỉnh sửa, bổ sung bao lâu rồi. Tất nhiên là ai cũng sẽ thích những bài viết thường xuyên được cập nhật, mình cũng vậy :p

Đối với SEO thì Google sẽ đánh giá cao với những website có trường thời gian cập nhật, thông qua đó tăng thứ hạng của bài viết lên cao hơn trong kết quả tìm kiếm. Tuy nhiên, thủ thuật này không giúp ích gì cho việc đó, đơn giản là cung cấp thêm thông tin cho người dùng thôi.



Cách hiển thị ngày cập nhật bài viết trên WordPress

Hiện nay các bạn vào Google tìm kiếm về thủ thuật này chắc cũng khá nhiều đấy, tuy nhiên nó không phải dễ làm đối với những bạn không rành code như mình, mặc khác mỗi theme mỗi khác, không biết đâu mà lần.

Do đó nhân dịp nhờ sự hỗ trợ của một số anh em trong nhóm WordPress Việt Nam, mình đã thực hiện được và áp dụng nó cho Hocban.vn (demo như ảnh ở trên). Và dưới đây là các bước thực hiện trên theme Smartline, anh em tham khảo qua nhé !

B1: Theo đường dẫn sau, các bạn tìm đến file template-tags.php và copy code trong đó dán hết vào trình soạn thảo của Sublime Text theo đường dẫn: wp-content/themes/smartline-lite/inc/template-tags.php

B2: Bây giờ trong file template-tags.php các bạn nhấn ctrl + F và tìm đoạn Display Post Date cho mình (cóp bi dán vào nhấn enter là nó tìm thôi). Lúc này các bạn sẽ thấy một đoạn code như sau:

// Display Post Date
function smartline_meta_date() {

	$time_string = sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date published updated" datetime="%3$s">%4$s</time></a>',
		esc_url( get_permalink() ),
		esc_attr( get_the_time() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() )
	);

	echo '<span class="meta-date">' . $time_string . '</span>';
}

B3: Dán đoạn code dưới đây xuống bên dưới cái đoạn code trên:

// HIEN THI NGAY CAP NHAT BAI VIET
function smartline_meta_date_capnhat() {

	$time_string = sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date published updated" datetime="%3$s">%4$s</time></a>',
		esc_url( get_permalink() ),
		esc_attr( get_the_time() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);

	echo '<span class="meta-date-capnhat">' . $time_string . '</span>';
}

Bạn nào không biết cách dán thì xem ảnh minh họa dưới đây nhé ! Sau khi dán xong nó sẽ trông như thế !

Copy va dan doan code lay ngay cap nhat bai viet

Copy và dán đoạn code lấy ngày cập nhật bài viết

B4: Các bạn tìm đến đoạn Display Comments và dán đoạn code dưới đây phía trên dòng <span class=”meta-comments”>

<?php echo smartline_meta_date_capnhat(); ?>

Bạn nào chưa biết làm thì tham khảo hình minh họa dưới đây nhé, như trong hình là ngày cập nhật sẽ hiển thị trước bộ đếm bình luận.

Dan code hien thi ngay cap nhat ben canh bo dem comment

Dán code hiển thị ngày cập nhật bên cạnh bộ đếm comment

B5: Bạn nào biết CSS thì copy đoạn code sau dán vào file Style.css của theme, nếu không rành thì mở phần Customizing >> Additional CSS mà dán nó vào cho lẹ nhé !

.meta-date-capnhat:before {
    content: '\f303';
    margin-right: 3px;
    font-weight: 600 !important;
    font-size: 19px !important;
}

Xong rồi 🤣 , bây giờ bạn có thể tận hưởng thành quả rồi đấy, nếu bạn nào chưa làm được thì rà lại xem có chèn code bị lộn không (đối với theme Smartline). Từ đó làm thử với theme mà bạn đang sử dụng, nếu có gì thắc mắc cứ để lại bình luận bên dưới nhé, good luck 🤣

Bài viết liên quan

Mời bạn oánh giá 😇

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đến từ Gia Lai, lai rai hay đi comment dạo 😂

avatar
5 Comment threads
15 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Trường ĐẹpzaiPhan HùngPhương ElevitTrường ĐẹpzaiHocban.vn Recent comment authors
Trường Đẹpzai <span class="wpdiscuz-comment-count">17 bình luận </span>

Buồn chán quá, cũng muốn tập tành viết blog mà không biết viết về chủ đề gì bây giờ :v

Phan Hùng <span class="wpdiscuz-comment-count">24 bình luận </span>

Hôm e thấy một bài viết hướng dẫn cái này ngắn lắm, trước làm cho thủ thuật 3s rồi mà giờ quên chưa thêm vào cái blog mới này, cả ngày mưa nên nằm ngủ, chiều dậy mới viết được một bài liên quan đến việc tạo blog trên Facebook, bác rảnh qua đàm đạo và chém gió về chủ đề này với em nhé!

Phương Elevit <span class="wpdiscuz-comment-count">3 bình luận </span>

Cái này nó có thay đổi trong Sitemap nữa không nhỉ?

Phương Elevit <span class="wpdiscuz-comment-count">3 bình luận </span>

Tớ là nam nhé 😀 Có vẻ Admin vẫn FA

Phương Elevit <span class="wpdiscuz-comment-count">3 bình luận </span>

Đấy là vợ mình thôi 😀 bác có Skype thì add mình vunh_ex – Mình là admin của wpguide.vn ~ bận quá mà chả viết được mấy

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

Bí quyết để các bài viết trên học bẩn chấm vê lờ có nhiều bình luận là gì thế? Xin được chỉ giáo!!

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

Không hiểu?? :v

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

Viết bài đi anh ạ, vẫn chưa hiểu :v

Doãn Bắc Tâm <span class="wpdiscuz-comment-count">34 bình luận </span>

Cũng khá hay thấy bên wpcanban sử dụng mà mình thì ít khi xem qua 😀

Doãn Bắc Tâm <span class="wpdiscuz-comment-count">34 bình luận </span>

backlink dạo :))