This commit is contained in:
LinRuiqi
2025-08-03 10:29:13 +08:00
parent b7b6a7f3e6
commit ba5e5646e6
5 changed files with 386 additions and 1 deletions

View File

@@ -1,3 +1,5 @@
# wp-gray-dates
在设定的特定日期(月-日)自动将网站变为灰色,每年的这些日期都会自动变灰。
在设定的特定日期(月-日)自动将网站变为灰色,每年的这些日期都会自动变灰。
插件卸载后会自动清除数据。

77
css/admin.css Normal file
View File

@@ -0,0 +1,77 @@
.gray-dates-container {
margin: 20px 0;
padding: 15px;
background: #fff;
border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.gray-date-item {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.gray-date-item input {
margin-right: 10px;
width: 150px;
}
.add-date {
margin-top: 10px !important;
}
/* 日期选择器样式优化 */
.ui-datepicker {
padding: 10px;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ui-datepicker-header {
background: #f7f7f7;
border-bottom: 1px solid #eee;
padding: 5px;
margin-bottom: 5px;
}
.ui-datepicker-title {
text-align: center;
font-weight: bold;
}
.ui-datepicker-prev,
.ui-datepicker-next {
cursor: pointer;
padding: 0 5px;
}
.ui-datepicker-prev {
float: left;
}
.ui-datepicker-next {
float: right;
}
.ui-datepicker-calendar th {
padding: 3px;
text-align: center;
}
.ui-datepicker-calendar td {
padding: 3px;
text-align: center;
}
.ui-datepicker-calendar a {
display: block;
padding: 3px;
text-decoration: none;
text-align: center;
}
.ui-datepicker-calendar a:hover {
background: #f0f0f0;
}

45
js/admin.js Normal file
View File

@@ -0,0 +1,45 @@
jQuery(document).ready(function($) {
// 初始化日期选择器
function initDatepicker() {
$('.datepicker').datepicker({
dateFormat: 'mm-dd',
changeMonth: true,
changeYear: false
});
}
// 初始化已有的日期选择器
initDatepicker();
// 添加新日期
$('.add-date').on('click', function() {
var dateItem = $('<div class="gray-date-item"></div>');
var dateInput = $('<input type="text" name="gray_dates[]" class="datepicker" readonly />');
var removeButton = $('<button type="button" class="button remove-date">删除</button>');
dateItem.append(dateInput).append(removeButton);
$('#gray-dates-list').append(dateItem);
// 初始化新添加的日期选择器
dateInput.datepicker({
dateFormat: 'mm-dd',
changeMonth: true,
changeYear: false
});
// 自动打开日期选择器
dateInput.datepicker('show');
});
// 删除日期(使用事件委托)
$('#gray-dates-list').on('click', '.remove-date', function() {
var dateItem = $(this).parent('.gray-date-item');
// 如果只有一个日期项,则清空而不是删除
if ($('.gray-date-item').length === 1) {
dateItem.find('input').val('');
} else {
dateItem.remove();
}
});
});

36
templates/admin-page.php Normal file
View File

@@ -0,0 +1,36 @@
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<?php settings_errors('wp_gray_dates_messages'); ?>
<form method="post" action="">
<?php wp_nonce_field('wp_gray_dates_nonce'); ?>
<div class="gray-dates-container">
<h2>设置灰色日期</h2>
<p class="description">在以下日期网站将自动变为灰色。格式MM-DD每年的这一天都会变灰</p>
<div id="gray-dates-list">
<?php if (!empty($gray_dates)): ?>
<?php foreach ($gray_dates as $date): ?>
<div class="gray-date-item">
<input type="text" name="gray_dates[]" value="<?php echo esc_attr($date); ?>" class="datepicker" readonly />
<button type="button" class="button remove-date">删除</button>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="gray-date-item">
<input type="text" name="gray_dates[]" value="" class="datepicker" readonly />
<button type="button" class="button remove-date">删除</button>
</div>
<?php endif; ?>
</div>
<button type="button" class="button add-date">添加日期</button>
</div>
<p class="submit">
<input type="submit" name="wp_gray_dates_save" class="button-primary" value="保存设置" />
</p>
</form>
</div>

225
wp-gray-dates.php Normal file
View File

@@ -0,0 +1,225 @@
<?php
/**
* Plugin Name: WP Gray Dates
* Plugin URI:
* Description: 在设定的特定日期(月-日)自动将网站变为灰色,每年的这些日期都会自动变灰。
* Version: 1.0.0
* Author: 林海草原
* Author URI: https://lhcy.org
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain: wp-gray-dates
*/
// 如果直接访问此文件,则中止执行
if (!defined('ABSPATH')) {
exit;
}
class WP_Gray_Dates {
/**
* 插件实例
*/
private static $instance = null;
/**
* 获取插件实例
*/
public static function get_instance() {
if (null === self::$instance) {
self::$instance = new self();
}
return self::$instance;
}
/**
* 构造函数
*/
private function __construct() {
// 添加激活和卸载钩子
register_activation_hook(__FILE__, array($this, 'activate'));
register_deactivation_hook(__FILE__, array($this, 'deactivate'));
register_uninstall_hook(__FILE__, array('WP_Gray_Dates', 'uninstall'));
// 添加管理菜单
add_action('admin_menu', array($this, 'add_admin_menu'));
// 添加设置链接
add_filter('plugin_action_links_' . plugin_basename(__FILE__), array($this, 'add_settings_link'));
// 添加前端样式
add_action('wp_head', array($this, 'maybe_add_gray_style'));
// 添加管理页面的样式和脚本
add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
}
/**
* 插件激活时执行
*/
public function activate() {
// 创建默认选项
$default_options = array(
'gray_dates' => array()
);
add_option('wp_gray_dates_options', $default_options);
}
/**
* 插件停用时执行
*/
public function deactivate() {
// 停用时不删除数据
}
/**
* 插件卸载时执行
*/
public static function uninstall() {
// 删除所有插件数据
delete_option('wp_gray_dates_options');
}
/**
* 添加管理菜单
*/
public function add_admin_menu() {
add_options_page(
'灰色日期设置',
'灰色日期',
'manage_options',
'wp-gray-dates',
array($this, 'render_admin_page')
);
}
/**
* 添加设置链接
*/
public function add_settings_link($links) {
$settings_link = '<a href="options-general.php?page=wp-gray-dates">' . __('设置', 'wp-gray-dates') . '</a>';
array_unshift($links, $settings_link);
return $links;
}
/**
* 加载管理页面的样式和脚本
*/
public function enqueue_admin_assets($hook) {
if ('settings_page_wp-gray-dates' !== $hook) {
return;
}
wp_enqueue_style('jquery-ui-datepicker');
wp_enqueue_script('jquery-ui-datepicker');
// 添加自定义脚本
wp_enqueue_script(
'wp-gray-dates-admin',
plugins_url('js/admin.js', __FILE__),
array('jquery', 'jquery-ui-datepicker'),
'1.0.0',
true
);
// 添加自定义样式
wp_enqueue_style(
'wp-gray-dates-admin',
plugins_url('css/admin.css', __FILE__),
array(),
'1.0.0'
);
// 本地化脚本
wp_localize_script('wp-gray-dates-admin', 'wpGrayDates', array(
'ajaxUrl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wp-gray-dates-nonce'),
));
}
/**
* 渲染管理页面
*/
public function render_admin_page() {
// 检查用户权限
if (!current_user_can('manage_options')) {
return;
}
// 保存设置
if (isset($_POST['wp_gray_dates_save']) && check_admin_referer('wp_gray_dates_nonce')) {
$this->save_settings();
}
// 获取当前设置
$options = get_option('wp_gray_dates_options', array('gray_dates' => array()));
$gray_dates = $options['gray_dates'];
// 包含管理页面模板
include plugin_dir_path(__FILE__) . 'templates/admin-page.php';
}
/**
* 保存设置
*/
private function save_settings() {
$options = array();
// 处理日期数据
$options['gray_dates'] = array();
if (isset($_POST['gray_dates']) && is_array($_POST['gray_dates'])) {
foreach ($_POST['gray_dates'] as $date) {
if (!empty($date)) {
// 确保日期格式为 MM-DD
$date = sanitize_text_field($date);
// 验证日期格式
if (preg_match('/^\d{2}-\d{2}$/', $date)) {
$options['gray_dates'][] = $date;
}
}
}
}
// 更新选项
update_option('wp_gray_dates_options', $options);
// 添加成功消息
add_settings_error(
'wp_gray_dates_messages',
'wp_gray_dates_message',
__('设置已保存。', 'wp-gray-dates'),
'updated'
);
}
/**
* 检查当前日期是否应该应用灰色样式
*/
public function maybe_add_gray_style() {
$options = get_option('wp_gray_dates_options', array('gray_dates' => array()));
$gray_dates = $options['gray_dates'];
$today = date('m-d');
if (in_array($today, $gray_dates)) {
echo '<style>
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
</style>';
}
}
}
// 初始化插件
function wp_gray_dates_init() {
WP_Gray_Dates::get_instance();
}
add_action('plugins_loaded', 'wp_gray_dates_init');