Tạo shortcode hiển thị số bài viết trong một danh mục “Khuyến Mãi” wordpress, trong mỗi bài viết sẽ có một trường nhập thời gian hết hạn của khuyến mãi.
Quy trình của cách làm này là tạo một trường nhập dữ liệu thời gian hết khuyến mãi cho từng khuyến mãi khi tạo, sau đó dùng shortcode để tính toán và hiển thị lại các thông tin đấy. Thông thường mình có thể sử dụng ACF để tạo form này nhưng trong bài viết này thì đoạn mã dưới đây sẽ tạo luôn mà không cần phải dùng plugin ACF.
Bước 1: Tạo danh mục bài viết Khuyến mãi
Bước 2: Thêm tất cả mã này vào functions.php của theme để tạo shortcode hiển thị bài viết và thời gian hết khuyến mãi
function khuyen_mai_shortcode() {
$args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => 'khuyen-mai'
)
),
'meta_key' => 'promotion_expiration',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$output = '';
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$expiration = get_post_meta(get_the_ID(), 'promotion_expiration', true);
$output .= '<p>' . get_the_title() . ' - Hết hạn: ' . $expiration . '</p>';
}
} else {
$output .= '<p>Không có bài viết nào trong danh mục "Khuyến Mãi".</p>';
}
wp_reset_postdata();
return $output;
}
add_shortcode('khuyen_mai', 'khuyen_mai_shortcode');
function add_promotion_expiration_meta_box() {
add_meta_box(
'promotion_expiration_meta_box',
'Thời gian hết hạn khuyến mãi',
'promotion_expiration_meta_box_callback',
'post'
);
}
add_action('add_meta_boxes', 'add_promotion_expiration_meta_box');
function promotion_expiration_meta_box_callback($post) {
wp_nonce_field(basename(__FILE__), 'promotion_expiration_nonce');
$promotion_expiration = get_post_meta($post->ID, 'promotion_expiration', true);
echo '<label for="promotion_expiration">Hết hạn:</label>';
echo '<input type="text" id="promotion_expiration" name="promotion_expiration" value="' . esc_attr($promotion_expiration) . '" size="25">';
}
function save_promotion_expiration_meta_box($post_id) {
$is_autosave = wp_is_post_autosave($post_id);
$is_revision = wp_is_post_revision($post_id);
$is_valid_nonce = (isset($_POST['promotion_expiration_nonce']) && wp_verify_nonce($_POST['promotion_expiration_nonce'], basename(__FILE__))) ? 'true' : 'false';
if ($is_autosave || $is_revision || !$is_valid_nonce) {
return;
}
if (isset($_POST['promotion_expiration'])) {
update_post_meta($post_id, 'promotion_expiration', sanitize_text_field($_POST['promotion_expiration']));
}
}
add_action('save_post', 'save_promotion_expiration_meta_box');
Cuối cùng ta được shortcode:
[khuyen_mai]
để sử dụng theo mong muốn của bạn.
Bước 3: Tạo một file JavaScript tên promotion-countdown.js trong thư mục theme của bạn với mã sau:
document.addEventListener('DOMContentLoaded', function() {
var countdowns = document.querySelectorAll('.promotion-countdown');
countdowns.forEach(function(countdown) {
var expirationDate = new Date(countdown.dataset.expiration);
var now = new Date();
var timeDiff = expirationDate - now;
if (timeDiff > 0) {
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
countdown.innerHTML = days + ' ngày ' + hours + ' giờ ' + minutes + ' phút ' + seconds + ' giây';
setInterval(function() {
timeDiff -= 1000;
if (timeDiff > 0) {
seconds = Math.floor(timeDiff / 1000);
minutes = Math.floor(seconds / 60);
hours = Math.floor(minutes / 60);
days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
countdown.innerHTML = days + ' ngày ' + hours + ' giờ ' + minutes + ' phút ' + seconds + ' giây';
} else {
countdown.innerHTML = 'Hết hạn';
}
}, 1000);
} else {
countdown.innerHTML = 'Hết hạn';
}
});
});
Bước 4: Chèn code này để khai bào js vào theme:
function enqueue_promotion_countdown_script() {
wp_enqueue_script( 'promotion-countdown', get_template_directory_uri() . '/promotion-countdown.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_promotion_countdown_script' );
Bước 5: Lấy HTML này để hiển ở vị trí bạn muốn:
<div class="promotion-countdown" data-expiration="<?php echo esc_attr(get_post_meta(get_the_ID(), 'promotion_expiration', true)); ?>"></div>