今天给大家分享一个超实用的子比主题美化小技巧 —— 给首页列表页的排序栏和文章页的面包屑导航添加统一风格的背景卡片效果,并且完美适配子比主题自带的白天 / 暗黑模式切换,开箱即用,无需复杂开发,小白也能轻松上手!
效果预览
![图片[1]-子比主题美化:排序栏与面包屑导航添加背景-微享屋](https://www.vwx.cn/wp-content/uploads/2026/04/20260418214418343-子比主题美化:排序栏与面包屑导航添加背景-scaled.webp)
代码部署
登录你的 WordPress 后台,进入「子比主题设置」,找到「自定义代码」→「自定义 CSS 样式」,把下面的代码复制粘贴到输入框里,点击「保存设置」,刷新你的网站即可看到效果!
自定义修改指南
如果你想调整效果,可以直接修改代码里的数值,以下是几个常用修改方向:
- 调整内边距(控制卡片大小)把
padding: 12px 20px;改成你想要的数值,比如:- 想让卡片更矮一点:
padding: 8px 16px; - 想让卡片更宽一点:
padding: 12px 30px;
- 想让卡片更矮一点:
- 调整外边距(控制卡片和下方内容的距离)修改
margin-bottom: 15px;,比如改成margin-bottom: 20px;,让卡片和下方的文章列表 / 正文距离更大一点。 - 修改阴影强度把
box-shadow: 0 0 10px var(--main-shadow);里的10px改成其他数值:- 阴影更淡:
0 0 5px var(--main-shadow); - 阴影更明显:
0 0 15px var(--main-shadow);
- 阴影更淡:
结语
这个小美化虽然简单,但能让你的子比主题网站瞬间提升精致度,而且完全适配暗黑模式。
© 版权声明
文章版权声明
THE END


暂无评论内容