Thủ thuật wordpress, Bài Viết

Trang trí website của với chủ đề Tết

Đăng vào Tháng mười một 19, 2024 bởi admin

admin

19/11/2024

7 Phút đọc

206 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Dưới đây, mình sẽ cung cấp thêm mã để trang trí website của bạn với chủ đề Tết, giúp trang web trở nên tươi vui, mang không khí Tết cổ truyền Việt Nam. Mình sẽ sử dụng một vài yếu tố như hoa mai, hoa đào, và lồng đèn đỏ. Hiệu ứng này sẽ bao gồm cả việc trang trí góc màn hình, thêm lồng đèn lơ lửng, và hiệu ứng rơi cánh hoa, nhằm tạo ra một trải nghiệm đặc biệt cho người dùng vào dịp lễ Tết.

Mã Code Trang Trí Tết Cho WordPress

Thêm đoạn mã sau vào tệp functions.php của Child Theme của bạn. Mã này sẽ tạo hiệu ứng rơi hoa và trang trí Tết bằng CSS và JavaScript.

Bước 1: Thêm Trang Trí Hoa Mai, Hoa Đào, và Lồng Đèn

PHP + JavaScript + CSS:

function add_tet_decoration_script() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Tạo lồng đèn đỏ hai góc trên cùng màn hình
            let lanternLeft = document.createElement("img");
            lanternLeft.src = "https://example.com/path/to/lantern-left.png"; // Đường dẫn ảnh lồng đèn bên trái
            lanternLeft.style.position = "fixed";
            lanternLeft.style.top = "0";
            lanternLeft.style.left = "0";
            lanternLeft.style.width = "100px";
            lanternLeft.style.zIndex = "1000";
            document.body.appendChild(lanternLeft);

            let lanternRight = document.createElement("img");
            lanternRight.src = "https://example.com/path/to/lantern-right.png"; // Đường dẫn ảnh lồng đèn bên phải
            lanternRight.style.position = "fixed";
            lanternRight.style.top = "0";
            lanternRight.style.right = "0";
            lanternRight.style.width = "100px";
            lanternRight.style.zIndex = "1000";
            document.body.appendChild(lanternRight);

            // Tạo hiệu ứng rơi hoa mai, hoa đào
            const numberOfFlowers = 30;
            for (let i = 0; i < numberOfFlowers; i++) {
                let flower = document.createElement("div");
                flower.classList.add("falling-flower");
                flower.style.left = Math.random() * 100 + "vw";
                flower.style.animationDelay = Math.random() * 10 + "s";
                flower.style.backgroundImage = Math.random() > 0.5 
                    ? "url('https://example.com/path/to/hoa-mai.png')" 
                    : "url('https://example.com/path/to/hoa-dao.png')";
                document.body.appendChild(flower);
            }
        });
    </script>
    <style>
        /* CSS cho hiệu ứng rơi hoa */
        .falling-flower {
            position: fixed;
            top: -10%;
            width: 40px;
            height: 40px;
            background-size: contain;
            background-repeat: no-repeat;
            animation: fall linear infinite;
            pointer-events: none;
            z-index: 999;
        }

        @keyframes fall {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(110vh) rotate(360deg);
            }
        }

        /* CSS cho lồng đèn */
        img[src*="lantern"] {
            animation: swing 3s ease-in-out infinite;
        }

        @keyframes swing {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(5deg);
            }
            50% {
                transform: rotate(0deg);
            }
            75% {
                transform: rotate(-5deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
    </style>
    <?php
}
add_action('wp_footer', 'add_tet_decoration_script');

function add_tet_decoration_script() {

document.addEventListener("DOMContentLoaded", function() {

// Tạo lồng đèn đỏ hai góc trên cùng màn hình

let lanternLeft = document.createElement("img");

lanternLeft.src = "https://example.com/path/to/lantern-left.png"; // Đường dẫn ảnh lồng đèn bên trái

lanternLeft.style.position = "fixed";

lanternLeft.style.top = "0";

lanternLeft.style.left = "0";

lanternLeft.style.width = "100px";

lanternLeft.style.zIndex = "1000";

document.body.appendChild(lanternLeft);

let lanternRight = document.createElement("img");

lanternRight.src = "https://example.com/path/to/lantern-right.png"; // Đường dẫn ảnh lồng đèn bên phải

lanternRight.style.position = "fixed";

lanternRight.style.top = "0";

lanternRight.style.right = "0";

lanternRight.style.width = "100px";

lanternRight.style.zIndex = "1000";

document.body.appendChild(lanternRight);

// Tạo hiệu ứng rơi hoa mai, hoa đào

const numberOfFlowers = 30;

for (let i = 0; i < numberOfFlowers; i++) {

let flower = document.createElement("div");

flower.classList.add("falling-flower");

flower.style.left = Math.random() * 100 + "vw";

flower.style.animationDelay = Math.random() * 10 + "s";

flower.style.backgroundImage = Math.random() > 0.5

? "url('https://example.com/path/to/hoa-mai.png')"

: "url('https://example.com/path/to/hoa-dao.png')";

document.body.appendChild(flower);

}

});

</script>

<style>

/* CSS cho hiệu ứng rơi hoa */

.falling-flower {

position: fixed;

top: -10%;

width: 40px;

height: 40px;

background-size: contain;

background-repeat: no-repeat;

animation: fall linear infinite;

pointer-events: none;

z-index: 999;

}

@keyframes fall {

0% {

transform: translateY(0) rotate(0deg);

}

100% {

transform: translateY(110vh) rotate(360deg);

}

/* CSS cho lồng đèn */

img[src*="lantern"] {

animation: swing 3s ease-in-out infinite;

}

@keyframes swing {

0% {

transform: rotate(0deg);

}

25% {

transform: rotate(5deg);

}

50% {

transform: rotate(0deg);

}

75% {

transform: rotate(-5deg);

}

100% {

transform: rotate(0deg);

}

</style>

<?php

}

add_action('wp_footer', 'add_tet_decoration_script');

Chi Tiết Về Chức Năng Trang Trí Tết:

Lồng Đèn Đỏ:

Hai góc trên cùng của màn hình có hai lồng đèn đỏ truyền thống, tạo không khí Tết. Lồng đèn có hiệu ứng đong đưa nhờ vào @keyframes swing, mang đến cảm giác lồng đèn đang lơ lửng trước gió.
URL Hình Ảnh: Thay đổi đường dẫn (https://example.com/path/to/lantern-left.png và https://example.com/path/to/lantern-right.png) với đường dẫn đến hình ảnh lồng đèn mà bạn muốn sử dụng.

Hiệu Ứng Rơi Hoa Mai và Hoa Đào:

Hoa mai và hoa đào tượng trưng cho mùa xuân, mang lại không khí lễ hội và sự sinh sôi nảy nở. Sử dụng các bông hoa rơi từ trên xuống dưới để tạo hiệu ứng dịu dàng.
URL Hình Ảnh Hoa: Thay thế https://example.com/path/to/hoa-mai.png và https://example.com/path/to/hoa-dao.png với đường dẫn ảnh hoa mai và hoa đào của bạn.
Số lượng hoa (numberOfFlowers) được thiết lập là 30, bạn có thể tăng hoặc giảm tùy ý để điều chỉnh mức độ hiệu ứng trên trang.

Hiệu Ứng Chuyển Động:

Hiệu ứng hoa rơi: Sử dụng @keyframes fall để mô phỏng hoa rơi từ trên xuống với vòng xoay rotate(360deg). Tốc độ và độ trễ (animationDelay) cũng được thay đổi ngẫu nhiên để tạo cảm giác tự nhiên.
Hiệu ứng lồng đèn đong đưa: Sử dụng @keyframes swing để tạo cảm giác đong đưa tự nhiên của lồng đèn, giống như đang treo trước hiên nhà trong ngày Tết.

Cách Sử Dụng:

Thêm đoạn mã trên vào tệp functions.php của Child Theme.
Thay thế đường dẫn hình ảnh cho lồng đèn, hoa mai, và hoa đào bằng các hình ảnh mà bạn muốn sử dụng trên trang web của mình.
Hiệu ứng sẽ tự động hiển thị trên trang khi người dùng truy cập và sẽ tạo không khí Tết truyền thống, rực rỡ và sinh động.

Lưu Ý:

Chất Lượng Hình Ảnh: Đảm bảo hình ảnh sử dụng có chất lượng tốt và kích thước phù hợp để không làm ảnh hưởng đến tốc độ tải trang.
Hiệu Năng Trang Web: Nếu trang web của bạn có nhiều khách truy cập, hãy kiểm tra kỹ để đảm bảo rằng hiệu ứng này không ảnh hưởng đến hiệu suất chung.
Tùy Chỉnh Thêm: Bạn có thể thay đổi kích thước, tốc độ rơi, và các thuộc tính của lồng đèn hoặc hoa để phù hợp với phong cách riêng của bạn.

Xem thêm: Thêm hiệu ứng pháo hoa bắn lên ở chân trang cho trang web WordPress

Với đoạn mã này, trang web của bạn sẽ có được không khí Tết đầy rực rỡ và sinh động, giúp thu hút người truy cập và tạo cảm giác lễ hội, may mắn. Nếu bạn muốn thêm nhiều chi tiết hoặc hiệu ứng đặc biệt khác, mình sẵn sàng hỗ trợ. Chúc bạn có một trang web thật đẹp trong dịp Tết!

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...