Thêm icon New vào tiêu đề bài viết mới đăng WordPress

Để thêm icon “new” vào bài viết mới nhất trong WordPress, bạn có thể sử dụng plugin hoặc thêm mã tự viết vào tệp theme của bạn.

Thêm icon New vào tiêu đề bài viết mới đăng WordPress
Demo Thêm icon New vào tiêu đề bài viết mới đăng WordPress

Cách 1: Sử dụng plugin

  • Tìm và cài đặt plugin “New Post Badges” hoặc plugin tương tự.
  • Cấu hình plugin để hiển thị icon “new” trên bài viết mới nhất.

Cách 2: Thêm mã tự viết vào theme

  • Mở tệp functions.php trong theme của bạn.
  • Thêm mã sau vào tệp functions.php:

function new_post_badge() {
global $post;
$post_date = get_the_date('U');
$current_date = current_time('U');
$diff = $current_date - $post_date;
if ($diff < 86400) {
echo ' <span class="new-post-badge">New</span>';
}
}

  • Lưu lại và chèn mã sau vào vị trí bạn muốn hiển thị, có thể chèn trong vòng lặp : <?php new_post_badge(); ?>
  • Chỉnh sửa thuộc tính của class “new-post-badge” trong mã trên để thay đổi kích thước và màu sắc của icon “new”.
  • Thay đổi 86400 = số thời gian bạn muốn

Trên là cách thêm icon vài tiêu đề bài viết mới ở vị trí bạn muốn, còn dưới đây là cách thêm vào toàn bộ vị trí bạn muốn theo type:

function add_new_post_badge_to_title( $title ) {
if( is_singular('post') && is_main_query() ) { // Thêm điều kiện is_main_query()
global $post;
$post_date = get_the_date('U');
$current_date = current_time('U');
$diff = $current_date - $post_date;
if ($diff < 86400) {
$title = ' <span class="new-post-badge">New</span>' . $title ;
}
}
return $title;
}

 

Điều kiện is_main_query() sẽ cho phép icon “new” chỉ hiển thị trong query chính của trang, nếu bài viết đó được liệt kê trong một widget hoặc trong một shortcode thì icon “new” sẽ không hiển thị.

Lưu ý: Nếu muốn thêm icon “new” vào các trang khác nhau ví dụ như archive, category hoặc trang search. Bạn cần thay đổi điều kiện is_singular(‘post’) thành is_archive() hoặc is_search() hoặc is_category()…

Xem thêm  Các bước tạo một API xổ số

Code ví dụ:

function add_new_post_badge_to_title( $title ) {
if( is_archive() || is_search() || is_category() ) { // Thay đổi điều kiện
global $post;
$post_date = get_the_date('U');
$current_date = current_time('U');
$diff = $current_date - $post_date;
if ($diff < 86400) {
$title = ' <span class="new-post-badge">New</span>' . $title ;
}
}
return $title;
}

Hàm is_archive() sẽ kiểm tra xem trang hiện tại có phải là trang archive hay không. Hàm is_search() sẽ kiểm tra xem trang hiện tại có phải là trang search hay không. Hàm is_category() sẽ kiểm tra xem trang hiện tại có phải là trang category hay không.

Các hàm trên sẽ kiểm tra xem trang hiện tại là trang archive hoặc search hoặc category nếu trả về true thì sẽ hiển thị icon “new”, nếu trả về false thì sẽ không hiển thị.

Nếu muốn custom CSS cho icon “new” bạn có thể thêm vào file css của theme hoặc thêm vào tệp functions.php

function add_new_badge_style() {
echo '<style>
.new-post-badge{
color: red;
font-size: 20px;
}
</style>';
}
add_action( 'wp_head', 'add_new_badge_style' );

Viết một bình luận