【奇想博客】子比主题美化教程

哈喽，欢迎来到奇想博客！

​在打磨本站 UI 的过程中，我经常会对 Zibll 子比主题进行一些细节上的“魔改”，以追求更极致的视觉体验。

为了方便日后查阅，也为了给同样喜欢美化子比主题的站长朋友们提供参考，我特意开设了这篇【子比主题美化教程】。这里会持续更新并分享我在建站过程中收集到的、有趣的 CSS、JS、PHP 以及 HTML 实用代码片段，全部经过本站实测，大家可以直接使用。

必看食用指南：这些代码应该加在哪里？

​在开始搬运代码之前，请务必认准它们对应的添加位置，避免放错位置导致不生效或页面报错：

1、🎨 CSS 代码（负责美化、排版、颜色）

• 添加路径：WP 后台 ➔ 子比主题设置 ➔ 全局&功能 ➔ 自定义代码 ➔ 自定义 CSS 样式。
• 注意：复制本文中的 CSS 代码追加到框内最下方即可。修改保存后，必须在后台清空所有缓存并强制刷新前台页面（快捷键 Ctrl+F5）才能看到效果。

​2、⚙️ JS 代码（负责动态交互、特效）

• 添加路径：WP 后台 ➔ 子比主题设置 ➔ 全局&功能 ➔ 自定义代码 ➔ 自定义 javascript 代码。
• 注意：如果代码已经自带了 <script> 标签，也可以将其放置在 自定义底部 HTML 代码 框中。

3、🛠️ PHP/func代码（负责核心功能增强）

• 添加路径：根目录 ➔ wp-content ➔ themes ➔ zibll ➔ functions.php 或 func.php，将代码添加到合适的位置。
• ​💡 站长强烈建议：直接修改主题 PHP 文件主题更新后会覆盖丢失。强烈建议使用 func.php，安全又省心！
• 注意：第一次创建 func.php 开头必须添加 <?php ，哪怕是要写注释， <?php 也需要在第一行最前面。

4、📝 HTML 代码（负责内容结构、小工具模块）

• 添加路径：通常用于 WP 后台 ➔ 外观 ➔ 小工具 ➔ 自定义 HTML 小工具 中；或者在发布文章时，使用区块编辑器的“自定义 HTML”插入。

1、“你别走吖 Σ(っ °Д °;)っ”动态标题

位置：WP 后台 ➔ 子比主题设置 ➔ 全局&功能 ➔ 自定义代码 ➔ 自定义 javascript 代码

//网站动态标题开始 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
//网站动态标题结束

/* 文章链接文本自动加超链接 */   add_filter('the_content', 'make_clickable');

3、文章图片圆角样式

位置：WP 后台 ➔ 子比主题设置 ➔ 全局&功能 ➔ 自定义代码 ➔ 自定义 CSS 样式

/* 给文章内容中的图片添加统一圆角 */
.article-content img {
    border-radius: 8px; /* 这里的 8px 可以根据你的喜好调整，建议8~15px */
    overflow: hidden;
}