Hướng dẫn chèn sản phẩm liên kết vào blog Affiliate

Hướng dẫn chèn sản phẩm liên kết vào blog Affiliate cho website wordpress

Trong bài Hướng dẫn chèn sản phẩm liên kết vào blog Affiliate này đội ngũ Thiết kế web Nam Định sử dụng Plugin Advanced Custom Fields (ACF). Nếu website wordpress của các bạn chưa cài Plugin thì vui lòng tải và cài đặt plugin ACF

Các bạn có thể tải Plugin tại đây (Plugin sạch get link trực tiếp từ Google Drive)

Tải xuống tại đây

Bước 1: Cài đặt và kích hoạt plugin Advanced Custom Fields (ACF)

Để cài đặt Plugin ACF chúng ta cũng tiến hành cài đặt bình thường như các Plugin khác

• Các bạn đăng nhập vào menu quản trị Admin wordpress > Chọn Plugin > Cài Mới > Tải plugin > Chọn tệp 

Các bạn chọn tệp Plugin vừa tải bên trên về và nhấn vào Cài Đặt

Đợi Plugin được cài đặt xong các bạn chọn Kích hoạt luôn Plugin

Bước 2: Tạo trường tùy chỉnh trong Advanced Custom Fields

Sau khi Plugin được kích hoạt các bạn sẽ thấy trong menu Admin wordpress có thêm menu ACF.

Chọn Field Group > Add New

Ở đây mình đặt tên Field Group là: Affiliate sản phẩm (các bạn có thể đặt tên gì tùy ý)

Và tạo các Field như hình:

Ở đây các bạn chú ý các mục  1 – 2 – 3 mình đánh dấu, nếu các bạn không thạo code có thể tạo các field như hình chú ý phần Type.

Sau khi đã tạo đầy đủ các field như trên các bạn kéo xuống bên dưới phần Setting và đặt điều kiện cho field group hoạt động

1. Chọn Post Type —- Bài viết (1)
2. Chọn Post Category —- Review (2)

Nếu các bạn muốn hiển thị trên tất cả bài viết thì chỉ cần set rule (1) là xong. Như hình mình set thêm rule (2) nữa để phần custom này chỉ hiển thị trong Post Category – Review

Tất cả đã OK thì Lưu lại (Save Changes)

Bước 3: Chỉnh sửa trang single post của blog

1. Các bạn vào menu Giao diện > Theme file Editor
2. Chọn theme các bạn đang kích hoạt
3. Tìm đến file content-single.php theo đường dẫn template-parts > posts > content-single.php
4. Thêm đoạn code bên dưới vào sau dòng <?php the_content(); ?>

<?php 
$ten_san_pham=get_field('ten_san_pham');
$thuong_hieu=get_field('thuong_hieu');
$dac_diem_chinh=get_field('dac_diem_chinh');
$gia_san_pham=get_field('gia_san_pham');
$thanh_phan_noi_bat=get_field('thanh_phan_noi_bat');
$phu_hop_voi=get_field('phu_hop_voi');
$dung_tich=get_field('dung_tich');
$khoi_luong=get_field('khoi_luong');
$link_shopee=get_field('link_shopee');
$link_sendo=get_field('link_sendo');
$link_tiki=get_field('link_tiki');
$link_lazada=get_field('link_lazada');
if($ten_san_pham){
echo '<div class="thong-tin-sp">';
echo '<div class="thuong-hieu">';
echo '<span class="label"> Thương hiệu:</span>';
echo '<span class="value">';
echo $thuong_hieu;
echo '</span>';
echo '</div>';
echo '<div class="ten-san-pham">';
echo '<h3>Tên sản phẩm:';
echo $ten_san_pham;
echo '</h3>';
echo '</div>';
echo '<div class="thong-tin-mo-ta">';
echo '<h4>Mô tả sản phẩm:</h4>';
echo $dac_diem_chinh;
echo '</div>';
echo '<div class="thong-tin-chinh">';
echo '<table class="product_spec"><tbody><tr><th>Giá</th><td>';
echo '<span class="price">';
echo number_format($gia_san_pham)."đ <br>";
echo '</span>';
echo '</td></tr><tr><th>Dung tích</th><td>';
echo $dung_tich;
echo '</td></tr><tr><th>Thành phần nổi bật</th><td>';
echo $thanh_phan_noi_bat;
echo '</td></tr><tr><th>Phù hợp với</th><td>';
echo $phu_hop_voi;
echo '</td></tr></tbody></table>';
echo '</div>';
echo '<div class="row-info">';
echo '<div class="left">';
$image =get_field('anh_san_pham');
$size = 'full';
if( !empty( $image ) ){
echo '<img src="';
echo esc_url($image['url']);
echo '"/>';
}
echo '</div>';
echo '<div class="right">';
echo '<div class="rating">';
echo '<h4> Người dùng đánh giá</h4>';
echo '<span class="stars"><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-half"></span> <strong>4.6</strong></span>';
echo '</div>';
echo '<a href="'; echo $link_shopee; echo '" target="blank" class="shopee"> Xem giá trên Shopee.vn</a>';
echo '<a href="'; echo $link_tiki; echo '" target="blank" class="tiki"> Xem giá trên Tiki.vn</a>';
echo '<a href="'; echo $link_sendo; echo '" target="blank" class="sendo"> Xem giá trên Sendo.vn</a>';
echo '<a href="'; echo $link_lazada; echo '" target="blank" class="lazada"> Xem giá trên Lazada.vn</a>';
echo '</div>';
echo '</div>';
echo '</div>';
}?>

Sau đó bấm lưu lại (Cập nhật tập tin)

Bước 5: Thêm một chút CSS cho phần hiển thị được đẹp mắt nhỉ

Các bạn vào Tùy biến > CSS bổ xung , copy đoạn CSS bên dưới dán vào đó và lưu lại

.thong-tin-sp {
background: #fff5f9;
padding: 15px;
border: 2px dashed #ff57aa;
border-radius: 0px;
margin-bottom: 20px;
}
.thong-tin-sp .thuong-hieu {
display: block;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}
.thong-tin-sp .ten-san-pham h3 {
color: #eb6b8c;
font-size: 23px;
}
.thong-tin-sp .thong-tin-mo-ta {
background: #ffffff;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ffffff;
}
.thong-tin-sp .thong-tin-mo-ta h4 {
font-size: 16px;
}
table {
width: 100%;
margin-bottom: 1em;
border-color: #ececec;
border-spacing: 0;
}
.thong-tin-sp table tr th {
text-transform: none;
font-size: 16px;
letter-spacing: 0;
}
.thong-tin-sp table td {
font-size: 16px;
}
.thong-tin-sp .price {
font-weight: bold;
color: #ef4873;
}
.thong-tin-sp .row-info {
display: inline-block;
width: 100%;
clear: both;
}
.thong-tin-sp .row-info .left {
display: inline-block;
width: 50%;
padding-right: 10px;
float: left;
}
.blog-single .entry-content img {
margin-bottom: 20px;
}
.thong-tin-sp .row-info .right {
display: inline-block;
width: 50%;
padding-left: 10px;
float: right;
}
.thong-tin-sp .row-info .right .rating h4 {
font-size: 17px;
}
.dashicons, .dashicons-before:before {
font-family: dashicons;
display: inline-block;
line-height: 1;
font-weight: 400;
font-style: normal;
speak: never;
text-decoration: inherit;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 20px;
height: 20px;
font-size: 20px;
vertical-align: top;
text-align: center;
transition: color .1s ease-in;
}
.thong-tin-sp .rating {
display: block;
margin-bottom: 15px;
}
.entry-content .dashicons-star-filled:before {
color: #ffc107;
}
.thong-tin-sp .row-info a.shopee {
background: #ff6207;
}
.thong-tin-sp .row-info a.tiki {
background: #2196f3;
}
.thong-tin-sp .row-info a.sendo {
background: #f71302;
}
.thong-tin-sp .row-info a.lazada {
background: #3f51b5;
}

Các bạn tạo một bài viết mới chọn danh mục điều kiện để điên các field dành cho sản phẩm, sau đó đăng bài viết và hưởng thụ thành quả thôi nào.

Bonus

Đoạn code trên là các nút hiển thị ra bên ngoài single post, các bạn có thể xóa đi các sàn mà bạn không làm Affiliate.

Hoặc thêm vào điều kiện cho nó, chỉ hiển thị ra bên ngoài khi các field tương ứng được nhập dữ liệu

Ví dụ:

if (!empty($link_shopee)) {
echo '<a href="' . $link_shopee . '" target="_blank" class="shopee">Xem giá trên Shopee</a>';
}

Trên đây là toàn bộ Hướng dẫn chèn sản phẩm liên kết vào blog Affiliate trên nền tảng wordpress, cài đặt Plugin và thêm code vào content-single.php để hiển thị sản phẩm trong bài viết. Chúc các bạn thành công!!!