WordPress 短代码:实现文章添加彩色美化框 引用框体特效

2017年9月9日23:42:44 发表评论 744

以前用的主题都自带有简码,也在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感、突出内容等...                           分享给大家

效果展示

绿色提示框
红色提示框
黄色提示框
灰色提示框

代码实现

一、编辑WordPress主题目录下的functions.php文件,添加如下代码并保存:

  1. /*短代码信息框 开始*/
  2. function toz($atts$content=null){
  3.     return '<div id="sc_notice">'.$content.'</div>';
  4. }
  5. add_shortcode('v_notice','toz');
  6. function toa($atts$content=null){
  7.     return '<div id="sc_error">'.$content.'</div>';
  8. }
  9. add_shortcode('v_error','toa');
  10. function toc($atts$content=null){
  11.     return '<div id="sc_warn">'.$content.'</div>';
  12. }
  13. add_shortcode('v_warn','toc');
  14. function tob($atts$content=null){
  15.     return '<div id="sc_tips">'.$content.'</div>';
  16. }
  17. add_shortcode('v_tips','tob');
  18. /* 短代码信息框 完毕*/

二、CSS美化代码:
添加到CSS中,或者直接在在主题设置——自定义代码——自定义CSS样式中加入

  1. color: #777;
  2. background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
  3. border: 1px solid #ccc;
  4. overflow: hidden;
  5. margin: 10px 0;
  6. padding: 15px 15px 15px 35px;
  7. }

三、代码使用:

在文章编辑时插入以下代码即可,注意括号修改下

  1. 绿色提示框:{v_notice]输入文字[/v_notice}
  2. 红色提示框:{v_error]输入文字[/v_error}
  3. 黄色提示框:{v_warn]输入文字[/v_warn}
  4. 灰色提示框:{v_tips]输入文字[/v_tips}
  • 余额宝红包
  • 扫一扫获得余额宝红包
  • weinxin
  • 我的支付宝收钱码
  • 扫一扫支付宝赞助
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: