详情
评论
问答
温馨提示: 本文最后更新于2025-09-06 17:06:21,某些文章具有时效性,若有错误或已失效,请在下方 留言 或私信 黑猫(登录后点击)
分割线图标

在排版文章时,用差异化样式突出重点内容,能让读者更容易抓住核心。逛论坛时发现一款渐变段落美化代码,原版本较为臃肿,经过精简优化后,只需几行核心代码就能实现 4 种渐变背景段落 + 1 种提示框样式,适配子比主题,小白也能轻松上手。

图片[1]-子比主题 – 4款文章美化段落渐变背景样式-黑猫博客

一、功能亮点

  • 精简高效:去除冗余代码,保留核心样式,不占用多余服务器资源;
  • 4 种渐变段落:涵盖清新、沉稳、温暖、活力 4 种风格,适配不同内容场景;
  • 1 种专属提示框:带 “提示” 标签的醒目样式,适合标注注意事项、关键提醒;
  • 交互优化:段落 hover 时轻微上浮 + 阴影加深,提升页面灵动性。

二、代码添加步骤

1. 准备工作

先备份子比主题根目录下的 func.php 文件(避免操作失误导致网站异常)。

2. 粘贴代码

将以下精简代码复制,粘贴到 func.php 文件的末尾(建议放在 ?> 闭合标签前,若文件末尾无闭合标签可直接粘贴):
 

3. 保存生效

保存 func.php 文件,刷新网站后台即可完成配置。

三、使用方法(超简单)

在 WordPress 后台编辑文章 / 页面时,按以下步骤插入样式:
  1. 点击编辑器左上角的「+」号(添加区块);
  2. 在搜索框输入「简码」,选择「简码」区块;
  3. 根据需要,在简码区块中输入对应短代码,格式如下:
    • 渐变段落 1:[s1]这里填写需要美化的段落内容[/s1]
    • 渐变段落 2:[s2]这里填写需要美化的段落内容[/s2]
    • 渐变段落 3:[s3]这里填写需要美化的段落内容[/s3]
    • 渐变段落 4:[s4]这里填写需要美化的段落内容[/s4]
    • 提示框:[b1]这里填写需要提醒的内容(如注意事项、核心要点等)[/b1]
  4. 预览文章,即可看到美化效果。

四、样式对应表

短代码 样式类型 风格特点 适用场景
s1 渐变段落 1 清新蓝粉渐变,温柔治愈 散文、情感类内容
s2 渐变段落 2 淡雅蓝灰渐变,沉稳专业 教程、干货类内容
s3 渐变段落 3 温暖橙粉渐变,活泼吸睛 案例、故事类内容
s4 渐变段落 4 活力绿蓝渐变,清新自然 生活、分享类内容
b1 提示框 暖黄渐变 + 醒目提示标签 注意事项、关键提醒、总结

五、小贴士

  • 若想调整颜色,可修改代码中 linear-gradient 后的色值(如 #a8edea),推荐使用 在线渐变配色工具 生成色值;
  • 样式中的内边距(padding)、圆角(border-radius)等参数可按需调整,数值越大效果越明显;
  • 添加代码后若样式不生效,可尝试清除网站缓存(如后台插件缓存、浏览器缓存)。
用这组精简样式,不用安装多余插件,就能让文章排版更有层次感,赶紧试试吧!
© 版权声明
THE END
喜欢就支持一下吧~
点赞2093赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容