在 WordPress 建站过程中， 子比 （Zibll）主题作为一款热门的优雅主题，默认评论区顶部的 “ 评论 + 抢沙发 ” 文字标题虽简洁，但对追求美感的站长来说，难免显得有些单调。本文就教你如何将评论区默认标题替换为带图标的分割线，让评论区视觉层次更丰富。

效果图

原来样式

美化后的样式

一、美化教程 4步完成

步骤 1 找到并打开 comments.php 文件

文件路径 /wp-content/themes/zibll/template 目录，找到 comments.php ，右键选择 “编辑”（或下载到本地用记事本等工具 编辑后再上传）

步骤 2 定位要替换的默认标题代码

在 comments.php 中，搜索关键词 .title-theme （或 “ 抢沙发 ”），快速定位到以下代码块（如下图）：

这段 红色框选中 的代码就是子比主题评论区的默认标题，我们将选中的代码 全部删除 即可。

步骤 3 粘贴自定义分割线图标代码

上面选中代码删除后，直接粘贴以下代码。

代码说明：

• 注释的代码：既不影响页面加载，又方便后续想恢复默认样式时直接启用 。
• 分割线：.hm-wrapper用 Flex 布局实现 线条 + 图标 + 线条 居中对齐，确保不同屏幕尺寸下都能正常显示 ；
• 样式：内置 CSS 直接写在代码中，避免额外调用文件，新手无需担心路径问题 。

步骤 4 保存文件并预览效果

1. 点击文件编辑器的直接点击 保存文件 按钮（后台）或 上传 覆盖原文件（本地编辑）
2. 打开网站任意一篇有评论区的文章（如文章详情页），就能看到效果

二、个性化调整：

如果觉得默认效果不符合网站调性 ，可通过修改 CSS 属性实现个性化 ，以下是常见调整方向：

调整目标	修改 CSS 属性	示例（将虚线改为实线 + 红色
线条样式（虚线 / 实线）	.hm-line的border-to	border-top: 1px solid #ff4444;
线条颜色	.hm-line的border-top颜色值	红色#ff4444、蓝色#2196F3
图标大小	.hm-img的width和height	width: 24px; height: 24px;
上下间距	.hm-wrapper的margin	margin: 15px 0;（增大上下间距）
图标替换	替换标签的src属性值	改为自己的图标链接： class="lazy" data-src="你的图标URL"

提示：想用我的图标的网友 你可以直接用我的链接，或者在附件下载图标后上传到你的图片文件（别忘了在代码里替换你的图片链接）

三、注意事项：避免修改后出现问题

1. 主题更新风险：若后续子比主题更新，文件可能会被覆盖，导致修改失效。解决办法有两个：

• 禁用主题自动更新，更新前 先备份 修改后的PHP文件，更新后重新上传。
• 重新按照教程重新再部署一遍。

2. 图标链接有效性：若使用外部图标链接（如案例中的bdstatic.com），需注意链接是否稳定。建议将图标下载到本地，上传至网站媒体库，再使用媒体库的 URL（如https://你的域名/wp-content/uploads/2025/08/链接文件名.svg），避免外部链接失效导致图标显示异常。

总结

• 怎么样是不是好看，部署也简单
• 如果在操作过程中遇到问题（如图标不显示、样式错乱），可先检查文件是否保存正确、图标链接是否有效，或留言咨询，我们会尽力帮你解决。