Chào bạn, bài viết này mình lưu lại một thủ thuật WordPress đã dùng nhiều năm nay. Đó là cách thêm nút copy mã giảm giá cho website WordPress không dùng plugin. Bạn nào chưa biết thì có thể tham khảo thử nhé.
Sơ bộ về cách thêm nút copy mã giảm giá thủ công này
Nút copy mã giảm giá hoạt động như một short code, bạn thêm đoạn code tính năng này vào file function.php của theme/ child theme đang dùng và một ít CSS vào phần CSS bổ sung là được.
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ẽ mở ra khung có chứa mã giảm giá để copy, đồng thời cũng tự động mở trong tab mới link mà bạn đã chèn.
Cách thêm nút nút copy mã giảm giá thủ công
Bước 01: Đầu tiên bạn thêm đoạn code sau vào file function.php của theme/ child theme đang dùng:
// TAO NUT MA GIAM GIA
function hocban_bt_coupon( $atts) {
extract(shortcode_atts(array(
'link' => '',
'coupon' => '',
'text' => "'Bạn hãy COPY mã giảm giá bên dưới rồi đem mã này vào mục MÃ GIẢM GIÁ (COUPON) khi thanh toán để giảm chi phí nhé !'",
'content' =>'',
'a' => "'"
), $atts));
return '<a href="javascript:void(0)" target="_blank" onclick="s=prompt('.$text.','.$a.''.$coupon.''.$a.');window.open('.$a.''.$link.''.$a.'); " class="coupon-code">'.$content.'</a>';
}
add_shortcode( 'btcoupon', 'hocban_bt_coupon' );
/*Link Coupon.
*/
function hocban_link_coupon( $atts) {
extract(shortcode_atts(array(
'link' => '',
'content' =>'',
'a' => "'"
), $atts));
return '<a href="javascript:void(0)" target="_blank" onclick="window.open('.$a.''.$link.''.$a.');" class="coupon-code">'.$content.'</a>';
}
add_shortcode( 'linkcoupon', 'hocban_link_coupon' );
Bước 2: Thêm CSS sau vào phần CSS bổ sung:
.coupon-code {
background-color: #00c708;
text-align: center;
border: solid #00c708 2px;
font-family: arial;
color: #fff;
cursor: pointer;
font-weight: bold;
font-size: 18px;
padding: 10px 15px;
display: inline-block;
margin-bottom: 10px;
height: initial;
text-decoration: none;
border-radius: 5px;
}
.wpo-coupon.is-deafult {
box-shadow: none;
border: dashed #c70044 2px;
background-color: #fff;
border-radius: 7px;
}
.wpo-coupon .wpo-btn-coupon:hover {
background-color: #03a9f4;
color: #ffffff;
border-color: #03a9f4;
filter: none;
}
.wpo-coupon .wpo-btn-coupon {
color: white;
filter: blur(1.5px);
border-radius: 5px;
background-color: #ff5722;
border: solid black 2px;
}
.wpo-coupon.is-deafult .wpo-coupon__label {
background-color: #e21a5e;
color: #fff;
text-align: center;
padding: 5px;
}
.wpo-coupon.is-deafult .wpo-coupon__expiration {
font-size: 0.8em;
text-align: center;
margin-top: 0.5em;
color: #f44336;
}
.coupon-code {
background-color: #00c708;
text-align: center;
border: solid #00c708 2px;
font-family: arial;
color: #fff;
cursor: pointer;
font-weight: bold;
font-size: 18px;
padding: 10px 15px;
display: inline-block;
margin-bottom: 10px;
height: initial;
text-decoration: none;
border-radius: 5px;
}
a.coupon-code:hover {
background: #ffffff;
border: dashed #ff9800 2px;
}
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 màu đỏ 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 nhấn thôi.
[123btcoupon link="https://portal.vietnix.vn/aff.php?aff=56&url=https://vietnix.vn" coupon="HOCBAN_50LIFETIME" content="COPY MÃ GIẢM GIÁ"]
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. Đây là demo:
LỜI KẾT
Bài này mình lưu lại nội dung đơn giản như vậy thôi, 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 !
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.