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

43 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!

Hướng Dẫn Thêm Mã Script Vào Theme Flatsome Một Cách Khoa Học

Một website tốt không chỉ đẹp – mà còn phải hiểu được chính mình.Để hiểu, bạn cần dữ liệu. Và dữ liệu đến từ đâu?Từ...
Top theme WordPress bất động sản đẹp, chuyên nghiệp và dễ dùng nhất 2025

Trong thời đại mà mọi khách hàng đều “google trước khi gọi”, một website bất động sản đẹp chính là “mặt tiền online” không thể...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
WordPress 6.8 có gì mới? Đánh giá chi tiết & thực tế sau khi trải nghiệm bản cập nhật mới nhất

Tóm tắt nhanh: WordPress 6.8 ra mắt với hàng loạt cải tiến về hiệu suất, bảo mật và trải nghiệm người dùng. Trải nghiệm thực...
Theme WordPress thời trang đẹp, chuẩn SEO, giá rẻ cho shop quần áo online

Bạn đang tìm kiếm một theme WordPress thời trang vừa đẹp mắt, dễ dùng lại chuẩn SEO và thân thiện với mobile? Nếu bạn đang...
Có nên chèn sản phẩm vào trong bài viết website WordPress không?

Bạn đang xây dựng website WordPress cho doanh nghiệp hoặc cá nhân và băn khoăn: Có nên chèn sản phẩm vào trong bài viết website...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Flash sale kho theme wordpress giải phóng Miền Nam 30/4

🔥 FLASH SALE KỶ NIỆM NGÀY GIẢI PHÓNG MIỀN NAM 30/4 🔥 GIẢM 50% TOÀN BỘ THEME WORDPRESS – DUY NHẤT TRONG DỊP NÀY! Nhân...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 5 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Sharecode Bộ Công Cụ Tool Đếm Ký Tự Phân Tích SEO Nâng Cao

Bạn đang tìm kiếm một công cụ phân tích nội dung mạnh mẽ, giao diện hiện đại, tích hợp AI và các tính năng SEO...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Flatsome vs Woodmart – Nên Chọn Chủ Đề Nào Cho Website Của Bạn?

Flatsome và Woodmart là hai cái tên nổi bật trong thế giới theme WordPress bán hàng chuyên nghiệp. Nhưng nếu bạn đang bắt đầu xây...
Cách Để Website Hiển Thị Nổi Bật Trên Google

Bạn từng thấy một số website xuất hiện nổi bật trên Google với tiêu đề hấp dẫn, phần mô tả rõ ràng và nhiều liên...
Theme WordPress Giá Rẻ Đáng Tin?

Bạn đang cân nhắc mua một theme WordPress giá rẻ? Có thể bạn đã thấy hàng trăm lời mời gọi như “theme WordPress chuẩn SEO...
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...