Tạo trang khuyến mãi cho WordPress hiển thị ngày kết thúc

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.

tao trang khuyen mai dich vu cho wordpress

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.

Xem thêm  9 sai lầm cơ bản khi bạn bắt đầu làm SEO

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>

Bài liên quan:

tao sao can mot trang web live xem ket qua bong da chuyen nghiep
thiet ke web casino saobay
bao tri website 2
Cách đăng ký tài khoản ChatGPT tại OpenAI
SMTP miễn phí tương tự Google SMTP
Cac buoc tao mot API xo so 1
Check list 9 ngộ nhận hay gặp về SEO
SEO là gì
CHỌN WEB GIÁ RẺ HAY WEB CHUYÊN NGHIỆP
CHON WORDPRESS HAY PHP THUAN
Thiết kế website TIN TỨC
banner
TOP NCC HOSTING NÊN SỬ DỤNG
SEM 1
cong cu lam content
Tạo nút liên hệ đẹp và Live Chat cho website nhanh chóng dễ dàng
BẢNG GIÁ THIẾT KẾ WEBSITE
Thiết kế web kết quả bóng đá
SỬA LỖI PHẠM VI LẬP CHỈ MỤC
cac ung dung chat tot nhat tuong tu zalo duoc danh gia cao nhat hien nay saobay
tao trang khuyen mai dich vu cho wordpress
Chat hoặc gọi Telegram