把自定义样式从主题目录搬到主题选项，升级不再丢
原来主题里有个 custom/ 目录（custom.css / custom.js / custom.php）， 是给用户随手加样式的入口。问题是它位于主题目录内，而 WordPress 升级 主题的做法是把整个主题目录删掉再解压（class-theme-upgrader.php 里 clear_destination = true，随后 delete_old_theme() 递归删除）， 所以每次升级这些文件都会丢。custom.php 还会被 require， 等于在主题里留了一个执行任意 PHP 的口子。 改成后台选项： - 主题选项新增「自定义代码」组，含自定义 CSS / 自定义 JS 两个输入框 - 内容存在数据库的 kratos 选项里，与主题文件解耦，升级、重装都不影响 - 分别在主题样式和主题脚本之后加载，优先级最高 为此新增了 code 字段类型，没有复用 textarea：textarea 的 sanitizer 走 wp_kses()，CSS 的子选择器 > 和 JS 的 < 会被当成 HTML 标签剥掉， 样式会静默失效。code 类型只去掉 PHP 标签、打断 </style> 和 </script>， 其余原样保留。渲染时也不走公共的 stripslashes —— options.php 已经 wp_unslash 过，再剥一层会把 CSS 的 \f101、JS 的 \n 啃坏。 自定义 CSS 的默认值就是原来 custom.css 的内容，逐字节一致（354 字节）， 所以升级瞬间站点外观没有任何变化。清空输入框保存即可彻底去掉。 验证：真实 WP 7.1.3 / PHP 8.5.12 环境 20 条断言全过（含 DB 往返、 子选择器 / 反斜杠保真、危险内容过滤），生产选项指纹前后一致； 反向注入「默认值改空」能立刻被抓到。
This commit is contained in:
@@ -141,6 +141,36 @@ class Options_Framework_Interface
|
||||
$output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" rows="' . $rows . '"' . $placeholder . '>' . esc_textarea($val) . '</textarea>';
|
||||
break;
|
||||
|
||||
// Raw code textarea（自定义 CSS / JS 用）
|
||||
// 这里必须直接读 $settings 拿原始值，不能用 $val：
|
||||
// 上面的公共逻辑对所有非数组值做了 stripslashes()，那是给老版本
|
||||
// WP 入库带反斜杠的历史写法留的兼容；现在 options.php 已经
|
||||
// wp_unslash 过，值本身是干净的，再剥一层会把 CSS 里合法的
|
||||
// 转义（content: "\f101"）和 JS 的 "\n" 啃坏。
|
||||
case 'code':
|
||||
$rows = '10';
|
||||
|
||||
if (isset($value['settings']['rows'])) {
|
||||
$custom_rows = $value['settings']['rows'];
|
||||
if (is_numeric($custom_rows)) {
|
||||
$rows = $custom_rows;
|
||||
}
|
||||
}
|
||||
|
||||
if (isset($settings[($value['id'])])) {
|
||||
$raw = $settings[($value['id'])];
|
||||
} elseif (isset($value['std'])) {
|
||||
$raw = $value['std'];
|
||||
} else {
|
||||
$raw = '';
|
||||
}
|
||||
if (!is_string($raw)) {
|
||||
$raw = '';
|
||||
}
|
||||
|
||||
$output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input code" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" rows="' . $rows . '"' . $placeholder . ' spellcheck="false">' . esc_textarea($raw) . '</textarea>';
|
||||
break;
|
||||
|
||||
// Select Box
|
||||
case 'select':
|
||||
$output .= '<select class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">';
|
||||
|
||||
@@ -55,6 +55,30 @@ function of_sanitize_textarea( $input ) {
|
||||
}
|
||||
add_filter( 'of_sanitize_textarea', 'of_sanitize_textarea' );
|
||||
|
||||
/**
|
||||
* Sanitization for raw code fields (theme's own and user's CSS / JS).
|
||||
*
|
||||
* 为什么不能复用 textarea：textarea 走 wp_kses()，CSS 里的子选择器
|
||||
* `>`、`+`、`~` 以及 JS 里的比较运算符 `<`、`>` 都会被当成 HTML 标签
|
||||
* 剥掉。例：`a > b { }` 存进库会变成 `a b { }`，样式静默失效。
|
||||
* 所以这里只做三件必要的事：
|
||||
* 1. 去掉 PHP 标签，避免这段文本将来被 eval / include 时执行代码；
|
||||
* 2. 把 `</style>`、`</script>` 打断，避免提前闭合输出标签；
|
||||
* 3. 其余内容原样返回（含反斜杠转义，如 CSS 的 `\f101`）。
|
||||
*
|
||||
* @param $input string
|
||||
* @return $output sanitized string
|
||||
*/
|
||||
function of_sanitize_code( $input ) {
|
||||
if ( ! is_string( $input ) ) {
|
||||
return '';
|
||||
}
|
||||
$output = str_replace( array( '<?', '?>' ), '', $input );
|
||||
$output = preg_replace( '#</\s*(style|script)#i', '<\\/$1', $output );
|
||||
return $output;
|
||||
}
|
||||
add_filter( 'of_sanitize_code', 'of_sanitize_code' );
|
||||
|
||||
/**
|
||||
* Sanitization for checkbox input
|
||||
*
|
||||
|
||||
+11
-2
@@ -63,14 +63,23 @@ function theme_autoload()
|
||||
wp_add_inline_style('kratos', $admin_bar_css);
|
||||
}
|
||||
}
|
||||
wp_enqueue_style('custom', get_template_directory_uri() . '/custom/custom.css', array(), THEME_VERSION);
|
||||
// 自定义样式：存在主题选项里（数据库），排在主题样式之后，优先级最高。
|
||||
// 放选项而非主题目录，是为了让它在主题升级（升级会清空主题目录）后依然存在。
|
||||
$custom_css = yang_custom_css();
|
||||
if (trim($custom_css) !== '') {
|
||||
wp_add_inline_style('kratos', $custom_css);
|
||||
}
|
||||
// js
|
||||
wp_deregister_script('jquery');
|
||||
wp_enqueue_script('jquery', ASSET_PATH . '/assets/js/jquery.min.js', array(), '3.4.1', false);
|
||||
wp_enqueue_script('bootstrap-bundle', ASSET_PATH . '/assets/js/bootstrap.bundle.min.js', array(), '4.5.0', true);
|
||||
wp_enqueue_script('layer', ASSET_PATH . '/assets/js/layer.min.js', array(), '3.1.1', true);
|
||||
wp_enqueue_script('kratos', ASSET_PATH . '/assets/js/kratos.min.js', array(), THEME_VERSION, true);
|
||||
wp_enqueue_script('custom', get_template_directory_uri() . '/custom/custom.js', array(), THEME_VERSION, true);
|
||||
// 自定义脚本：同样存在主题选项里，挂在 kratos 之后（页脚输出）。
|
||||
$custom_js = yang_custom_js();
|
||||
if (trim($custom_js) !== '') {
|
||||
wp_add_inline_script('kratos', $custom_js);
|
||||
}
|
||||
|
||||
$data = array(
|
||||
'site' => home_url(),
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<?php
|
||||
/**
|
||||
* 自定义代码（CSS / JS）
|
||||
*
|
||||
* 这两段代码存在主题选项里（数据库 wp_options 的 kratos 项），不存主题目录。
|
||||
* 原因：WordPress 升级/更新主题时会**清空整个主题目录**再解压
|
||||
* （wp-admin/includes/class-theme-upgrader.php 里 clear_destination = true，
|
||||
* 随后 delete_old_theme() 递归删除），写在主题目录里的任何自定义文件都会丢。
|
||||
* 放进选项表就与主题文件解耦，升级、重装、换主题目录名都不影响。
|
||||
*
|
||||
* @author Seaton Jiang <seaton@vtrois.com>
|
||||
* @license MIT License
|
||||
*/
|
||||
|
||||
/**
|
||||
* 默认自定义 CSS。
|
||||
*
|
||||
* 历史沿革：这些规则原本放在主题目录下的一个 custom 子目录里，是该主题早期的
|
||||
* 「自定义样式」入口。改成配置项后，把它作为默认值，保证切换瞬间站点外观
|
||||
* 完全不变；同时 `恢复默认` 也能拿回这套样式。
|
||||
*
|
||||
* 想彻底清掉：在后台把「自定义 CSS」清空保存即可（空值会覆盖这里的默认值）。
|
||||
*/
|
||||
function yang_default_custom_css()
|
||||
{
|
||||
return <<<'CSS'
|
||||
.article .content p{ text-indent:2em }
|
||||
.k-main .details .article .content h2 {
|
||||
margin: 16px -16px;
|
||||
padding: 0 10px;
|
||||
border-left: 5px solid #00a2ff;
|
||||
background-color: rgba(243, 243, 243, 0.7);
|
||||
font-size: 20px;
|
||||
line-height: 41px;
|
||||
}
|
||||
ul{
|
||||
margin-left:2em;
|
||||
}
|
||||
ol{
|
||||
margin-left:2em;
|
||||
}
|
||||
ol > li{
|
||||
line-height: 1.8;
|
||||
}
|
||||
ul > li{
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
CSS;
|
||||
}
|
||||
|
||||
/**
|
||||
* 取自定义 CSS（未设置时回退到默认值）
|
||||
*/
|
||||
function yang_custom_css()
|
||||
{
|
||||
$css = kratos_option('g_custom_css', yang_default_custom_css());
|
||||
return is_string($css) ? $css : '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 取自定义 JS（未设置时为空）
|
||||
*/
|
||||
function yang_custom_js()
|
||||
{
|
||||
$js = kratos_option('g_custom_js', '');
|
||||
return is_string($js) ? $js : '';
|
||||
}
|
||||
@@ -515,6 +515,28 @@ $options[] = array(
|
||||
'type' => 'text',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('自定义代码', 'kratos'),
|
||||
'type' => 'heading',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('自定义 CSS', 'kratos'),
|
||||
'desc' => __('附加样式，在所有主题样式之后加载。保存后立即生效，随主题升级保留。', 'kratos'),
|
||||
'id' => 'g_custom_css',
|
||||
'std' => yang_default_custom_css(),
|
||||
'type' => 'code',
|
||||
'settings' => array('rows' => 14),
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('自定义 JS', 'kratos'),
|
||||
'desc' => __('附加脚本，在页面底部加载，不需要写 <script> 标签。', 'kratos'),
|
||||
'id' => 'g_custom_js',
|
||||
'std' => '',
|
||||
'type' => 'code',
|
||||
'settings' => array('rows' => 14),
|
||||
);
|
||||
|
||||
return $options;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user