通过代码给自己的WordPress网站添加节日氛围图片吧

将以下代码放到“functions.php” 文件中，

// 添加节日氛围图片
function add_holiday_image() {
    // 指定节日氛围图片的起始日期和结束日期
    $start_date = '2024-02-07'; // 修改为您希望显示图像的起始日期
    $end_date = '2024-02-14'; // 修改为您希望显示图像的结束日期

    // 获取当前日期
    $current_date = date('Y-m-d');

    // 检查当前日期是否在指定的日期范围内
    if ($current_date >= $start_date && $current_date <= $end_date) {
        // 显示节日氛围图片
        echo '<div id="holiday-image-wrapper">';
        echo '<img id="holiday-image" src="路径/到/您的/节日氛围图片.jpg" alt="Holiday Image">';
        echo '</div>';

        // 检测是否为移动设备
        if(wp_is_mobile()) {
            // 在移动设备上显示5秒后自动关闭
            echo '<script>
                    setTimeout(function() {
                        document.getElementById("holiday-image-wrapper").style.display = "none";
                    }, 5000);
                  </script>';
        } else {
            // 在电脑端，不自动关闭
            echo '<script>
                    document.getElementById("holiday-image-wrapper").onclick = function() {
                        document.getElementById("holiday-image-wrapper").style.display = "none";
                    };
                  </script>';
        }
        
        // 添加JavaScript来动态调整图像位置
        echo '<script>
                // 将图像放置在右上角
                var imageWrapper = document.getElementById("holiday-image-wrapper");
                imageWrapper.style.position = "fixed";
                imageWrapper.style.top = "20px"; // 调整垂直位置
                imageWrapper.style.right = "20px"; // 调整水平位置
                imageWrapper.style.zIndex = "9999"; // 设置图像的层级为最上层
             </script>';
    }
}

// 在 WordPress 网站中添加节日氛围图片
add_action('wp_footer', 'add_holiday_image');

显示效果：

但是现在电脑版上，没有关闭按钮

添加一个钩子，用于加载 Font Awesome 的样式表，并确保它在 WordPress 加载网站的脚本和样式表时被添加到页面中。

Font Awesome是一个图标库。

// 定义一个名为 enqueue_font_awesome 的函数，用于加载 Font Awesome 的样式表
function enqueue_font_awesome() {
    // 使用 wp_enqueue_style 函数加载样式表
    // 第一个参数 'font-awesome' 是一个标识符，用于识别样式表
    // 第二个参数是 Font Awesome 样式表的 URL 地址
    wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' );
}

// 将 enqueue_font_awesome 函数添加到 'wp_enqueue_scripts' 动作钩子中
// 这样在 WordPress 加载网站的脚本和样式表时会执行该函数
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );

用于给我们的氛围图片添加一个关闭按钮的图标

这个是修改后的代码：

// 添加节日氛围图片
function add_holiday_image() {
    // 指定节日氛围图片的起始日期和结束日期
    $start_date = '2024-02-07'; // 修改为您希望显示图像的起始日期
    $end_date = '2024-02-14'; // 修改为您希望显示图像的结束日期

    // 获取当前日期
    $current_date = date('Y-m-d');

    // 检查当前日期是否在指定的日期范围内
    if ($current_date >= $start_date && $current_date <= $end_date) {
        // 显示节日氛围图片
        echo '<div id="holiday-image-wrapper">';
        echo '<img id="holiday-image" src="路径/到/您的/节日氛围图片.jpg" alt="Holiday Image">';
        echo '<button id="close-button"><i class="fas fa-times"></i></button>'; // 使用Font Awesome图标作为关闭按钮
        echo '</div>';

        // 检测是否为移动设备
        if(wp_is_mobile()) {
            // 在移动设备上显示5秒后自动关闭
            echo '<script>
                    setTimeout(function() {
                        document.getElementById("holiday-image-wrapper").style.display = "none";
                    }, 5000);
                  </script>';
        } else {
            // 在电脑端，点击关闭按钮来关闭图像
            echo '<script>
                    document.getElementById("close-button").onclick = function() {
                        document.getElementById("holiday-image-wrapper").style.display = "none";
                    };
                  </script>';
        }
        
        // 添加JavaScript来动态调整图像位置
        echo '<script>
                // 将图像放置在右上角
                var imageWrapper = document.getElementById("holiday-image-wrapper");
                imageWrapper.style.position = "fixed";
                imageWrapper.style.top = "20px"; // 调整垂直位置
                imageWrapper.style.right = "20px"; // 调整水平位置
                imageWrapper.style.zIndex = "9999"; // 设置图像的层级为最上层
                
                // 样式调整关闭按钮
                var closeButton = document.getElementById("close-button");
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px"; // 调整按钮垂直位置
                closeButton.style.right = "5px"; // 调整按钮水平位置
                closeButton.style.zIndex = "10000"; // 确保按钮显示在最上层
             </script>';
    }
}

// 在 WordPress 网站中添加节日氛围图片
add_action('wp_footer', 'add_holiday_image');

修改后的效果：

当然 ，如果想修改按钮的颜色 ，可以通过在您的子主题的CSS文件中添加自定义样式来修改按钮的外观。以下是一个示例，如何将按钮的背景色修改为白色：

#close-button {
    background-color: #ffffff; /* 将按钮的背景色设置为白色 */
}