常关注我的博客的人知道，我在之前因为备案临时把博客切到了备用的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 记录
});
});
可展开）
