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.

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 !
Sếp nghĩ sao về bẫy click để aff :v
Bẫy click thì cũng bình thường e, ae trước giờ vẫn làm. Nhưng tự ý mở link mà khách truy cập không ngờ thì trải nghiệm vẫn chưa ngon, kể cả code trên đã công khai mở link luôn rầu, không có âm thầm mở link như truyền thống ae vẫn làm.
Chớ mà Hocban.vn hiện tại đang dùng là nút copy mã tách riêng ra với link aff, ae có lòng thì bấm thêm link đó để ủng hộ, chứ link không tự mở. Code bài trong bài viết này chia sẻ cho ae có nhu cầu mở link tự động thì họ dùng.
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.
Đúng rồi bác, nút này là nút copy mã giảm giá có chèn link aff mà ae hay xài nè. Nhưng bản của e có tinh chỉnh lại sinh động hơ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.
Hình như vậy hay sao á, cái này e xài lâu rồi, cũng kha khá blog xài nút tương tự như này ấy. Hồi xưa có bác chia sẻ trên blog em copy vìa xài, gần đây thì e có tinh chỉnh lại cho nó sinh động hơn.