简洁的WordPress公告弹窗插件

背景

随着圣诞节的刚刚过去，我萌生了一个新奇的想法——制作一个弹窗来向大家传达圣诞的祝福。为了实现这个创意，我开始在网上寻找能够完成这一功能的插件。在这个过程中，我偶然发现了尼布大人分享的一篇文章（https://nibbles.cn/wp-plugin-announce.html）。

尼布大人开发的弹窗插件以其简洁的设计风格和恰到好处的功能给我留下了深刻印象。尽管它已经非常出色，但我在使用过程中发现它在某些方面还有提升的空间。因此，我决定在原有插件的基础上进行二次开发，以增强其功能并满足我的特定需求。

插件介绍

如果你对尼布大人的弹窗插件感兴趣，想要了解它的基本功能和实现方式，不妨直接去看看他的原文。这里就是链接。现在，让我们来聊聊我在原有基础上添加的新功能，希望能让这个插件更加实用和有趣。

弹窗背景色和透明度自定义
可自定义弹窗再次显示的间隔时间
可自定义弹窗内容的CSS样式
弹窗正文采用经典编辑器（理论上来说可以插入任意HTML内容）

插件展示

插件下载

百度网盘

提取码：au3h

附注

插件二次开发与发布已获得尼布大人的许可，感谢尼布大人对我们的支持！

已知问题

测试中发现插件与Lolimeow主题有冲突，具体为插件依赖于jquery.js，但主题阻止了这个脚本的加载，因此为使用该主题的用户现提供以下两项解决方案：

1.编辑主题文件，打开Lolimeow主题文件夹中 module/core/optimize.php ，找到如下代码并注释掉其中的指定行：

//Lolimeow在这里禁止加载了WP自带的jquery.js
function custom_deregister_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
    }
}
//把下面这一行注释掉
//add_action('wp_enqueue_scripts', 'custom_deregister_jquery', 100);

2.编辑插件文件，打开插件文件夹中 announce.php ，找到如下代码并修改，使插件能使用主题自带的 jquery.min.js ：

//这是插件原本加载js所用到的部分代码：
wp_enqueue_script('announce-script', plugin_dir_url(__FILE__) . 'js/announce.js', array('jquery'), null, true);
//修改为如下内容，使插件能按预期工作：
wp_enqueue_script('announce-script', plugin_dir_url(__FILE__) . 'js/announce.js', array('custom-jquery'), null, true);

想了解更多详情（源代码）的读者请继续阅读~

插件详细信息与源代码（戳我展开）

插件目录结构

插件根目录
- announce.php
- js
  - announce.js
- css
  - announce.css

插件源代码

announce.php

<?php
/**
 * Plugin Name: PopUP-Announcement
 * Description: 一个显示浮动弹窗的插件
 * Version: 2.0
 * Author: Nibbles,TQHYG
 */

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

function announce_plugin_action_links($links, $file) {
    // 检查是否是当前插件
    if ($file == plugin_basename(__FILE__)) {
        $settings_link = '<a href="' . admin_url('options-general.php?page=announce') . '">' . __('设置', 'announce') . '</a>';
        array_unshift($links, $settings_link); // 在数组开始位置添加设置链接
    }
    return $links;
}
add_filter('plugin_action_links', 'announce_plugin_action_links', 10, 2);

// 加载插件所需的脚本和样式
function announce_enqueue_scripts() {
    wp_enqueue_style('announce-style', plugin_dir_url(__FILE__) . 'css/announce.css');
    // 添加自定义颜色到CSS
    $background_color = get_option('announce_background_color', 'rgba(255, 255, 255, 0.8)');

    wp_add_inline_style('announce-style', "
        .announce-popup {
            background-color: " . esc_html($background_color) . ";
        }
    ");

    $script_params = array(
        'interval' => intval(get_option('announce_interval', '3600')),
    );
    wp_enqueue_script('announce-script', plugin_dir_url(__FILE__) . 'js/announce.js', array('jquery'), null, true);
    wp_localize_script('announce-script', 'announceSettings', $script_params);
}
add_action('wp_enqueue_scripts', 'announce_enqueue_scripts');

// 添加自定义CSS到样式
function announce_enqueue_custom_css() {
    $custom_css = get_option('announce_custom_css', '');
    if (!empty($custom_css)) {
        wp_add_inline_style('announce-style', $custom_css);
    }
}
add_action('wp_enqueue_scripts', 'announce_enqueue_custom_css');

// 在页面中插入弹窗的HTML结构
function announce_display_popup() {
    $announce_content = get_option('announce_content', '');
    if ($announce_content) {
        ?>
        <div id="announce-popup" class="announce-popup">
            <div class="announce-content">
                <h2 id="announce-title"><?php echo esc_html(get_option('announce_title', '提示')); ?></h2>
                <div><?php echo $announce_content; ?></div>
                <button id="announce-close" class="announce-close-icon">
                    <!-- 使用一个'x'字符作为关闭图标 -->
                    &#10006;
                </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'); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('announce_settings');
            do_settings_sections('announce');
            $announce_content = get_option('announce_content', '');
            wp_editor($announce_content, 'announce_content', array('textarea_name' => 'announce_content'));
            submit_button(); 
            ?>
        </form>
    </div>
    <?php
}
// 注册设置选项
function announce_register_settings() {
    register_setting('announce_settings', 'announce_title');
    register_setting('announce_settings', 'announce_background_color');  
    register_setting('announce_settings', 'announce_interval');
    register_setting('announce_settings', 'announce_custom_css');
    register_setting('announce_settings', 'announce_content');

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

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

    add_settings_field(
        'announce_background_color',
        __('弹窗背景色', 'announce'),
        'announce_background_color_callback',
        'announce',
        'announce_section'
    );
    add_settings_field(
        'announce_interval',
        __('弹窗间隔时间（秒）', 'announce'),
        'announce_interval_callback',
        'announce',
        'announce_section'
    );
    add_settings_field(
        'announce_custom_css',
        __('自定义CSS', 'announce'),
        'announce_custom_css_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_background_color_callback() {
    $announce_background_color = get_option('announce_background_color', 'rgba(255, 255, 255, 0.8)');
    echo '<input type="text" name="announce_background_color" value="' . esc_attr($announce_background_color) . '" class="color-picker" />';
}
function announce_interval_callback() {
    $announce_interval = get_option('announce_interval', '3600'); 
    echo '<input type="number" name="announce_interval" value="' . esc_attr($announce_interval) . '" min="0" />';
}
function announce_custom_css_callback() {
    $custom_css = get_option('announce_custom_css', 
        '.announce-content {
        font-family: \'Arial\', sans-serif; /* 设置字体 */
        color: #000000; /* 文字颜色 */
        }'
    );
    echo '<textarea name="announce_custom_css" rows="10" cols="50">' . esc_textarea($custom_css) . '</textarea>';
}
?>

css/announce.css

/* 弹窗通用样式 */
.announce-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    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);
    color: black;
}

/* 关闭按钮样式 */
.announce-close-icon {
    position: absolute;
    top: 10px; /* 根据需要调整 */
    right: 10px; /* 根据需要调整 */
    background: none;
    border: none;
    color: #000000;
    font-size: 20px; /* 根据需要调整字体大小 */
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.announce-close-icon:hover,
.announce-close-icon:focus {
    background: none;
    color: #000000;
}

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

/* WordPress后台颜色选择器样式 */
.announce-color-picker,
.announce-opacity-input {
    margin-right: 10px;
}

js/announce.js

jQuery(document).ready(function($) {
    // 获取存储的间隔时间和上次关闭弹窗的时间戳
    var acknowledgedTimestamp = parseInt(localStorage.getItem('announce_acknowledged_timestamp'), 10);
    var interval = announceSettings.interval; // 使用从PHP传递过来的间隔时间
    var currentTime = Math.floor(Date.now() / 1000); // 获取当前时间的时间戳（秒）
    // 检查本地存储中的 acknowledge 记录
    if (isNaN(acknowledgedTimestamp) || (currentTime - acknowledgedTimestamp) > interval) {
        $('#announce-popup').fadeIn(); // 显示弹窗
        $('#announce-overlay').fadeIn(); // 显示遮罩层
    }

    // 处理关闭按钮的点击事件
    $('#announce-close').on('click', function() {
        $('#announce-popup').fadeOut(); // 隐藏弹窗
        $('#announce-overlay').fadeOut(); // 隐藏遮罩层
        localStorage.setItem('announce_acknowledged', 'true'); // 设置 acknowledge 记录
        localStorage.setItem('announce_acknowledged_timestamp', currentTime.toString()); // 存储当前时间的时间戳（秒）
    });
});

欢迎进行二次开发（~~三次开发？~~），但是请不要加广告并以我名义分发！

除非注明，否则均为天远日记原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.tqhyg.net/post345.html

简洁的WordPress公告弹窗插件

背景

插件介绍

插件展示

插件下载

附注

已知问题

插件目录结构

插件源代码

announce.php

css/announce.css

js/announce.js

为服务器开启IPv6

基于NapCat和Koishi搭建QQ聊天机器人

Comments NOTHING

取消回复

背景

插件介绍

插件展示

插件下载

附注

已知问题

插件目录结构

插件源代码

announce.php

css/announce.css

js/announce.js

为服务器开启IPv6

基于NapCat和Koishi搭建QQ聊天机器人

Comments NOTHING

取消回复

祝大家新年快乐！