Thêm biểu tượng new cho bài viết mới trong WordPress

0
216

Bạn có thường thấy các trang web có các biểu tượng “hot“, “new” trong các bài viết mới đăng không? Nó giúp người dùng dễ dàng tìm kiếm nội dung mới và tăng số lần xem trang của bạn. Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để thêm biểu tượng new cho bài viết mới trong WordPress

Hướng dẫn thêm biểu tượng new cho bài viết mới trong WordPress

Tại sao cần thêm “new” vào bài viết mới?

Bạn đọc khi họ quay lại trang web của bạn, thường là những người dùng thích nội dung của bạn và đến trở lại tìm kiếm các bài viết mới. Tuy nhiên, hầu hết những người dùng chỉ bỏ ra vài giây, và họ đi nếu họ không tìm thấy bất cứ điều gì thú vị.

Thêm biểu tượng new cho bài viết mới để làm nổi bật nội dung mới, bạn có thể hướng sự chú ý của người dùng đến nội dung mới nhất. Điều này không chỉ giúp bạn tăng số lần xem trang, mà nó cũng sẽ giúp người dùng tìm thấy nội dung mới nhanh nhất.

Cách 1: Thêm biểu tượng new cho bài viết mới với Plugin

Trong phương pháp này, chúng ta sẽ sử dụng một plugin để làm nổi bật bài viết mới cho người dùng cũ. Phương pháp này rất dễ dàng để thực hiện, và chúng tôi khuyên bạn nên dùng nó cho người mới bắt đầu.

Đầu tiên bạn cài đặt và kích hoạt plugin sau: Mark New Posts

Sau khi kích hoạt, bạn cần phải truy cập Settings » Mark New Posts để thiết lập plugin.

mark-new-post thêm biểu tượng new cho bài viết mới

Trước tiên, bạn cần phải chọn vị trí đánh dấu (Marker placement). Hiển thị đánh dấu trước tiêu đề, sau khi tiêu đề bài viết, hoặc cả hai.

Sau đó bạn cần phải chọn một loại đánh dấu (Marker type). Có một số lựa chọn, theo mặc định plugin sẽ hiển thị một dấu tròn.

Bạn có thể chọn để hiển thị một vòng tròn, một hình ảnh tùy chỉnh, ‘New’ – văn bản, hoặc một lá cờ.

mark-new-post-picture thêm biểu tượng new cho bài viết mới
Marker type: Picture (default)

Đừng quên bấm vào nút save để lưu các thiết lập của bạn.

Cách 2: Thêm biểu tượng new cho bài viết mới thủ công bằng code

Phương pháp này đòi hỏi phải chèn thêm mã (code) vào trang web WordPress của bạn. Nếu bạn tự tin về việc thêm đoạn code vào trang web WordPress của bạn thì có thể thử phương pháp này.

Bạn nên sao lưu lại trang web của mình để phòng sự cố.

Đầu tiên bạn sao chép và dán mã này vào file functions.php trong chủ đề (theme) của bạn.

function wpb_lastvisit_the_title ( $title, $id ) {

if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title;

// if no cookie then just return the title

if ( !isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '' ) return $title;
$lastvisit = $_COOKIE['lastvisit'];
$publish_date = get_post_time( 'U', true, $id );
if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>';
return $title;

}

add_filter( 'the_title', 'wpb_lastvisit_the_title', 10, 2);

// Set the lastvisit cookie

function wpb_lastvisit_set_cookie() {

if ( is_admin() ) return;
$current = current_time( 'timestamp', 1);
setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN );
}

add_action( 'init', 'wpb_lastvisit_set_cookie' );

Mã này sẽ cho một cookie có tên lastvisit khi người dùng đến trang web của bạn. Nếu nó không tìm thấy các tập tin cookie, sau đó nó đặt cookie với thời gian hiện tại.

Nếu nó tìm thấy các tập tin cookie, sau đó nó cho biết thêm ‘new’ cho tiêu đề của bài viết xuất bản từ lần truy cập cuối cùng của người dùng.

Chú ý rằng có một class new-article trong thẻ <span> xung quanh “New”. Bạn sẽ sử dụng lớp này để tạo kiểu cho chữ bằng CSS.

Dưới đây là CSS mẫu cho new-article của chúng tôi. Bạn chỉ cần sao chép và dán nó vào theme của bạn.

.new-article {
background: #feffdd;
padding: 3px;
border: 1px solid #eeefd2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left:5px;
font-size: small;
font-weight: bold;
}

Đây là kết quả

thêm biểu tượng new cho bài viết mới
Nguồn: wpbeginner

Hy vọng bài viết này sẽ giúp bạn thêm biểu tượng new cho bài viết mới thành công.

Thêm biểu tượng new cho bài viết mới trong WordPress
5 (100%) 1 vote

BÌNH LUẬN

Please enter your comment!
Please enter your name here