「个人简介」挂件：头像/昵称/简介/背景四项可单独填 + 修大图撑爆 #21
一、头像 / 昵称 / 简介原来**只读主题设置**，挂件表单里没有字段
· 用户点开侧栏「个人简介」只能改背景图，头像和那句话得跑去
「主题设置 → 站长信息」改全站共用的那份。
· 现在四项都是挂件实例字段：avatar / nickname / introduce / background。
· 取值顺序：实例 → 主题设置 → 内置兜底，**留空即回落**，
老站点升级后显示一点不变。
· pick() 判空统一用「trim 后是不是空串」，不用 empty()
（!empty('0') 是 false，昵称就叫「0」会被当没填）。
· 简介用 sanitize_textarea_field（保留换行），URL 用 esc_url_raw
（不做 HTML 实体化，避免与 esc_attr 双重转义）。
二、后台 form() 补齐五个字段
· 头像 / 背景各带「选择图片」按钮（调媒体库），背景另有「清除」。
· 输入框显示用户填的原始值，缩略图显示前台最终会用的那张，刻意分开。
· 资源加载统一到 yang_widget_admin_assets()，不再每个挂件各挂一次。
三、大图撑爆挂件的真因：CSS 选择器依赖三层祖先
· 老规则是 `.k-main .sidebar .w-about .wrapper img`，而后台
「外观 → 小工具」预览里没有 `.k-main .sidebar` 这层祖先，
规则一条都不生效 ⇒ 头像按原图 2136×2136 铺开、背景塌成 0。
前台看着正常是因为前台恰好有那层祖先，问题被完全掩盖。
· 改为只管 `.w-about` 内部元素，并补 max-width/max-height 双保险。
· 老规则必须**删掉**而不是并存：它是 (0,3,1)，新规则是 (0,2,1)，
并存时老规则在前台永远赢，新规则只对后台生效。
· 保留 `.k-main .sidebar .w-about { padding:0 }`：通用规则
`.k-main .sidebar .widget` 是 (0,3,0)，少了这条会多出内边距、整体高 57px。
· 头像保持 inline（display:block 会让它脱离 text-align:center 的居中）。
· 顺带：object-fit 从 fill 改 cover（超宽图不再压扁）；
背景 url() 补引号（文件名带空格时不再整条声明作废）。
验证
· 行为测试 67 条全通过；反向验证 13 组全部真红。
· 浏览器几何 76 条全通过（前台/后台 × 四种极端原图）。
· 修复前 CSS 跑同一套判据：38 条报红，精确复现用户症状
（后台挂件高 2217、头像 2136×2136、横向滚动 2146）。
· 线上真实页面 + 新版 CSS：16 条全通过。
This commit is contained in:
+267
-31
@@ -35,6 +35,83 @@ function widgets_init()
|
||||
}
|
||||
add_action('widgets_init', 'widgets_init');
|
||||
|
||||
/* ==========================================================================
|
||||
* 后台挂件表单的公共样式与脚本（3.2.51）
|
||||
*
|
||||
* ── 为什么不再各个挂件自己挂一份 ────────────────────────────────────
|
||||
* 原来 `widget_about` / `widget_ad` 各自在构造函数里 add_action 一个
|
||||
* `admin_enqueue_scripts`，动作里 enqueue 媒体库 + widget.min.js。
|
||||
* 这套写法有两个毛病：
|
||||
*
|
||||
* ① 两个挂件都启用时，同一份资源被 enqueue 两次（id 相同，WP 会去重，
|
||||
* 但每次都会多跑一次 wp_enqueue_media，白白初始化一遍媒体框）；
|
||||
* ② 更要紧的：媒体框的 JS 只在**挂件实例展开**用得上，可 WP 的旧版
|
||||
* 挂件页会把所有实例的 form() 一次性渲染进页面 —— 资源没到就等于
|
||||
* 「选择图片」按钮点了没反应。
|
||||
*
|
||||
* 现在统一挂在一个函数里，只在挂件相关页面加载。
|
||||
*
|
||||
* 🔴 缩略图预览这部分样式用 wp_add_inline_style 而不是去改
|
||||
* assets/css/widget.min.css：那个文件**没有源文件**（仓库里只有压缩产物），
|
||||
* 为了加几条规则去手改一行压缩 CSS，下次别人再改就无从维护。
|
||||
* ====================================================================== */
|
||||
|
||||
if (!function_exists('yang_widget_admin_assets')):
|
||||
|
||||
function yang_widget_admin_assets($hook)
|
||||
{
|
||||
// 只在挂件页 / 自定义器加载。别的后台页面不需要媒体框。
|
||||
if (!in_array($hook, array('widgets.php', 'customize.php'), true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_enqueue_media();
|
||||
wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery'), THEME_VERSION, true);
|
||||
wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array(), THEME_VERSION);
|
||||
|
||||
$css = '
|
||||
/* 挂件表单里的图片缩略图。
|
||||
没有它的话，用户只能看到一串 URL，根本不知道那张图长什么样 ——
|
||||
「背景图在哪改」这个问题有一半是"看不见"造成的。 */
|
||||
.yang-media-preview{display:block;margin:8px 0 0;line-height:0}
|
||||
.yang-media-preview img{display:block;width:64px;height:64px;object-fit:cover;border:1px solid #dcdcde;border-radius:4px;background:#f6f7f7}
|
||||
.yang-media-preview-wide img{width:100%;max-width:260px;height:auto;aspect-ratio:16/9}
|
||||
/* 「清除」按钮跟「选择图片」贴在一起，别让它单独换行成一个大按钮 */
|
||||
.media-widget-control .yang-media-clear{margin-left:6px}
|
||||
';
|
||||
wp_register_style('yang-widget-admin', false, array('widget_css'), THEME_VERSION);
|
||||
wp_enqueue_style('yang-widget-admin');
|
||||
wp_add_inline_style('yang-widget-admin', $css);
|
||||
|
||||
/* 「清除」按钮：把输入框清空，并顺手把缩略图去掉。
|
||||
*
|
||||
* 🔴 为什么必须同时清缩略图：只清 input 的话，图片还挂在那儿，
|
||||
* 用户会以为没清掉，再点一次又点回原来的图。
|
||||
* 🔴 为什么用 change 事件触发：主题的 widget.min.js 靠
|
||||
* `.change()` 让 WP 把表单标记为"已修改"，否则直接
|
||||
* 改 .val() 不会点亮「保存」按钮，用户点保存时改动丢失。 */
|
||||
$js = <<<'JS'
|
||||
(function(){
|
||||
if (typeof jQuery === 'undefined') { return; }
|
||||
jQuery(function($){
|
||||
$(document).on('click', '.yang-media-clear', function(e){
|
||||
e.preventDefault();
|
||||
var id = $(this).attr('data-target');
|
||||
if (!id) { return; }
|
||||
var $input = $('#' + id);
|
||||
$input.val('').trigger('change');
|
||||
$input.closest('p').find('.yang-media-preview').remove();
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
})();
|
||||
JS;
|
||||
wp_add_inline_script('widget_scripts', $js);
|
||||
}
|
||||
|
||||
endif;
|
||||
add_action('admin_enqueue_scripts', 'yang_widget_admin_assets');
|
||||
|
||||
/* ==========================================================================
|
||||
* 挂件标题与外框（3.2.50）
|
||||
*
|
||||
@@ -362,8 +439,6 @@ class widget_ad extends WP_Widget
|
||||
{
|
||||
public function __construct()
|
||||
{
|
||||
add_action('admin_enqueue_scripts', array($this, 'scripts'));
|
||||
|
||||
$widget_ops = array(
|
||||
'name' => __('图片广告', 'kratos'),
|
||||
'description' => __('显示自定义图片广告的工具', 'kratos'),
|
||||
@@ -372,14 +447,6 @@ class widget_ad extends WP_Widget
|
||||
parent::__construct(false, false, $widget_ops);
|
||||
}
|
||||
|
||||
public function scripts()
|
||||
{
|
||||
wp_enqueue_script('media-upload');
|
||||
wp_enqueue_media();
|
||||
wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery'));
|
||||
wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array());
|
||||
}
|
||||
|
||||
public function widget($args, $instance)
|
||||
{
|
||||
$subtitle = !empty($instance['subtitle']) ? $instance['subtitle'] : __('广告', 'kratos');
|
||||
@@ -451,8 +518,6 @@ class widget_about extends WP_Widget
|
||||
{
|
||||
public function __construct()
|
||||
{
|
||||
add_action('admin_enqueue_scripts', array($this, 'scripts'));
|
||||
|
||||
$widget_ops = array(
|
||||
'name' => __('个人简介', 'kratos'),
|
||||
'description' => __('可跳转后台的个人简介展示工具', 'kratos'),
|
||||
@@ -461,20 +526,76 @@ class widget_about extends WP_Widget
|
||||
parent::__construct(false, false, $widget_ops);
|
||||
}
|
||||
|
||||
public function scripts()
|
||||
/**
|
||||
* 取挂件实例里的某个值；空则返回回退值。
|
||||
*
|
||||
* 🔴 为什么不用 `!empty()` 判定：
|
||||
* ① 用户在后台把字段清空后，update() 存进去的是空字符串 ''，
|
||||
* `!empty('')` 为 false —— 这一条两边一致，没问题；
|
||||
* ② 但 `!empty('0')` 也是 **false**！昵称就叫「0」、简介只写「0」
|
||||
* 的站点会莫名其妙被回落到主题设置。判空只能判「去掉空白后是空串」。
|
||||
*
|
||||
* 3.2.51 起 widget_about 的四个字段都走这里，取值顺序统一为：
|
||||
* 实例自己的值 → $fallback（主题设置 / 主题自带默认图）
|
||||
*
|
||||
* @param array $instance 挂件实例
|
||||
* @param string $key 字段名
|
||||
* @param string $fallback 实例里没填时用的值
|
||||
* @return string
|
||||
*/
|
||||
private function pick($instance, $key, $fallback)
|
||||
{
|
||||
wp_enqueue_script('media-upload');
|
||||
wp_enqueue_media();
|
||||
wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery'));
|
||||
wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array());
|
||||
$v = isset($instance[$key]) ? $instance[$key] : '';
|
||||
if (!is_string($v)) {
|
||||
return $fallback;
|
||||
}
|
||||
|
||||
$v = trim($v);
|
||||
|
||||
return ($v === '') ? $fallback : $v;
|
||||
}
|
||||
|
||||
public function widget($args, $instance)
|
||||
{
|
||||
$introduce = kratos_option('a_about', __('保持饥渴的专注，追求最佳的品质', 'kratos'));
|
||||
$username = kratos_option('a_nickname', __('Kratos', 'kratos'));
|
||||
$avatar = yang_option_image('a_gravatar');
|
||||
$background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png';
|
||||
/* ══════════════════════════════════════════════════════════════
|
||||
* 3.2.51：这三项原来**只读主题设置**，挂件表单里压根没有对应字段。
|
||||
*
|
||||
* 老代码长这样（拿掉注释后的实质）：
|
||||
* $introduce = kratos_option('a_about', ...);
|
||||
* $username = kratos_option('a_nickname', ...);
|
||||
* $avatar = yang_option_image('a_gravatar');
|
||||
*
|
||||
* 于是用户点开侧栏「个人简介」，表单里只有「背景图片」一个字段，
|
||||
* 头像 / 昵称 / 简介**无处可填**，只能跑去「主题设置 → 站长信息」
|
||||
* 改那份全站共用的。同一侧栏想放两个人的简介就不可能。
|
||||
*
|
||||
* 取值顺序（实例优先，留空回落）：
|
||||
* ① 挂件实例自己填的
|
||||
* ② 主题设置「站长信息」—— **必须保留**：线上站点正用着
|
||||
* 「老杨 / 博士，非博学之士…」那一套，改成"空了就空着"
|
||||
* 会让所有老站点升级后侧栏突然变空白。
|
||||
* ③ 代码里的兜底文案
|
||||
* ══════════════════════════════════════════════════════════════ */
|
||||
$introduce = $this->pick(
|
||||
$instance,
|
||||
'introduce',
|
||||
kratos_option('a_about', __('保持饥渴的专注，追求最佳的品质', 'kratos'))
|
||||
);
|
||||
$username = $this->pick(
|
||||
$instance,
|
||||
'nickname',
|
||||
kratos_option('a_nickname', __('Kratos', 'kratos'))
|
||||
);
|
||||
$avatar = $this->pick(
|
||||
$instance,
|
||||
'avatar',
|
||||
yang_option_image('a_gravatar')
|
||||
);
|
||||
$background = $this->pick(
|
||||
$instance,
|
||||
'background',
|
||||
ASSET_PATH . '/assets/img/about-background.png'
|
||||
);
|
||||
|
||||
/* 🔴 原来写的是 `background:url(' . $background . ') no-repeat ...`
|
||||
* —— url() 里的地址**没有引号**。只要路径含空格、括号、单引号，
|
||||
@@ -492,9 +613,9 @@ class widget_about extends WP_Widget
|
||||
* 统一转义一次。这样 `&` 只会被编成 `&`（正确），
|
||||
* 浏览器解析回属性值后仍是原始的 `&`。
|
||||
*
|
||||
* 🔴 $introduce 来自主题选项 textarea，$username 来自 text，
|
||||
* 原来是裸 echo。个人简介里写个 < 就把后面的结构吃掉了。
|
||||
* 简介保留换行（textarea 的自然语义），其余全部转义。 */
|
||||
* 🔴 $introduce / $username / $avatar 现在都可能来自**后台表单**
|
||||
* （用户自己填的），原来是裸 echo。个人简介里写个 < 就把后面的
|
||||
* 结构吃掉了。简介保留换行（textarea 的自然语义），其余全部转义。 */
|
||||
$bg = 'background-image:url("' . esc_url_raw($background) . '");'
|
||||
. 'background-repeat:no-repeat;'
|
||||
. 'background-position:center center;'
|
||||
@@ -517,31 +638,146 @@ class widget_about extends WP_Widget
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存实例。
|
||||
*
|
||||
* 🔴 不能用 `!empty($new_instance[...])` 判"用户填了没有"：
|
||||
* `!empty('0')` 是 **false** ⇒ 昵称就叫「0」、简介只写「0」的站点
|
||||
* 保存后会变成空串、前台回落主题设置，而且**后台看起来像没保存成功**。
|
||||
* 测试 `_about_test.php` 的「昵称『0』能存下来」抓到的就是这个。
|
||||
* 统一用「转成字符串、trim 后是不是空串」判断，与 pick() 一致。
|
||||
*/
|
||||
public function update($new_instance, $old_instance)
|
||||
{
|
||||
$instance = array();
|
||||
|
||||
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
|
||||
$instance['background'] = (!empty($new_instance['background'])) ? esc_url_raw($new_instance['background']) : '';
|
||||
$instance['title'] = $this->clean_text($new_instance, 'title');
|
||||
$instance['background'] = $this->clean_url($new_instance, 'background');
|
||||
|
||||
/* 3.2.51 新增三项。
|
||||
*
|
||||
* 🔴 简介是 textarea，**不能**用 sanitize_text_field：
|
||||
* 那个函数会去掉所有换行，用户分段的简介会挤成一整段。
|
||||
* 要用 sanitize_textarea_field（WP 4.7+ 才有）。
|
||||
* 主题没声明最低 WP 版本，所以对更老的版本做个兜底 ——
|
||||
* 兜底只做「去标签 + 规整换行」，不追求完全等价。
|
||||
*
|
||||
* 🔴 头像/背景是 URL，用 esc_url_raw（只清洗协议与字符），
|
||||
* 不要在这里 esc_url —— 存进库的值必须是可以直接用的原地址。 */
|
||||
$instance['avatar'] = $this->clean_url($new_instance, 'avatar');
|
||||
$instance['nickname'] = $this->clean_text($new_instance, 'nickname');
|
||||
$instance['introduce'] = $this->clean_textarea($new_instance, 'introduce');
|
||||
|
||||
return $instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* 取一个新提交的字段；没提交或只有空白 → 空串。
|
||||
*
|
||||
* @param array $src 新提交的实例数组
|
||||
* @param string $key 字段名
|
||||
* @return string
|
||||
*/
|
||||
private function submitted($src, $key)
|
||||
{
|
||||
if (!isset($src[$key])) {
|
||||
return '';
|
||||
}
|
||||
$v = $src[$key];
|
||||
if (!is_string($v)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return trim($v);
|
||||
}
|
||||
|
||||
private function clean_text($src, $key)
|
||||
{
|
||||
$v = $this->submitted($src, $key);
|
||||
|
||||
return $v === '' ? '' : sanitize_text_field($v);
|
||||
}
|
||||
|
||||
private function clean_url($src, $key)
|
||||
{
|
||||
$v = $this->submitted($src, $key);
|
||||
|
||||
return $v === '' ? '' : esc_url_raw($v);
|
||||
}
|
||||
|
||||
private function clean_textarea($src, $key)
|
||||
{
|
||||
$v = $this->submitted($src, $key);
|
||||
if ($v === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (function_exists('sanitize_textarea_field')) {
|
||||
return sanitize_textarea_field($v);
|
||||
}
|
||||
|
||||
return trim(preg_replace('/\r\n|\r/', "\n", wp_strip_all_tags($v)));
|
||||
}
|
||||
|
||||
public function form($instance)
|
||||
{
|
||||
$title = !empty($instance['title']) ? $instance['title'] : '';
|
||||
$background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png';
|
||||
|
||||
/* 输入框里显示**用户自己填的原始值**（没填就是空），
|
||||
* 预览图显示**前台实际会用的那张**（含回落）。
|
||||
*
|
||||
* 两者刻意分开：
|
||||
* · 输入框若直接显示回落值，用户会以为"我已经填了"，
|
||||
* 保存后才发现其实存的是主题设置那份；
|
||||
* · 预览图画的是最终效果，用户一眼能看出现在用的是哪张。 */
|
||||
$avatarRaw = isset($instance['avatar']) ? trim((string) $instance['avatar']) : '';
|
||||
$bgRaw = isset($instance['background']) ? trim((string) $instance['background']) : '';
|
||||
$nicknameRaw = isset($instance['nickname']) ? trim((string) $instance['nickname']) : '';
|
||||
$introduceRaw = isset($instance['introduce']) ? (string) $instance['introduce'] : '';
|
||||
|
||||
$avatarShown = $this->pick($instance, 'avatar', yang_option_image('a_gravatar'));
|
||||
$bgShown = $this->pick($instance, 'background', ASSET_PATH . '/assets/img/about-background.png');
|
||||
?>
|
||||
<div class="media-widget-control">
|
||||
<p>
|
||||
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('标题：', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
|
||||
<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('标题：', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
|
||||
<span class="description"><?php _e('留空则不显示标题。', 'kratos');?></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="<?php echo $this->get_field_id('background'); ?>"><?php _e('背景图片:', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo $this->get_field_id('background'); ?>" name="<?php echo $this->get_field_name('background'); ?>" type="text" value="<?php echo esc_attr($background); ?>">
|
||||
<label for="<?php echo esc_attr($this->get_field_id('avatar')); ?>"><?php _e('个人头像：', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('avatar')); ?>" name="<?php echo esc_attr($this->get_field_name('avatar')); ?>" type="text" value="<?php echo esc_attr($avatarRaw); ?>">
|
||||
<button type="button" class="button-update-media upload_avatar"><?php _e('选择图片', 'kratos');?></button>
|
||||
<span class="description"><?php _e('留空则使用「主题设置 → 站长信息 → 个人头像」。', 'kratos');?></span>
|
||||
<?php if ($avatarShown !== '') : ?>
|
||||
<span class="yang-media-preview"><img src="<?php echo esc_url($avatarShown); ?>" alt=""></span>
|
||||
<?php endif; ?>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="<?php echo esc_attr($this->get_field_id('nickname')); ?>"><?php _e('昵称：', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('nickname')); ?>" name="<?php echo esc_attr($this->get_field_name('nickname')); ?>" type="text" value="<?php echo esc_attr($nicknameRaw); ?>" placeholder="<?php echo esc_attr(kratos_option('a_nickname', __('Kratos', 'kratos'))); ?>">
|
||||
<span class="description"><?php _e('留空则使用「主题设置 → 站长信息 → 个人昵称」。', 'kratos');?></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="<?php echo esc_attr($this->get_field_id('introduce')); ?>"><?php _e('个人简介：', 'kratos');?></label>
|
||||
<textarea class="widefat" rows="4" id="<?php echo esc_attr($this->get_field_id('introduce')); ?>" name="<?php echo esc_attr($this->get_field_name('introduce')); ?>" placeholder="<?php echo esc_attr(kratos_option('a_about', __('保持饥渴的专注，追求最佳的品质', 'kratos'))); ?>"><?php echo esc_textarea($introduceRaw); ?></textarea>
|
||||
<span class="description"><?php _e('支持换行。留空则使用「主题设置 → 站长信息 → 个人简介」。', 'kratos');?></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="<?php echo esc_attr($this->get_field_id('background')); ?>"><?php _e('背景图片：', 'kratos');?></label>
|
||||
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('background')); ?>" name="<?php echo esc_attr($this->get_field_name('background')); ?>" type="text" value="<?php echo esc_attr($bgRaw); ?>">
|
||||
<button type="button" class="button-update-media upload_background"><?php _e('选择图片', 'kratos');?></button>
|
||||
<?php if ($bgRaw !== '') : ?>
|
||||
<button type="button" class="button yang-media-clear" data-target="<?php echo esc_attr($this->get_field_id('background')); ?>"><?php _e('清除', 'kratos');?></button>
|
||||
<?php endif; ?>
|
||||
<span class="description"><?php _e('留空则使用主题自带的默认背景图。', 'kratos');?></span>
|
||||
<?php if ($bgShown !== '') : ?>
|
||||
<span class="yang-media-preview yang-media-preview-wide"><img src="<?php echo esc_url($bgShown); ?>" alt=""></span>
|
||||
<?php endif; ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user