Thủ thuật Theme Flatsome, Bài Viết, Tất cả bài viết

Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Đăng vào Tháng 4 13, 2025Tháng 4 13, 2025 bởi Quản trị viên

13/04/2025

3 Phút đọc

436 Lượt xem

Đánh giá

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh hoạt? Trong bài viết này, mình sẽ chia sẻ thủ thuật Flatsome giúp bạn tạo shortcode đánh giá khách hàng có hình ảnh, sao đánh giá, hiệu ứng đẹp mắt, đặc biệt là tích hợp trực tiếp trong UX Builder để dễ dàng kéo thả!

Lợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biến

Tăng độ tin tưởng từ khách truy cập.
Nâng cao trải nghiệm người dùng với giao diện đẹp, tương tác mượt mà.
Tùy chỉnh linh hoạt: màu sắc, số sao, vị trí ảnh, hiệu ứng hover.
Tối ưu SEO với từ khóa liên quan đến sản phẩm/dịch vụ.

Tạo Shortcode Đánh Giá Khách Hàng

Chèn đoạn mã sau vào cuối file functions.php trong theme con của bạn:

// Shortcode đánh giá khách hàng - muathemewpgiare.com
function muathemewpgiare_review_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => 'Khách hàng nói gì?',
        'stars' => 5,
        'content' => 'Sản phẩm rất tuyệt vời, giao hàng đúng hẹn.',
        'title_color' => '#333333',
        'text_color' => '#666666',
        'bg_color' => '#f9f9f9',
        'image_id' => '',
        'star_icon' => '★',
        'star_empty_icon' => '☆',
        'hover_effect' => 'true',
        'image_position' => 'below',
        'padding' => '20px',
        'margin' => '10px',
        'image_size' => '60px',
        'border_radius' => '50%',
    ), $atts, 'muathemewpgiare_review');

    $stars_html = '';
    for ($i = 1; $i <= 5; $i++) {
        $stars_html .= '<span class="star">' . ($i <= intval($atts['stars']) ? esc_html($atts['star_icon']) : esc_html($atts['star_empty_icon'])) . '</span>';
    }

    $image_url = $atts['image_id'] ? wp_get_attachment_image_url($atts['image_id'], 'thumbnail') : '';

    ob_start(); ?>
    <div class="muathemewpgiare-review <?= esc_attr($atts['image_position']); ?>" style="background: <?= esc_attr($atts['bg_color']); ?>; padding: <?= esc_attr($atts['padding']); ?>; margin: <?= esc_attr($atts['margin']); ?>; border-radius: 12px; display: flex; flex-direction: <?= in_array($atts['image_position'], ['above', 'below']) ? 'column' : 'row'; ?>; align-items: center; gap: 20px;">
        <?php if (in_array($atts['image_position'], ['above', 'left']) && $image_url): ?>
            <div class="reviewer-image">
                <img src="<?= esc_url($image_url); ?>" style="width: <?= esc_attr($atts['image_size']); ?>; height: <?= esc_attr($atts['image_size']); ?>; border-radius: <?= esc_attr($atts['border_radius']); ?>; object-fit: cover;">
            </div>
        <?php endif; ?>

        <div class="review-content" style="flex: 1; text-align: center;">
            <h3 style="color: <?= esc_attr($atts['title_color']); ?>;"><?= esc_html($atts['title']); ?></h3>
            <div class="stars" style="color: #f5a623; font-size: 20px;"><?= $stars_html; ?></div>
            <p style="color: <?= esc_attr($atts['text_color']); ?>;"><?= esc_html($atts['content']); ?></p>
        </div>

        <?php if (in_array($atts['image_position'], ['right', 'below']) && $image_url): ?>
            <div class="reviewer-image">
                <img src="<?= esc_url($image_url); ?>" style="width: <?= esc_attr($atts['image_size']); ?>; height: <?= esc_attr($atts['image_size']); ?>; border-radius: <?= esc_attr($atts['border_radius']); ?>; object-fit: cover;">
            </div>
        <?php endif; ?>
    </div>

    <?php if ($atts['hover_effect'] === 'true'): ?>
    <style>
        .muathemewpgiare-review .star {
            transition: transform 0.3s ease;
        }
        .muathemewpgiare-review:hover .star {
            transform: scale(1.2);
        }
    </style>
    <?php endif;

    return ob_get_clean();
}
add_shortcode('muathemewpgiare_review', 'muathemewpgiare_review_shortcode');

// Shortcode đánh giá khách hàng - muathemewpgiare.com

function muathemewpgiare_review_shortcode($atts) {

$atts = shortcode_atts(array(

'title' => 'Khách hàng nói gì?',

'stars' => 5,

'content' => 'Sản phẩm rất tuyệt vời, giao hàng đúng hẹn.',

'title_color' => '#333333',

'text_color' => '#666666',

'bg_color' => '#f9f9f9',

'image_id' => '',

'star_icon' => '★',

'star_empty_icon' => '☆',

'hover_effect' => 'true',

'image_position' => 'below',

'padding' => '20px',

'margin' => '10px',

'image_size' => '60px',

'border_radius' => '50%',

), $atts, 'muathemewpgiare_review');

$stars_html = '';

for ($i = 1; $i <= 5; $i++) {

$stars_html .= '<span class="star">' . ($i <= intval($atts['stars']) ? esc_html($atts['star_icon']) : esc_html($atts['star_empty_icon'])) . '</span>';

}

$image_url = $atts['image_id'] ? wp_get_attachment_image_url($atts['image_id'], 'thumbnail') : '';

ob_start(); ?>

<div class="muathemewpgiare-review <?= esc_attr($atts['image_position']); ?>" style="background: <?= esc_attr($atts['bg_color']); ?>; padding: <?= esc_attr($atts['padding']); ?>; margin: <?= esc_attr($atts['margin']); ?>; border-radius: 12px; display: flex; flex-direction: <?= in_array($atts['image_position'], ['above', 'below']) ? 'column' : 'row'; ?>; align-items: center; gap: 20px;">

<?php if (in_array($atts['image_position'], ['above', 'left']) && $image_url): ?>

<img src="<?= esc_url($image_url); ?>" style="width: <?= esc_attr($atts['image_size']); ?>; height: <?= esc_attr($atts['image_size']); ?>; border-radius: <?= esc_attr($atts['border_radius']); ?>; object-fit: cover;">

</div>

<?php endif; ?>

</div>

<?php if (in_array($atts['image_position'], ['right', 'below']) && $image_url): ?>

</div>

<?php endif; ?>

</div>

<?php if ($atts['hover_effect'] === 'true'): ?>

<style>

.muathemewpgiare-review .star {

transition: transform 0.3s ease;

}

.muathemewpgiare-review:hover .star {

transform: scale(1.2);

}

</style>

<?php endif;

return ob_get_clean();

}

add_shortcode('muathemewpgiare_review', 'muathemewpgiare_review_shortcode');

Tích Hợp Shortcode Vào UX Builder của Flatsome

Để có thể sử dụng shortcode này trực tiếp trong UX Builder, bạn tiếp tục chèn đoạn code sau vào functions.php:

function muathemewpgiare_register_element_to_uxbuilder() {
    add_ux_builder_shortcode('muathemewpgiare_review', array(
        'name' => __('Đánh giá - muathemewpgiare'),
        'category' => __('Content'),
        'priority' => 10,
        'options' => array(
            'title' => array(
                'type' => 'textfield',
                'heading' => 'Tiêu đề',
                'default' => 'Khách hàng nói gì?'
            ),
            'stars' => array(
                'type' => 'slider',
                'heading' => 'Số sao (1-5)',
                'min' => 1,
                'max' => 5,
                'default' => 5
            ),
            'content' => array(
                'type' => 'textarea',
                'heading' => 'Nội dung đánh giá',
                'default' => 'Sản phẩm rất tuyệt vời, giao hàng đúng hẹn.'
            ),
            'image_id' => array(
                'type' => 'image',
                'heading' => 'Ảnh người đánh giá'
            ),
            'image_position' => array(
                'type' => 'select',
                'heading' => 'Vị trí ảnh',
                'options' => array(
                    'above' => 'Trên nội dung',
                    'below' => 'Dưới nội dung',
                    'left'  => 'Bên trái',
                    'right' => 'Bên phải',
                ),
                'default' => 'below'
            ),
            'image_size' => array(
                'type' => 'textfield',
                'heading' => 'Kích thước ảnh',
                'default' => '60px'
            ),
            'border_radius' => array(
                'type' => 'textfield',
                'heading' => 'Bo góc ảnh',
                'default' => '50%'
            ),
            'star_icon' => array(
                'type' => 'textfield',
                'heading' => 'Sao đầy',
                'default' => '★'
            ),
            'star_empty_icon' => array(
                'type' => 'textfield',
                'heading' => 'Sao rỗng',
                'default' => '☆'
            ),
            'hover_effect' => array(
                'type' => 'checkbox',
                'heading' => 'Hiệu ứng khi hover',
                'default' => true
            ),
            'title_color' => array(
                'type' => 'colorpicker',
                'heading' => 'Màu tiêu đề',
                'default' => '#333333'
            ),
            'text_color' => array(
                'type' => 'colorpicker',
                'heading' => 'Màu nội dung',
                'default' => '#666666'
            ),
            'bg_color' => array(
                'type' => 'colorpicker',
                'heading' => 'Màu nền',
                'default' => '#f9f9f9'
            ),
            'padding' => array(
                'type' => 'textfield',
                'heading' => 'Padding',
                'default' => '20px'
            ),
            'margin' => array(
                'type' => 'textfield',
                'heading' => 'Margin',
                'default' => '10px'
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'muathemewpgiare_register_element_to_uxbuilder');

function muathemewpgiare_register_element_to_uxbuilder() {

add_ux_builder_shortcode('muathemewpgiare_review', array(

'name' => __('Đánh giá - muathemewpgiare'),

'category' => __('Content'),

'priority' => 10,

'options' => array(

'title' => array(

'type' => 'textfield',

'heading' => 'Tiêu đề',

'default' => 'Khách hàng nói gì?'

'stars' => array(

'type' => 'slider',

'heading' => 'Số sao (1-5)',

'min' => 1,

'max' => 5,

'default' => 5

'content' => array(

'type' => 'textarea',

'heading' => 'Nội dung đánh giá',

'default' => 'Sản phẩm rất tuyệt vời, giao hàng đúng hẹn.'

'image_id' => array(

'type' => 'image',

'heading' => 'Ảnh người đánh giá'

'image_position' => array(

'type' => 'select',

'heading' => 'Vị trí ảnh',

'options' => array(

'above' => 'Trên nội dung',

'below' => 'Dưới nội dung',

'left' => 'Bên trái',

'right' => 'Bên phải',

'default' => 'below'

'image_size' => array(

'type' => 'textfield',

'heading' => 'Kích thước ảnh',

'default' => '60px'

'border_radius' => array(

'type' => 'textfield',

'heading' => 'Bo góc ảnh',

'default' => '50%'

'star_icon' => array(

'type' => 'textfield',

'heading' => 'Sao đầy',

'default' => '★'

'star_empty_icon' => array(

'type' => 'textfield',

'heading' => 'Sao rỗng',

'default' => '☆'

'hover_effect' => array(

'type' => 'checkbox',

'heading' => 'Hiệu ứng khi hover',

'default' => true

'title_color' => array(

'type' => 'colorpicker',

'heading' => 'Màu tiêu đề',

'default' => '#333333'

'text_color' => array(

'type' => 'colorpicker',

'heading' => 'Màu nội dung',

'default' => '#666666'

'bg_color' => array(

'type' => 'colorpicker',

'heading' => 'Màu nền',

'default' => '#f9f9f9'

'padding' => array(

'type' => 'textfield',

'heading' => 'Padding',

'default' => '20px'

'margin' => array(

'type' => 'textfield',

'heading' => 'Margin',

'default' => '10px'

));

}

add_action('ux_builder_setup', 'muathemewpgiare_register_element_to_uxbuilder');

Cách sử dụng trong bài viết hoặc UX Builder

Dùng trực tiếp shortcode trong nội dung:

[muathemewpgiare_review title="Khách hàng ABC" stars="4" content="Dịch vụ tuyệt vời!" image_id="123"]

1	[muathemewpgiare_review title="Khách hàng ABC" stars="4" content="Dịch vụ tuyệt vời!" image_id="123"]

Hoặc mở UX Builder → Thêm Đánh giá – muathemewpgiare và tùy chỉnh giao diện trực tiếp.

Tổng Kết

Đây là thủ thuật Flatsome cực hay giúp bạn hiển thị đánh giá khách hàng đẹp, dễ tùy chỉnh và tích hợp UX Builder. Nếu bạn đang phát triển website bán hàng, dịch vụ, hay portfolio – thì đây là tính năng không thể thiếu để tăng uy tín và chuyển đổi khách hàng.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Tài Khoản Grok Giá Rẻ – Tiết Kiệm Chi Phí Cho Học Tập, Công Việc Và Kinh Doanh

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Nên Mua Bản Quyền Windows Ở Đâu Tại Việt Nam? Hướng Dẫn Chọn Nơi Mua Uy Tín, Giá Tốt Và An Toàn

Windows là hệ điều hành phổ biến nhất thế giới và được sử dụng trên hàng tỷ thiết bị. Tuy nhiên, tại Việt Nam vẫn...
Facebook Bị Sập: Người Dùng Không Nên Hoang Mang Và Cần Cảnh Giác

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Mua Kaspersky Premium Giá Bao Nhiêu? Bảng Giá Key Chính Hãng Mới Nhất

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Mua Kaspersky Premium Antivirus Với VPN Không Giới Hạn Giá Rẻ, Bản Quyền Chính Hãng

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Những Lỗi Thường Gặp Khi Đăng Ký Tài Khoản AI Và Cách Xử Lý

Việc đăng ký tài khoản AI như ChatGPT, Claude, Gemini, Copilot ngày càng phổ biến. Người dùng có thể dùng AI để học tập, viết...
Cách Dùng ChatGPT Viết Bài Chuẩn SEO Cho Website Hiệu Quả

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
ChatGPT Là Gì? Hướng Dẫn Sử Dụng ChatGPT Hiệu Quả Từ A-Z

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Theme WordPress Du Lịch Đẹp, Chuẩn SEO, Dễ Tùy Biến Bằng Flatsome

Bạn đang kinh doanh tour du lịch, bán combo nghỉ dưỡng, vé máy bay, khách sạn hoặc dịch vụ lữ hành nhưng website hiện tại...
Hướng Dẫn Nâng Cấp Super Grok Miễn Phí Mới Nhất – Những Cách Hợp Pháp Bạn Nên Biết

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...
Nâng Cấp Google Antigravity Ultra: Tài Khoản Antigravity Giá Rẻ

Trong bối cảnh công nghệ AI đang phát triển vượt bậc, Google Antigravity Ultra nổi lên như một giải pháp đột phá, mang đến sức...
Dùng Antigravity Pro: Đánh giá gói phí và giới hạn hiện tại

Antigravity đã trở thành một công cụ được nhiều người biết đến, đặc biệt trong các lĩnh vực yêu cầu sự chính xác và hiệu...
Antigravity Ultra và Pro: So sánh hạn mức, tài khoản, mua gói nào?

Trong bối cảnh phát triển vượt bậc của trí tuệ nhân tạo, Google Antigravity đã nổi lên như một giải pháp đột phá, hứa hẹn...
Mua gói Google Antigravity Pro hay Ultra: Nên chọn loại nào?

Trong bối cảnh công nghệ AI phát triển vượt bậc, Google Antigravity đã trở thành một công cụ không thể thiếu đối với nhiều cá...
Cách dùng ChatGPT hiệu quả để tiết kiệm thời gian

Thời gian là tài sản quý giá với mọi doanh nghiệp hiện đại. Ở Việt Nam, ai cũng cần cách để làm việc hiệu quả...
ChatGPT là gì? Hướng dẫn sử dụng từ A-Z cho người mới

Mục LụcLợi ích của việc hiển thị đánh giá khách hàng bằng shortcode tùy biếnTạo Shortcode Đánh Giá Khách HàngTích Hợp Shortcode Vào UX Builder...