在 Sakurairo 主题的原有样式中,如果我们设置了特色图片,就会在文章页的上部很大的宽度去显示图片,但是在其他的使用场景中,这个图片都是大概 16 :9的比例,这就意味这大部分的图片在文章详情页的上部都是不兼容的,出现无头的场景肯定是常态,所以不如干脆将这个展示给取消。取消后的效果:

在讲过了与 Gemini 、GPT 和 Claude 的多次探讨之后,我终于找到了一个简单有效的解决方案,下面是实现步骤:
- 创建一个子主题:
- 在
wp目录/wp-content/themes/下新建一个文件夹,例如:sakurairo-child - 在子主题根目录创建
sytle.css文件,内容如下:注意其中的Template一定要与父主题的名称一致,否则会报错:找不到对应的父主体
- 在
/*
Theme Name: Sakurairo Child
Template: Sakurairo
Version: 1.0
*/
- 在子主题根目录创建
function.php,完成隐藏规则的定义。内容如下:
<?php
/**
* Sakurairo Child: 隐藏单篇文章的特色图以达到与无特色图一致的样式。
* 条件:
* - 仅在单篇文章(single post)页面生效
* - 保留视频封面(有 video_cover 时不隐藏)
* - 保留强制使用特色图为头图(use_as_thumb === 'true' 时不隐藏)
*/
add_filter('get_post_metadata', function ($value, $object_id, $meta_key, $single) {
// 只拦截特色图元数据
if ($meta_key !== '_thumbnail_id') {
return null; // 返回 null 以使用默认处理
}
// 只在单篇文章页处理
if (!is_single()) {
return null;
}
// 若启用视频封面或明确“强制作为头图”,则不隐藏
$use_as_thumb = get_post_meta($object_id, 'use_as_thumb', true); // 'true','only',(default)
$video_cover = get_post_meta($object_id, 'video_cover', true);
if ($use_as_thumb === 'true' || !empty($video_cover)) {
return null; // 保持原值
}
// 否则模拟“没有特色图”,使父主题走无图样式(header 输出 blank;正文显示标题)
return $single ? '' : [];
}, 10, 4);
在管理后台选择子主题,然后进入一个文章,就可以看到我们的代码已经生效了!
但是到这里还没有结束,在前两篇主题修改的内容中,我们修改了 css 样式,而当切换到子主题后发现原有的 css 样式并没有被继承,不过如果你没有提前将其保存,其实也不用担心,因为当切换到原来的主题后会发现原来的 css 样式还在,直接去复制就行了。
随后我又发现上面的代码带来了一个新的 bug:文章下方的上一篇和下一篇文章中的背景图也发生了改变,于是我又开始了与 GPT 之前的新一轮探讨,得到了下面的结果(替换function.php即可):
<?php
/**
* Sakurairo Child: 隐藏单篇文章的特色图以达到与无特色图一致的样式。
* 条件:
* - 仅在单篇文章(single post)页面生效
* - 仅作用于当前主查询的文章对象(不影响上一篇/下一篇等相邻文章)
* - 保留视频封面(有 video_cover 时不隐藏)
* - 保留强制使用特色图为头图(use_as_thumb === 'true' 时不隐藏)
*/
add_filter('get_post_metadata', function ($value, $object_id, $meta_key, $single) {
// 只拦截特色图元数据
if ($meta_key !== '_thumbnail_id') {
return null; // 使用默认处理
}
// 仅在单篇文章页处理
if (!is_single()) {
return null;
}
// 仅作用于当前主查询的文章对象,避免影响相邻文章
$queried_id = get_queried_object_id();
if ((int)$object_id !== (int)$queried_id) {
return null; // 放行其它文章(如上一篇/下一篇)
}
// 若启用视频封面或明确“强制作为头图”,则不隐藏
$use_as_thumb = get_post_meta($object_id, 'use_as_thumb', true); // 'true','only',(default)
$video_cover = get_post_meta($object_id, 'video_cover', true);
if ($use_as_thumb === 'true' || !empty($video_cover)) {
return null; // 保持原值
}
// 模拟“没有特色图”,使父主题走无图样式(header 输出 blank;正文显示标题)
return $single ? '' : [];
}, 10, 4);
Comments 1 条评论