3 cách thêm rotating testimonials vào WordPress

4 tháng ago, Hướng dẫn WordPress, Views
3 cách thêm rotating testimonials vào WordPress

3 Cách Thêm Rotating Testimonials (Đánh Giá Xoay Vòng) vào WordPress

Đánh giá từ khách hàng (testimonials) là một yếu tố quan trọng để xây dựng niềm tin và uy tín cho website của bạn. Hiển thị những đánh giá này một cách nổi bật và hấp dẫn có thể giúp tăng tỷ lệ chuyển đổi và thu hút khách hàng tiềm năng. Một cách hiệu quả để làm điều này là sử dụng rotating testimonials (đánh giá xoay vòng), nơi các đánh giá được hiển thị lần lượt theo một trình tự nhất định.

Trong bài viết này, chúng ta sẽ khám phá ba cách dễ dàng để thêm rotating testimonials vào website WordPress của bạn, từ sử dụng plugin đến tự code bằng PHP và CSS.

Cách 1: Sử Dụng Plugin WordPress Chuyên Dụng

Đây là cách đơn giản và nhanh chóng nhất để thêm rotating testimonials vào WordPress. Có rất nhiều plugin miễn phí và trả phí cung cấp chức năng này. Chúng ta sẽ xem xét một vài plugin phổ biến:

Plugin: Testimonial Slider

Testimonial Slider là một plugin miễn phí phổ biến, dễ sử dụng và cung cấp nhiều tùy chọn tùy chỉnh. Bạn có thể dễ dàng thêm, chỉnh sửa và hiển thị các đánh giá khách hàng trên website của bạn.

Ưu điểm:

  • Dễ sử dụng và thiết lập
  • Giao diện trực quan
  • Nhiều tùy chọn tùy chỉnh (màu sắc, font chữ, hiệu ứng chuyển đổi)
  • Tương thích với nhiều theme WordPress
  • Bản miễn phí cung cấp đủ tính năng cơ bản

Nhược điểm:

  • Bản trả phí cung cấp nhiều tính năng nâng cao hơn
  • Một số tùy chọn tùy chỉnh có thể yêu cầu kiến thức CSS

Hướng dẫn cài đặt và sử dụng:

  1. Truy cập Plugins -> Add New trong dashboard WordPress của bạn.
  2. Tìm kiếm “Testimonial Slider”.
  3. Cài đặt và kích hoạt plugin.
  4. Truy cập Testimonials -> Add New để thêm đánh giá mới.
  5. Nhập nội dung đánh giá, tên khách hàng, chức danh (tùy chọn) và hình ảnh (tùy chọn).
  6. Sử dụng shortcode [testimonial_slider] để hiển thị slider đánh giá ở bất kỳ trang hoặc bài viết nào.

Plugin: Easy Testimonials

Easy Testimonials là một plugin mạnh mẽ khác, cung cấp nhiều tính năng hữu ích để quản lý và hiển thị đánh giá khách hàng. Plugin này cũng có cả phiên bản miễn phí và trả phí.

Ưu điểm:

  • Nhiều tùy chọn hiển thị (slider, grid, list)
  • Hỗ trợ schema markup cho SEO
  • Tùy chỉnh màu sắc, font chữ và kiểu dáng
  • Tích hợp với các plugin tạo form liên hệ

Nhược điểm:

  • Giao diện có thể hơi phức tạp so với Testimonial Slider
  • Một số tính năng nâng cao chỉ có trong phiên bản trả phí

Hướng dẫn cài đặt và sử dụng:

  1. Truy cập Plugins -> Add New trong dashboard WordPress của bạn.
  2. Tìm kiếm “Easy Testimonials”.
  3. Cài đặt và kích hoạt plugin.
  4. Truy cập Testimonials -> All Testimonials để quản lý các đánh giá.
  5. Click vào “Add New Testimonial” để thêm đánh giá mới.
  6. Sử dụng shortcode hoặc widget để hiển thị đánh giá trên website.

Cách 2: Sử Dụng Shortcode và CSS tùy chỉnh

Nếu bạn muốn có quyền kiểm soát nhiều hơn về cách hiển thị đánh giá của mình, bạn có thể sử dụng shortcode và CSS tùy chỉnh. Phương pháp này đòi hỏi một chút kiến thức về HTML, CSS và PHP.

Bước 1: Tạo Shortcode

Đầu tiên, bạn cần tạo một shortcode để hiển thị các đánh giá. Bạn có thể thêm đoạn code sau vào file functions.php của theme (hoặc child theme) của bạn:


function rotating_testimonials_shortcode() {
    $testimonials = array(
        array(
            'author' => 'John Doe',
            'content' => 'Sản phẩm tuyệt vời! Tôi rất hài lòng với dịch vụ của bạn.',
            'image' => 'path/to/john-doe.jpg' // Optional
        ),
        array(
            'author' => 'Jane Smith',
            'content' => 'Dịch vụ khách hàng rất tốt. Tôi sẽ giới thiệu cho bạn bè!',
            'image' => 'path/to/jane-smith.jpg' // Optional
        ),
        array(
            'author' => 'Peter Jones',
            'content' => 'Website này rất hữu ích. Tôi đã tìm thấy những gì mình cần.',
            'image' => 'path/to/peter-jones.jpg' // Optional
        )
    );

    $output = '
';
    foreach ($testimonials as $testimonial) {
        $output .= '
';
        if (isset($testimonial['image']) && !empty($testimonial['image'])) {
            $output .= '' . esc_attr($testimonial['author']) . '';
        }
        $output .= '
' . esc_html($testimonial['content']) . '
';
        $output .= '
- ' . esc_html($testimonial['author']) . '
';
        $output .= '
';
    }
    $output .= '
';

    return $output;
}
add_shortcode('rotating_testimonials', 'rotating_testimonials_shortcode');

Lưu ý: Thay thế 'path/to/john-doe.jpg', 'path/to/jane-smith.jpg', và 'path/to/peter-jones.jpg' bằng đường dẫn thực tế đến hình ảnh của bạn. Bạn cũng có thể thêm hoặc bớt các đánh giá trong mảng $testimonials.

Bước 2: Thêm CSS để tạo hiệu ứng xoay vòng

Tiếp theo, bạn cần thêm CSS để tạo hiệu ứng xoay vòng cho các đánh giá. Bạn có thể thêm CSS này vào file style.css của theme (hoặc child theme) của bạn. Dưới đây là một ví dụ đơn giản:


.rotating-testimonials {
    position: relative;
    overflow: hidden;
    height: 200px; /* Điều chỉnh chiều cao cho phù hợp */
}

.testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.testimonial:first-child {
    opacity: 1;
}

.testimonial-content {
    font-style: italic;
    margin-bottom: 10px;
}

.testimonial-author {
    text-align: right;
}

@keyframes rotateTestimonials {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

.rotating-testimonials .testimonial:nth-child(1) { animation: rotateTestimonials 12s infinite 0s; }
.rotating-testimonials .testimonial:nth-child(2) { animation: rotateTestimonials 12s infinite 3s; }
.rotating-testimonials .testimonial:nth-child(3) { animation: rotateTestimonials 12s infinite 6s; }

/* Thêm các dòng này cho mỗi testimonial bổ sung */
/* .rotating-testimonials .testimonial:nth-child(4) { animation: rotateTestimonials 12s infinite 9s; } */

Lưu ý: Bạn có thể điều chỉnh các giá trị trong CSS (ví dụ: height, transition, animation) để phù hợp với thiết kế của website của bạn. Quan trọng nhất là đảm bảo số lượng .rotating-testimonials .testimonial:nth-child(N) phù hợp với số lượng đánh giá bạn đã thêm trong shortcode PHP.

Bước 3: Sử dụng Shortcode

Cuối cùng, bạn có thể sử dụng shortcode [rotating_testimonials] trong bất kỳ trang hoặc bài viết nào để hiển thị rotating testimonials.

Cách 3: Sử Dụng Thư Viện JavaScript (Slick Slider)

Sử dụng một thư viện JavaScript như Slick Slider cung cấp một cách linh hoạt và mạnh mẽ để tạo ra một rotating testimonials slider với nhiều hiệu ứng và tùy chọn tùy chỉnh.

Bước 1: Tải và cài đặt Slick Slider

Bạn có thể tải Slick Slider từ trang web chính thức hoặc sử dụng CDN. Sau khi tải, bạn cần đưa các file CSS và JavaScript của Slick Slider vào theme của bạn. Bạn có thể sử dụng FTP hoặc trình quản lý file của hosting để tải các file này lên.

Ví dụ, sử dụng CDN:


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Thêm các dòng code trên vào file header.php của theme của bạn, ngay trước thẻ đóng </head>.

Bước 2: Tạo HTML cho Testimonials

Tạo HTML cho các đánh giá của bạn trong file functions.php hoặc trực tiếp trong trang/bài viết nơi bạn muốn hiển thị slider. Ví dụ:


<div class="testimonial-slider">
    <div><p>Đánh giá 1.</p><p>- Tác giả 1</p></div>
    <div><p>Đánh giá 2.</p><p>- Tác giả 2</p></div>
    <div><p>Đánh giá 3.</p><p>- Tác giả 3</p></div>
</div>

Bước 3: Khởi tạo Slick Slider bằng JavaScript

Thêm JavaScript để khởi tạo Slick Slider. Bạn có thể thêm đoạn code này vào file footer.php của theme của bạn, hoặc tạo một file JavaScript riêng và enqueue nó:


<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.testimonial-slider').slick({
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000
        });
    });
</script>

Lưu ý: Bạn có thể tùy chỉnh các tùy chọn của Slick Slider (ví dụ: dots, infinite, speed, autoplay, autoplaySpeed) để phù hợp với nhu cầu của bạn. Tham khảo tài liệu chính thức của Slick Slider để biết thêm chi tiết.

Kết luận

Thêm rotating testimonials vào website WordPress của bạn là một cách tuyệt vời để tăng sự tin cậy và thu hút khách hàng. Bài viết này đã trình bày ba phương pháp khác nhau để thực hiện điều này:

  • Sử dụng plugin WordPress chuyên dụng: Nhanh chóng và dễ dàng, phù hợp cho người mới bắt đầu.
  • Sử dụng shortcode và CSS tùy chỉnh: Cung cấp nhiều quyền kiểm soát hơn, đòi hỏi một chút kiến thức về code.
  • Sử dụng thư viện JavaScript (Slick Slider): Linh hoạt và mạnh mẽ, cho phép tạo ra các slider phức tạp với nhiều hiệu ứng.

Chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của bạn để tạo ra một rotating testimonials slider hấp dẫn và hiệu quả cho website WordPress của bạn.

Related Topics by Tag
, , , ,

..