温馨提示:
本文最后更新于
2025-09-06 17:06:21,某些文章具有时效性,若有错误或已失效,请在下方
留言 或私信
黑猫(登录后点击)
在排版文章时,用差异化样式突出重点内容,能让读者更容易抓住核心。逛论坛时发现一款渐变段落美化代码,原版本较为臃肿,经过精简优化后,只需几行核心代码就能实现 4 种渐变背景段落 + 1 种提示框样式,适配子比主题,小白也能轻松上手。
![图片[1]-子比主题 – 4款文章美化段落渐变背景样式-黑猫博客](https://www.520ak.com/wp-content/themes/zibll/img/thumbnail-lg.svg)
- 精简高效:去除冗余代码,保留核心样式,不占用多余服务器资源;
- 4 种渐变段落:涵盖清新、沉稳、温暖、活力 4 种风格,适配不同内容场景;
- 1 种专属提示框:带 “提示” 标签的醒目样式,适合标注注意事项、关键提醒;
- 交互优化:段落 hover 时轻微上浮 + 阴影加深,提升页面灵动性。
先备份子比主题根目录下的 func.php 文件(避免操作失误导致网站异常)。
将以下精简代码复制,粘贴到 func.php 文件的末尾(建议放在 ?> 闭合标签前,若文件末尾无闭合标签可直接粘贴):
保存 func.php 文件,刷新网站后台即可完成配置。
在 WordPress 后台编辑文章 / 页面时,按以下步骤插入样式:
- 点击编辑器左上角的「+」号(添加区块);
- 在搜索框输入「简码」,选择「简码」区块;
- 根据需要,在简码区块中输入对应短代码,格式如下:
- 渐变段落 1:
[s1]这里填写需要美化的段落内容[/s1]
- 渐变段落 2:
[s2]这里填写需要美化的段落内容[/s2]
- 渐变段落 3:
[s3]这里填写需要美化的段落内容[/s3]
- 渐变段落 4:
[s4]这里填写需要美化的段落内容[/s4]
- 提示框:
[b1]这里填写需要提醒的内容(如注意事项、核心要点等)[/b1]
- 预览文章,即可看到美化效果。
- 若想调整颜色,可修改代码中
linear-gradient 后的色值(如 #a8edea),推荐使用 在线渐变配色工具 生成色值;
- 样式中的内边距(padding)、圆角(border-radius)等参数可按需调整,数值越大效果越明显;
- 添加代码后若样式不生效,可尝试清除网站缓存(如后台插件缓存、浏览器缓存)。
用这组精简样式,不用安装多余插件,就能让文章排版更有层次感,赶紧试试吧!
- 最新
- 最热
只看作者