本文最后更新于2018年8月24日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
以前用的主题都自带有简码，也在多个博客都看到这种彩色美化框，感觉好看，而且把文章分得很有层次感、突出内容等...
效果展示
绿色提示框
红色提示框
黄色提示框
灰色提示框
代码
一、编辑WordPress主题目录下的functions.php文件，添加如下代码并保存:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*短代码信息框 开始*/ function toz($atts, $content=null){ return '<div id="sc_notice">'.$content.'</div>'; } add_shortcode('v_notice','toz'); function toa($atts, $content=null){ return '<div id="sc_error">'.$content.'</div>'; } add_shortcode('v_error','toa'); function toc($atts, $content=null){ return '<div id="sc_warn">'.$content.'</div>'; } add_shortcode('v_warn','toc'); function tob($atts, $content=null){ return '<div id="sc_tips">'.$content.'</div>'; } add_shortcode('v_tips','tob'); /* 短代码信息框 完毕*/ |
二、CSS美化代码：
添加到CSS中，或者直接在在主题设置——自定义代码——自定义CSS样式中加入
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*通知框*/ #sc_notice { color: #7da33c; background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_error { color: #c66; background: #ffecea url('img/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_tips { color: #777; background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat; border: 1px solid #ccc; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } |
图标素材：
三、代码使用：
在文章编辑时插入以下代码即可，注意括号修改下("{"修改为"[")
- 绿色提示框：{v_notice]输入文字[/v_notice}
- 红色提示框：{v_error]输入文字[/v_error}
- 黄色提示框：{v_warn]输入文字[/v_warn}
- 灰色提示框：{v_tips]输入文字[/v_tips}
- 微信小程序
- 关注微信小程序
-
- 微信公众号
- 关注微信公众号
-
樱花哪里也有这个
@宅小猫 那个不要脸无耻之徒抄袭我的
@起风 去打他
@宅小猫 下午已经打过了，跪地喊爸爸
@起风 这个B也是让你装的没谁了....
爸爸一拳把你打的粘墙上抠都抠不下来