用WordPress子主题实现网页底部弹窗并可以关闭

2024年6月17日 · 阅读需 2 分钟

问题：

如何用WordPress子主题实现底部弹出通知并且可以关闭：
- 页面加载时在底部显示一个通知框。
- 用户点击关闭按钮后，通知框隐藏并且不再显示。

答案：

创建子主题的基本结构：
- 在 wp-content/themes 目录下创建 child-theme 文件夹。
- 创建 style.css 文件，并添加以下内容：
```
/*
Theme Name: Child Theme
Template: parent-theme
*/
```

创建 functions.php 文件：

<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

function child_theme_enqueue_scripts() {
    wp_enqueue_script('child-theme-script', get_stylesheet_directory_uri() . '/js/popup.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_scripts');

在 footer.php 文件中添加通知的HTML结构：

<div class="popup-notification" id="popup-notification">
    <div class="popup-content">
        <p>Welcome to x.com!<br>
        We are letting you know that we are changing our URL, but your privacy and data protection settings remain the same.<br>
        For more details, see our Privacy Policy: <a href="https://x.com/en/privacy" target="_blank">https://x.com/en/privacy</a></p>
        <button class="close-popup" id="close-popup">&times;</button>
    </div>
</div>

在 style.css 文件中添加CSS样式：

.popup-notification {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: none;
    z-index: 1000;
}

.popup-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.popup-content p {
    margin: 0;
    font-size: 16px;
}

.popup-content a {
    color: #0073aa;
    text-decoration: none;
}

.popup-content a:hover {
    text-decoration: underline;
}

.close-popup {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000;
}

在 child-theme 文件夹中创建 js 文件夹和 popup.js 文件，并添加如下代码：

jQuery(document).ready(function($) {
    // 检查本地存储中是否存在关闭标记
    if (localStorage.getItem('popupClosed') !== 'true') {
        // 显示通知
        $('#popup-notification').fadeIn();
    }

    // 点击关闭按钮时隐藏通知并设置本地存储标记
    $('#close-popup').click(function() {
        $('#popup-notification').fadeOut();
        localStorage.setItem('popupClosed', 'true');
    });
});

通过这些步骤，您可以在WordPress子主题中添加一个底部弹出通知，并确保用户关闭一次后不再显示。

问题：​

答案：​

问题：

答案：