一、功能需求缘起

在 WordPress 主题生态里，子比主题凭借丰富且精致的文章信息展示，深受站长喜爱 —— 文章顶部标题区域，能清晰呈现字数、阅读时长、发布时间、所属分类、作者发文数等元数据，让内容页专业感拉满。而 B2 主题虽在轻量化、拓展性上表现优异，却缺失这一细节。为了让 B2 主题也能拥有同款 “标题区信息增强” 效果，我们用纯代码移植实现，无需依赖插件，精准复刻核心功能！

二、功能效果对标（子比主题参考）

先看子比主题的标题区信息展示逻辑（以示例图为准 ）：

• 核心数据：文章字数（如 “598 字” ）、阅读时长（如 “3 分钟” ）、发布时间（如 “2025 – 07 – 31” ）、所属主题 / 分类（如 “子比兔主题” ）、互动数据（如 “25” 可能是评论数 ）、作者发文统计（如 “该作者已发布 10 篇文章” ）。
• 布局逻辑：紧跟标题 / 封面图区域，用轻量图标 + 文字的形式呈现，不破坏主题原有风格，却强化内容层次感。

三、纯代码移植实现步骤（B2 主题适配）

（一）前置准备

1. 备份主题文件：通过 FTP / 宝塔面板，复制 B2 主题的functions.php（主题函数文件 ）到本地，防止代码错误导致站点异常。

（二）步骤 1：添加文章信息函数（functions.php ）

在functions.php末尾插入以下代码，用于获取并格式化文章元数据：

代码说明：

• 通过get_post_field get_the_author_meta等 WordPress 原生函数，精准提取文章内容、作者 ID 等数据；
• 用mb_strlen统计中文字数（兼容 UTF – 8 编码 ），count_user_posts统计作者文章数量，逻辑清晰且轻量化。

（三）步骤 2：插入信息到标题区域（single.php ）

找到single.php中文章标题的渲染位置（示例结构，需根据实际主题调整 ）：

html

<header class="entry - header">
    <h1 class="entry - title"><?php the_title(); ?></h1>
    <!-- 在此处插入信息 -->
</header>

在标题h1标签后，插入以下代码调用信息函数：

php

<?php if (function_exists('b2_render_post_info')) : ?>
    <?php echo b2_render_post_info(); ?>
<?php endif; ?>

（四）步骤 3：样式美化（CSS 自定义 ）

为了让信息展示贴合 B2 主题风格，在主题自定义 CSS（或style.css ）中添加：

css

.b2 - post - meta {
    font - size: 14px;
    color: #666; /* 适配主题灰色系 */
    margin: 10px 0;
    display: flex;
    gap: 15px; /* 元素间距 */
    align - items: center;
}

.b2 - post - meta span {
    display: flex;
    align - items: center;
    gap: 5px; /* 图标与文字间距，若加图标可扩展 */
}

扩展建议：若想添加主题的小图标（如日历、文字数图标 ），可引入主题字体图标库，或用background - image方式加载本地 SVG，让视觉更贴近原版。

四、功能验证与调试

1. 前台预览：发布一篇测试文章，访问详情页，检查标题区是否显示 “发布时间、字数、阅读时长、作者发文数” 。
2. 异常处理：若数据不显示，检查functions.php是否有语法错误（可通过 WordPress 后台 “站点健康” 查看报错 ）；若样式错乱，调整 CSS 的选择器优先级（如增加.entry - header .b2 - post - meta ）。

五、拓展与优化思路

• 评论数 / 点赞数集成：通过get_comments_number()函数，在b2_render_post_info中添加评论数展示；若主题有点赞功能，可调用对应点赞统计函数。
• 条件判断优化：给信息展示增加开关（如通过主题自定义选项控制 ），让功能更灵活：

通过纯代码移植，B2 主题也能拥有子比主题同款 “标题区信息增强” 功能，既保留主题轻量化优势，又强化内容页专业感。站长可根据实际需求，扩展数据类型、调整样式，让文章展示更贴合品牌调性～

（注：代码需根据 B2 主题实际结构微调，不同版本主题的模板文件可能有差异，建议先在测试环境验证后，再部署到生产站点 。）

六、效果演示