WordPress 实现文章添加彩色美化框

  • A+
所属分类:WordPress 美化特效

WordPress 实现文章添加彩色美化框

编辑 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 美化代码:

  1. /*通知框*/
  2. #sc_notice {
  3. color: #7da33c;
  4. background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
  5. border: 1px solid #aac66d;
  6. overflow: hidden;
  7. margin: 10px 0;
  8. padding: 15px 15px 15px 35px; }
  9. #sc_warn, .post-password-form {
  10. color: #ad9948;
  11. background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
  12. border: 1px solid #eac946;
  13. overflow: hidden;
  14. margin: 10px 0;
  15. padding: 15px 15px 15px 35px; }
  16. #sc_error { color: #c66;
  17. background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
  18. border: 1px solid #ebb1b1;
  19. overflow: hidden;
  20. margin: 10px 0; padding: 15px 15px 15px 35px; }
  21. #sc_tips {
  22. color: #777;
  23. background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
  24. border: 1px solid #ccc;
  25. overflow: hidden;
  26. margin: 10px 0;
  27. padding: 15px 15px 15px 35px;
  28. }

代码使用

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

  1. 绿色提示框:{v_notice]输入文字[/v_notice}
  2. 红色提示框:{v_error]输入文字[/v_error}
  3. 黄色提示框:{v_warn]输入文字[/v_warn}
  4. 灰色提示框:{v_tips]输入文字[/v_tips}

素材下载

点我下载

 

文件下载

发表评论

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