Tất cả bài viết, Thủ thuật wordpress

Hướng dẫn code vòng quay may mắn wordpress cực đẹp

Đăng vào Tháng 3 27, 2025 bởi admin

27/03/2025

4 Phút đọc

28 Lượt xem

Đánh giá

Để tạo một vòng quay may mắn (Lucky Wheel) trên trang web WordPress, bạn có thể sử dụng mã PHP dưới đây. Bài viết này sẽ hướng dẫn chi tiết cách triển khai mã shortcode này vào website của bạn, từ đó tạo ra một trò chơi hấp dẫn để thu hút người dùng.

1. Tạo và Cài đặt Shortcode “Lucky Wheel”

Bạn sẽ tạo một shortcode có thể chèn vào bất kỳ bài viết hoặc trang nào trên WordPress. Dưới đây là cách bạn có thể thêm mã vào tệp functions.php trong theme của bạn hoặc tạo một plugin riêng để sử dụng mã này.

function muathemewpgiare_lucky_wheel_shortcode() {
    ob_start();
    ?>
    <link href="https://fonts.googleapis.com/css?family=Raleway:800" rel="stylesheet">

    <div class="luckywheel-container">
        <div class="luckywheel">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 730 730">
                <g class="wheel">
                    <!-- Các đường dẫn và phần tử SVG khác của vòng quay sẽ được chèn ở đây -->
                </g>
            </svg>
        </div>

        <div class="buttons">
            <button id="btnPlay" class="btn">Spin</button>
        </div>

        <div id="prizeNotification" class="alert" style="display: none;">
            <strong>Congratulations!</strong> You have won: <span id="prizeName"></span>
        </div>

        <div id="prizeList" class="prize-list">
            <h3>Prize List:</h3>
            <ul>
                <li><span class="color-indicator" style="background-color: #E57373;"></span> Car</li>
                <li><span class="color-indicator" style="background-color: #F06292;"></span> Vacation</li>
                <li><span class="color-indicator" style="background-color: #BA68C8;"></span> Laptop</li>
                <li><span class="color-indicator" style="background-color: #64B5F6;"></span> Free Coupon</li>
                <li><span class="color-indicator" style="background-color: #81C784;"></span> Gift Card</li>
                <li><span class="color-indicator" style="background-color: #FFD54F;"></span> Smartphone</li>
                <li><span class="color-indicator" style="background-color: #FF7043;"></span> Headphones</li>
                <li><span class="color-indicator" style="background-color: #4CAF50;"></span> Watch</li>
                <li><span class="color-indicator" style="background-color: #FFEB3B;"></span> Discount</li>
                <li><span class="color-indicator" style="background-color: #9C27B0;"></span> Voucher</li>
                <li><span class="color-indicator" style="background-color: #FF9800;"></span> Cash</li>
                <li><span class="color-indicator" style="background-color: #607D8B;"></span> Gift Box</li>
            </ul>
        </div>

    </div>

    <?php
    return ob_get_clean();
}

add_shortcode('muathemewpgiare_lucky_wheel', 'muathemewpgiare_lucky_wheel_shortcode');

function muathemewpgiare_lucky_wheel_shortcode() {

ob_start();

</g>

</svg>

</div>

</div>

<strong>Congratulations!</strong> You have won: <span id="prizeName"></span>

</div>

<h3>Prize List:</h3>

<ul>

<li><span class="color-indicator" style="background-color: #F06292;"></span> Vacation</li>

<li><span class="color-indicator" style="background-color: #BA68C8;"></span> Laptop</li>

<li><span class="color-indicator" style="background-color: #64B5F6;"></span> Free Coupon</li>

<li><span class="color-indicator" style="background-color: #FFD54F;"></span> Smartphone</li>

<li><span class="color-indicator" style="background-color: #FF7043;"></span> Headphones</li>

<li><span class="color-indicator" style="background-color: #4CAF50;"></span> Watch</li>

<li><span class="color-indicator" style="background-color: #FFEB3B;"></span> Discount</li>

<li><span class="color-indicator" style="background-color: #9C27B0;"></span> Voucher</li>

</ul>

</div>

<?php

return ob_get_clean();

}

add_shortcode('muathemewpgiare_lucky_wheel', 'muathemewpgiare_lucky_wheel_shortcode');

2. Theme css cho vòng quay may mắn

        .luckywheel-container {
            text-align: center;
            margin: 0 auto;
            background-color: #f7f7f7;
            padding-top: 50px;
        }
        .luckywheel {
            margin: 0 auto;
            width: 60%;
            max-width: 500px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            background: #fff;
        }
        .btn {
            font-family: 'Raleway', sans-serif;
            font-weight: 800;
            padding: 15px 40px;
            background-color: #ff5722;
            color: #fff;
            border: none;
            border-radius: 30px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        .btn:hover {
            background-color: #ff3d00;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }
        .alert {
            margin-top: 20px;
            font-size: 1.5em;
            display: inline-block;
            background: #4caf50;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        #prizeName {
            font-weight: bold;
        }
        .prize-list {
            margin-top: 30px;
            text-align: left;
            display: inline-block;
            padding: 10px;
        }
        .prize-list ul {
            list-style-type: none;
            padding: 0;
        }
        .prize-list li {
            padding: 10px;
            font-size: 1.2em;
        }
        .color-indicator {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border-radius: 50%;
        }

.luckywheel-container {

text-align: center;

margin: 0 auto;

background-color: #f7f7f7;

padding-top: 50px;

}

.luckywheel {

margin: 0 auto;

width: 60%;

max-width: 500px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

border-radius: 50%;

background: #fff;

}

.btn {

font-family: 'Raleway', sans-serif;

font-weight: 800;

padding: 15px 40px;

background-color: #ff5722;

color: #fff;

border: none;

border-radius: 30px;

text-transform: uppercase;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

.btn:hover {

background-color: #ff3d00;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);

transform: translateY(-2px);

}

.alert {

margin-top: 20px;

font-size: 1.5em;

display: inline-block;

background: #4caf50;

color: #fff;

padding: 10px 20px;

border-radius: 5px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

#prizeName {

font-weight: bold;

}

.prize-list {

margin-top: 30px;

text-align: left;

display: inline-block;

padding: 10px;

}

.prize-list ul {

list-style-type: none;

padding: 0;

}

.prize-list li {

padding: 10px;

font-size: 1.2em;

}

.color-indicator {

display: inline-block;

width: 20px;

height: 20px;

margin-right: 10px;

border-radius: 50%;

}

3. Thêm JavaScript/jQuery cho vòng quay may mắn

    <script>
        $(document).ready(function() {
            const wheel = $(".wheel"),
                $btnPlay = $("#btnPlay");

            const prizes = [
                { name: "Car", color: "#E57373" },
                { name: "Vacation", color: "#F06292" },
                { name: "Laptop", color: "#BA68C8" },
                { name: "Free Coupon", color: "#64B5F6" },
                { name: "Gift Card", color: "#81C784" },
                { name: "Smartphone", color: "#FFD54F" },
                { name: "Headphones", color: "#FF7043" },
                { name: "Watch", color: "#4CAF50" },
                { name: "Discount", color: "#FFEB3B" },
                { name: "Voucher", color: "#9C27B0" },
                { name: "Cash", color: "#FF9800" },
                { name: "Gift Box", color: "#607D8B" }
            ];

            function calculateSpinDegree() {
                const prizeIndex = Math.floor(Math.random() * prizes.length);
                const degPerPrize = 360 / prizes.length;
                const degOffset = degPerPrize * prizeIndex;
                const spins = Math.floor(Math.random() * 3) + 3;
                const extraDegrees = Math.floor(Math.random() * 360);
                return spins * 360 + degOffset + extraDegrees;
            }

            function spinWheel() {
                const deg = calculateSpinDegree();
                gsap.to(wheel, {
                    duration: 5,
                    rotation: deg,
                    transformOrigin: "50% 50%",
                    ease: "power4.out",
                    onComplete: showPrize
                });
            }

            function showPrize() {
                const prizeIndex = Math.floor(Math.random() * prizes.length);
                $("#prizeName").text(prizes[prizeIndex].name);
                $("#prizeNotification").fadeIn();
            }

            $btnPlay.click(function() {
                $("#prizeNotification").fadeOut();
                spinWheel();
            });
        });

$(document).ready(function() {

const wheel = $(".wheel"),

$btnPlay = $("#btnPlay");

const prizes = [

{ name: "Car", color: "#E57373" },

{ name: "Vacation", color: "#F06292" },

{ name: "Laptop", color: "#BA68C8" },

{ name: "Free Coupon", color: "#64B5F6" },

{ name: "Gift Card", color: "#81C784" },

{ name: "Smartphone", color: "#FFD54F" },

{ name: "Headphones", color: "#FF7043" },

{ name: "Watch", color: "#4CAF50" },

{ name: "Discount", color: "#FFEB3B" },

{ name: "Voucher", color: "#9C27B0" },

{ name: "Cash", color: "#FF9800" },

{ name: "Gift Box", color: "#607D8B" }

];

function calculateSpinDegree() {

const prizeIndex = Math.floor(Math.random() * prizes.length);

const degPerPrize = 360 / prizes.length;

const degOffset = degPerPrize * prizeIndex;

const spins = Math.floor(Math.random() * 3) + 3;

const extraDegrees = Math.floor(Math.random() * 360);

return spins * 360 + degOffset + extraDegrees;

}

function spinWheel() {

const deg = calculateSpinDegree();

gsap.to(wheel, {

duration: 5,

rotation: deg,

transformOrigin: "50% 50%",

ease: "power4.out",

onComplete: showPrize

});

}

function showPrize() {

const prizeIndex = Math.floor(Math.random() * prizes.length);

$("#prizeName").text(prizes[prizeIndex].name);

$("#prizeNotification").fadeIn();

}

$btnPlay.click(function() {

$("#prizeNotification").fadeOut();

spinWheel();

});

4. Giải thích Mã

HTML: Mã tạo ra một vòng quay may mắn với các phần tử SVG. Các phần tử này sẽ được tạo thành các khu vực trong vòng quay, mỗi khu vực tương ứng với một phần thưởng.
CSS: Điều chỉnh giao diện của vòng quay, nút “Spin”, danh sách giải thưởng và các hiệu ứng hover cho các phần tử.
JavaScript/jQuery: Quản lý hoạt động quay của vòng quay và xác định giải thưởng người dùng nhận được khi quay xong.

3. Mã code hoàn chỉnh.

Nếu các bạn gặp khó khăn trong vấn đề code, thì có thể coppy đoạn code dưới đây bỏ toàn bộ vào functions.php là được nhé.

🚫 Bạn cần đăng nhập để xem nội dung này!

4. Thêm Shortcode vào Bài Viết hoặc Trang

Sau khi thêm mã trên vào tệp functions.php hoặc plugin của bạn, bạn có thể sử dụng shortcode [muathemewpgiare_lucky_wheel] bất kỳ đâu trong bài viết hoặc trang WordPress của mình.

5. Lưu Ý và Tùy Chỉnh

Tùy Chỉnh Phần Thưởng: Bạn có thể thay đổi các phần thưởng trong mảng prizes theo nhu cầu của mình.
Phong Cách và Hiệu Ứng: Bạn có thể điều chỉnh màu sắc, hiệu ứng quay, hoặc cách hiển thị giải thưởng theo ý thích.

6. Kết luận

Việc sử dụng shortcode “Lucky Wheel” sẽ giúp website của bạn thêm phần thú vị và tương tác với người dùng. Đừng quên kiểm tra lại mã và thử nghiệm trên các trình duyệt để đảm bảo hoạt động mượt mà.

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!

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

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...
Plugin Nulled Là Gì? Có Nên Tải Miễn Phí Trên Internet?

Ngày nay, khi xây dựng website bằng WordPress, rất nhiều người tìm đến các plugin bản quyền (premium) để tối ưu hóa tính năng, tăng...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Phần 1. Ẩn tài khoản admin khỏi danh sách người dùng trong Admin Mục tiêu của bài viết Chỉ cho phép tồn tại duy nhất...
Bao Giờ Google Cập Nhật PageRank? Cập Nhật Mới Nhất Về PageRank 2025

Kể từ khi ra đời, PageRank đã trở thành một yếu tố quan trọng trong thuật toán của Google để đánh giá và xếp hạng...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Phần 1: Hướng dẫn Code chức năng kiểm tra link nội bộ Khi xây dựng một trang web trên nền tảng WordPress, việc tối ưu...
Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

1. Giới Thiệu Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Việc tự động cập nhật giá khi thay đổi số lượng...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...