标签： WordPress

常关注我的博客的人知道，我在之前因为备案临时把博客切到了备用的cyou域名，然后发了一个弹窗公告通知“成年更新”。

这个弹窗公告不是主题自带的，是我设定需求和风格+AI写出来的。

弹窗整体是白色亚克力底+黑色文字，很简单。就一个按钮“已知晓”（欢迎二开，但是请不要加广告并以我名义分发！）

效果图

插件下载

项目结构

wp-plugin-announce

• css
  • announce.css
• js
  • announce.js
• announce.php

代码

announce.php

<?php
/**
 * Plugin Name: Announce
 * Description: 一个显示浮动弹窗的插件
 * Version: 1.0
 * Author: Nibbles
 */

if (!defined('ABSPATH')) {
    exit; // 防止直接访问
}

// 加载插件所需的脚本和样式
function announce_enqueue_scripts() {
    wp_enqueue_style('announce-style', plugin_dir_url(__FILE__) . 'css/announce.css');
    wp_enqueue_script('announce-script', plugin_dir_url(__FILE__) . 'js/announce.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'announce_enqueue_scripts');

// 在页面中插入弹窗的HTML结构
function announce_display_popup() {
    ?>
    <div id="announce-popup" class="announce-popup">
        <div class="announce-content">
            <h2 id="announce-title"><?php echo esc_html(get_option('announce_title', '提示')); ?></h2>
            <p id="announce-message"><?php echo esc_html(get_option('announce_message', '这是一个重要的公告！')); ?></p>
            <button id="announce-close"><?php _e('已知晓', 'announce'); ?></button>
        </div>
    </div>
    <div id="announce-overlay" class="announce-overlay"></div>
    <?php
}
add_action('wp_footer', 'announce_display_popup');

// 添加插件设置页面
function announce_settings_page() {
    add_options_page(
        'Announce Settings',
        'Announce',
        'manage_options',
        'announce',
        'announce_settings_page_html'
    );
}
add_action('admin_menu', 'announce_settings_page');

function announce_settings_page_html() {
    ?>
    <div class="wrap">
        <h1><?php _e('Announce 设置', 'announce'); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('announce_settings');
            do_settings_sections('announce');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// 注册设置选项
function announce_register_settings() {
    register_setting('announce_settings', 'announce_title');
    register_setting('announce_settings', 'announce_message');

    add_settings_section(
        'announce_section',
        __('弹窗设置', 'announce'),
        null,
        'announce'
    );

    add_settings_field(
        'announce_title',
        __('弹窗标题', 'announce'),
        'announce_title_callback',
        'announce',
        'announce_section'
    );

    add_settings_field(
        'announce_message',
        __('弹窗内容', 'announce'),
        'announce_message_callback',
        'announce',
        'announce_section'
    );
}
add_action('admin_init', 'announce_register_settings');

function announce_title_callback() {
    $announce_title = get_option('announce_title', '');
    echo '<input type="text" name="announce_title" value="' . esc_attr($announce_title) . '" />';
}

function announce_message_callback() {
    $announce_message = get_option('announce_message', '');
    echo '<textarea name="announce_message" rows="5" cols="50">' . esc_textarea($announce_message) . '</textarea>';
}
?>

css/announce.css

/* 弹窗通用样式 */
.announce-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    display: none;
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    backdrop-filter: blur(10px); /* 添加背景模糊效果 */
    background-color: rgba(255, 255, 255, 0.8); /* 亚克力效果的白色背景 */
    color: black; /* 黑色文字 */
}

/* 按钮样式 */
#announce-close {
    background-color: #007AFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

#announce-close:hover {
    background-color: #005fcb;
}

/* 遮罩层样式 */
.announce-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
}

js/announce.js

jQuery(document).ready(function($) {
    // 检查本地存储中的 acknowledge 记录
    if (!localStorage.getItem('announce_acknowledged')) {
        $('#announce-popup').fadeIn(); // 显示弹窗
        $('#announce-overlay').fadeIn(); // 显示遮罩层
    }

    // 处理 "已知晓" 按钮的点击事件
    $('#announce-close').on('click', function() {
        $('#announce-popup').fadeOut(); // 隐藏弹窗
        $('#announce-overlay').fadeOut(); // 隐藏遮罩层
        localStorage.setItem('announce_acknowledged', 'true'); // 设置 acknowledge 记录
    });
});