Nibbles Blog Nibbles Blog
  • 专题汇总
    • 技术学习
    • 个人成长
    • 运营技能
    • 自媒体
    • Minecraft
  • 推荐
    • 好物推荐
    • APP推荐
  • 关于我
    • Nibbles Studio
  • 友情链接
首页 › 技术学习 › 开源!极简的WP弹窗公告插件

开源!极简的WP弹窗公告插件

Avatar photo
Nibbles 尼布
1 11 月, 2024

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

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

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

效果图

开源!极简的WP弹窗公告插件-Nibbles Blog

插件下载

wp-plugin-announce.zip
下载
一个显示浮动弹窗的插件,开源,首发
类型: ZIP 大小: 3KB

项目结构

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 记录
    });
});
声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
WordPress
0
3
Avatar photo
Nibbles 尼布
向着终生成长者迈进!
赞赏

评论 (3)

取消
  • rzya

    感觉不错的

    来自新疆
    9 月前 新疆 回复
  • 111

    站长这个插件有个小问题,一旦关闭弹窗之后,无论后续发布什么内容,前端页面不再弹出新的弹窗。

    来自中国
    7 月前 安徽 回复
    • Avatar photo
      Nibbles 尼布

      @111 对的。这个要清理了缓存后才能再次弹出。一开始设计的时候就是想只弹一次。
      那下个版本(v1.1)我对弹窗逻辑改一下吧~

      来自中国
      7 月前 安徽 回复

猜你喜欢

  • 运算符 | Java语言基础
  • 变量详解 | Java语言基础
  • 初识 Java 及数据类型 | Java语言基础

公众号同步更新

🔍微信搜一搜“尼布技术志”
  • SiteMap
  • Umami
  • CSDN
  • xLog
  • Substack
Copyright © 2022-2025 Nibbles Blog. Designed by nicetheme. 浙公网安备33038102332481号 浙ICP备2024120131号
旗下产品: 匿补阁 个人工作室主页 Nibbles AI 匿补阁小商城 匿补阁CardShop NavP
  • C语言4
  • Java4
  • python2
  • AI2
  • 公众号2
  • 专题汇总
    • 技术学习
    • 个人成长
    • 运营技能
    • 自媒体
    • Minecraft
  • 推荐
    • 好物推荐
    • APP推荐
  • 关于我
    • Nibbles Studio
  • 友情链接