Nút copy mã giảm giá tự động mở link affiliate

Chào bạn, bài viết này chia sẻ đến bạn cách thêm nút copy mã giảm giá tự động mở link affiliate. Bạn nào thích nút không tự động mở link thì xem bài Nút copy mã giảm giá không tự động mở link để có thêm tuỳ chọn.

Giới thiệu nút copy mã giảm giá tự động mở link aff

Kiểu nút này thì ae làm aff quá quen thuộc rồi, trước đây mình cũng có dùng, gần đây thì không dùng nữa. Tuy nhiên, các bạn còn xài thì mình còn vọc, ít nhất là để chia sẻ cho ae nào cần. Bản này mình đã tinh chỉnh lại về SEO, tối ưu hiệu suất so với nút copy mà trước giờ ae hay xài.

Nút copy mã giảm giá cho website WordPress
Nút copy mã giảm giá cho website WordPress

Mỗi khi cần chèn nút vào bài viết thì bạn copy nguyên đoạn short code mẫu, sau đó sửa lại nội dung theo ý bạn. Khi người dùng nhấp nút lấy mã giảm giá nó sẽ tự động mở link aff như bạn chèn trong shortcode. Vì là sự kiện mở link khi nhấn nút nên sẽ không bị trình duyệt chặn và cũng không ảnh hưởng tới SEO.

Cách thêm nút nút copy mã giảm giá này

Bước 01: Đầu tiên bạn copy và dán đoạn code sau vào dưới cùng trong file function.php của theme/ child theme đang dùng. Nếu không có child theme thì chèn trên theme mẹ cũng được, nhưng lưu bài viết/ code này lại, khi theme cập nhật thì code đã chèn sẽ mất, copy dán vào lại như cũ là xong.

//Tạo nút copy mã giảm giá có tự động mở link aff trong tab mới.
add_action('wp_enqueue_scripts', function() {
wp_register_style('hocban-coupon-style', false);
wp_register_script('hocban-coupon-js', false, array(), false, true);
});
add_shortcode('coupon_link', function($atts) {
static $hocban_loaded = false;
$atts = shortcode_atts(array(
'link' => 'https://hocban.vn',
'coupon' => 'HOCBAN'
), $atts, 'coupon_link');
if (!$hocban_loaded) {
wp_enqueue_style('hocban-coupon-style');
wp_add_inline_style('hocban-coupon-style', '
.hocban-wrapper { display: flex; flex-direction: column; align-items: center; margin: 25px 0; clear: both; }
.coupon-box-wp { max-width: 210px; width: 100%; text-align: center; }
.coupon-input-container-wp { position: relative; width: 100%; height: 48px; }
.coupon-box-wp input {
padding: 12px !important; border: 1px solid #ccc !important; border-radius: 6px !important;
width: 100% !important; height: 100% !important; font-size: 16.8px !important;
padding-right: 25% !important; text-align: right !important; box-sizing: border-box !important;
background: white !important; color: #333 !important; outline: none !important; font-weight: bold !important;
}
.copy-btn-wp {
position: absolute; left: 0; top: 0; width: 60%; height: 100%;
border: 3px dashed #ff9800; cursor: pointer; font-size: 16.8px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
border-radius: 6px 0 0 6px; transition: all 0.3s ease; z-index: 2;
background: #ffc107; color: #333; text-decoration: none;
}
.copy-btn-wp:hover { background: #28a745; color: white; border-color: #218838; }
.copy-btn-wp.revealed { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.success-msg-wp { margin: 15px 0 0; font-size: 16.8px; color: #28a745; display: none; min-width: 400px; text-align: center; font-weight: 500; }
.success-msg-wp.show { display: block; }
');
wp_enqueue_script('hocban-coupon-js');
wp_add_inline_script('hocban-coupon-js', "
document.addEventListener('click', function(e) {
const btn = e.target.closest('.copy-btn-wp');
if (!btn) return;
e.preventDefault();
const container = btn.closest('.hocban-wrapper');
const val = container.querySelector('input').value;
const msg = container.querySelector('.success-msg-wp');
navigator.clipboard.writeText(val).then(() => {
msg.classList.add('show');
container.querySelector('.copy-btn-wp').classList.add('revealed');
window.open(btn.href, '_blank', 'noopener,noreferrer');
});
});
");
$hocban_loaded = true;
}
$link = esc_url($atts['link']);
$coupon = esc_attr($atts['coupon']);
return "
<div class='hocban-wrapper'>
<div class='coupon-box-wp'>
<div class='coupon-input-container-wp'>
<input type='text' value='{$coupon}' readonly>
<a href='{$link}' class='copy-btn-wp' rel='nofollow sponsored'>Copy mã</a>
</div>
</div>
<p class='success-msg-wp'>Đã copy mã giảm giá thành công và mở trang web của nhà cung cấp !</p>
</div>";
});
//Tạo nút copy mã giảm giá có tự động mở link aff trong tab mới.

Bước 03: Tiếp theo, bạn copy đoạn code copy mã giảm giá có chèn link aff mẫu như bên dưới và chèn vào bài viết hoặc vị trí mong muốn. XÓA ký tự 123 sau khi copy dán, cái này mình phải chèn ký tự thêm vào để nó không biến thành nút copy mã giảm giá trong bài viết.

[123coupon_link link="https://tino.vn/vps-cao-cap?php=2042" coupon="TINOHB35"]

Bước 04: Bạn sửa lại nội dung, link aff của bạn và mã giảm giá tương ứng là được. Sau đó lưu lại và ra mở xem kết quả thôi.

LỜI KẾT

Bạn nào chưa biết thì tham khảo thử nhé, ngoài ra, ae có cách thêm nút mã giảm giá cho website WordPress mà không cần dùng plugin thì comment bên dưới cho mình tham khảo với nhé, cảm ơn ae !

Tịnh Nguyễn
Admin

Mình hay vọc về WordPress, HTML & CSS để cải thiện trải nghiệm duyệt web trên Hocban.vn | Bạn có thể vào mục giới thiệuliên hệ để xem thêm thông tin chi tiết hơn nè.

5 5 đánh giá
Đánh giá bài viết
guest

6 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Huy Gia Lai
Khách
Huy Gia Lai

Sếp nghĩ sao về bẫy click để aff :v

Rin Kobe
Khách
Rin Kobe

Nút copy mã giảm giá huyền thoại đây rồi, e cũng thấy một vài blog WP làm aff dùng.

Phú Nguyễn
Khách
Phú Nguyễn

Trước e cũng thấy bên blog bác Nguyễn Hùng có chia sẻ cái tương tự như này hay sao ấy.