Shortcode là công cụ mạnh mẽ giúp bạn tạo các khối hiển thị sản phẩm tiếp thị liên kết một cách trực quan, đồng bộ và dễ quản lý ngay trong nội dung website WordPress. Bài viết này sẽ hướng dẫn chi tiết cách tạo shortcode làm tiếp thị liên kết từ bước thiết lập dữ liệu đến tối ưu giao diện để tăng tỷ lệ chuyển đổi.
Các công cụ cần thiết để tạo Short code làm tiếp thị liên kết
Để xây dựng hệ thống quản lý sản phẩm affiliate chuyên nghiệp mà không cần kiến thức lập trình quá phức tạp, bạn cần chuẩn bị hai plugin quan trọng sau đây:
- Advanced Custom Fields (ACF) PRO: Plugin này cho phép bạn tạo các trường dữ liệu tùy chỉnh (custom fields) để lưu trữ thông tin sản phẩm như giá cả, link affiliate, tên shop. Lưu ý bạn nên sử dụng bản PRO để tận dụng tính năng “Repeater” – giúp thêm nhiều shop cho cùng một sản phẩm.
- Custom Post Type UI (CPT UI): Plugin này giúp bạn tạo danh mục (post type) riêng biệt cho sản phẩm affiliate (ví dụ: “shopee_product”), giúp quản lý sản phẩm tách biệt hoàn toàn với bài viết thông thường.
Quy trình thực hiện tạo Short code affiliate
Bước 1. Tạo danh mục sản phẩm mới với Custom Post Type UI
Đầu tiên, bạn cần cấu hình để website nhận diện một loại nội dung mới dành riêng cho sản phẩm affiliate:
- Truy cập Custom Post Type UI -> Add/Edit Post Type.
- Tại ô Post Type Slug, điền
shopee_product. - Hoàn thiện các trường thiết lập cơ bản và nhấn Add Post Type.
Sau khi thiết lập, menu Shopee Product sẽ xuất hiện trên thanh công cụ của WordPress Dashboard.
Tạo danh mục sản phẩm aff
Bước 2. Thêm trường dữ liệu bằng Advanced Custom Fields PRO
Bước này giúp tạo các “ngăn” để bạn điền thông tin sản phẩm mỗi khi đăng bài:
- Vào ACF -> Field Groups -> Add New. Đặt tên group là “Shopee Product”.
- Field 1: Đặt tên là
product_image, loại field là Image để hiển thị ảnh đại diện sản phẩm. - Field 2: Đặt tên là
affiliate_shops, loại field là Repeater. Trong phần Repeater, thêm 3 Sub-fields:- Shop Name (dạng Text)
- Affiliate Link (dạng URL)
- Shop Price (dạng Text)
- Trong phần Location Rules, hãy cài đặt hiển thị Field Group này khi Post Type is equal to shopee_product.
Thêm trường dữ liệu vào shopee product
thêm shopee image
thêm link và giá vào shopee product aff
Bước 3. Thêm sản phẩm vào hệ thống
Bây giờ, mỗi khi có sản phẩm affiliate mới, bạn chỉ cần vào menu Shopee Product -> Add New:
- Điền tên sản phẩm.
- Tải ảnh sản phẩm lên.
- Trong mục Affiliate Shop, điền thông tin shop, giá và link tiếp thị của bạn.
Sau khi lưu, URL sản phẩm sẽ có định dạng: https://domain.com/shopee_product/slug-san-pham. Bạn sẽ sử dụng phần “slug-san-pham” để gọi shortcode sau này.
Tạo sản phẩm trong Short code làm tiếp thị liên kết
Hướng dẫn tạo link shopee aff trên website
Bước 4. Lập trình hiển thị Short code
Để hiển thị sản phẩm ra ngoài bài viết, bạn cần thêm đoạn mã xử lý vào file functions.php của theme đang sử dụng.
sửa file functions.php
// Tạo shortcode aff shopee //
function aff_product_shortcode($atts){
$atts = shortcode_atts([
'slug' => ''
], $atts);
$product = get_page_by_path(
$atts['slug'],
OBJECT,
'shopee_product'
);
if(!$product){
return '';
}
$id = $product->ID;
$title = get_the_title($id);
$reviews = 99 + ($id % 800);
$image = get_field('product_image', $id);
if(is_array($image)){
$image_url = $image['url'] ?? '';
}elseif(is_numeric($image)){
$image_url = wp_get_attachment_url($image);
}else{
$image_url = $image;
}
ob_start();
?>
<div class="aff-product-box">
<div class="aff-product-image">
<?php if($image_url): ?>
<img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($title); ?>">
<?php endif; ?>
</div>
<div class="aff-product-info">
<h3 class="aff-product-title">
<?php echo esc_html($title); ?>
</h3>
<div class="aff-product-rating">
★★★★★ <span>(<?php echo $reviews; ?> đánh giá)</span>
</div>
<?php if(have_rows('affiliate_shops',$id)): ?>
<?php while(have_rows('affiliate_shops',$id)): the_row();
$shop_name = get_sub_field('shop_name');
$shop_price = get_sub_field('shop_price');
$shop_price = preg_replace('/[^0-9]/', '', $shop_price);
$shop_link = get_sub_field('affiliate_link');
?>
<div class="aff-shop-row">
<span class="aff-shop-price">
<?php echo number_format((int)$shop_price, 0, ',', '.'); ?>₫
</span>
<a href="<?php echo esc_url($shop_link); ?>"
target="_blank"
rel="nofollow sponsored"
class="aff-product-button">
Mua tại <?php echo esc_html($shop_name); ?>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('aff','aff_product_shortcode');
Tùy chỉnh giao diện bằng CSS
Để khối sản phẩm trông chuyên nghiệp và bắt mắt hơn, bạn hãy dán đoạn code dưới đây vào phần Tùy chỉnh -> CSS bổ sung:
/* cài đặt aff link shopee */
.aff-product-box{
display:flex;
gap:20px;
padding:15px;
border:1px solid #e5e5e5;
border-radius:8px;
margin:20px 0;
align-items:flex-start;
}
.aff-product-image{
width:300px;
flex-shrink:0;
}
.aff-product-image img{
width:300px;
height:300px;
object-fit:contain;
display:block;
}
.aff-product-info{
flex:1;
}
.aff-product-title{
margin:0 0 10px;
font-size:24px;
font-weight:700;
line-height:1.4;
}
.aff-product-rating{
color:#f5a623;
font-size:16px;
margin-bottom:20px;
}
.aff-product-rating span{
color:#666;
margin-left:5px;
}
.aff-shop-row{
display:flex;
align-items:center;
gap:15px;
margin-bottom:12px;
}
.aff-shop-price{
width:140px;
color:#e53935;
font-size:22px;
font-weight:700;
}
.aff-product-button{
display:inline-block;
background:#ee4d2d;
color:#fff !important;
padding:8px 15px;
border-radius:5px;
text-decoration:none;
font-weight:600;
}
.aff-product-button:hover{
opacity:.9;
}
Sử dụng Short code trong bài viết
Sau khi đã hoàn tất các bước cài đặt, bạn chỉ cần chèn đoạn shortcode sau vào bất cứ vị trí nào trong bài blog của mình:
Ví dụ, bạn muốn chèn sản phẩm hosting vào giữa bài viết, hãy sử dụng:
Mua hosting – tên miền giá rẻ nhanh chóng
thêm short code vào bài viết
Việc tự tạo shortcode làm tiếp thị liên kết không chỉ giúp website trình bày sản phẩm trực quan, dễ quản lý mà còn hỗ trợ tái sử dụng linh hoạt ở nhiều vị trí. Khi kết hợp cùng nội dung hữu ích, đây là cách hiệu quả để tối ưu chuyển đổi cho website affiliate của bạn.