commit
This commit is contained in:
LinRuiqi
@@ -1,3 +1,5 @@
|
|||||||
# wp-gray-dates
|
# wp-gray-dates
|
||||||
|
|
||||||
在设定的特定日期（月-日）自动将网站变为灰色，每年的这些日期都会自动变灰。
|
在设定的特定日期（月-日）自动将网站变为灰色，每年的这些日期都会自动变灰。
|
||||||
|
|
||||||
|
插件卸载后会自动清除数据。
|
||||||
77
css/admin.css
Normal file
77
css/admin.css
Normal 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
45
js/admin.js
Normal 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
36
templates/admin-page.php
Normal 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
225
wp-gray-dates.php
Normal 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');
|
||||||
Reference in New Issue
Block a user