子比主题 – 文章侧边动态渐变背景介绍

三、安装教程：3 步搞定子比主题侧边栏配置

第一步：进入子比主题小工具界面

1. 登录你的 WordPress 后台（通常地址：你的域名/wp-admin）；
2. 点击左侧菜单栏「外观」→ 选择「小工具」，进入小工具配置页面。

第二步：选择侧边栏位置并添加 “自定义 HTML”

1. 子比主题默认提供多个侧边栏位置，根据你的需求选择（推荐 2 个常用位置）：
   • 主侧边栏：在文章详情页、分类页显示，适合引导访客从内容页返回首页；
   • 首页侧边栏：仅在网站首页显示，适合强化站点定位；
2. 点击所选侧边栏下方的「添加小工具」，在弹出的搜索框中输入「自定义 HTML」，找到后点击添加（或直接拖拽到侧边栏中）。

第三步：粘贴代码并保存

1. 点击 “自定义 HTML” 小工具右上角的「编辑」按钮，将上面的完整代码粘贴到「内容」框中；
2. 关键修改（必做！）：
   • 替换「站点介绍文字」：将.zibi-intro-text类下的文字，改成你自己站点的定位（如 “分享美食攻略与旅行体验的个人博客”）；
   • 替换「首页跳转链接」：将<a href="https://www.你的站点域名.com">中的网址，改成你的网站首页真实域名；
3. 点击「保存」按钮，刷新前端页面即可看到效果。

四、个性化修改：让组件更贴合你的站点

五、注意事项：避免踩坑

1. 子比主题版本兼容：建议使用子比主题 V7.0 及以上版本（旧版本可能存在样式冲突，若出现错位，可尝试删除代码中的backdrop-filter: blur(6px)）；
2. 链接跳转目标：代码中target="_self"表示 “在当前页面跳转”，若想 “新窗口打开”，可改为target="_blank"；
3. 侧边栏长度适配：若侧边栏其他小工具较长，该组件会自动与侧边栏高度对齐，无需额外调整；
4. 缓存清理：保存后若前端未显示效果，可清理 WordPress 缓存（如 WP Rocket、LiteSpeed 缓存）和浏览器缓存。