WordPress短代码给文章添加彩色美化框+按钮

 2012-07-05 08:42:56  阅读   作者 admin

摘要:

看到很多博客都在用这个美化框,感觉不错,也用上了,自己拓展了一下,增加了几个,并在后台文章文本编辑器添加了自定义快捷标签按钮。WP自带的摘要也太素了,而且看着感觉不清楚。有需要的朋友也可以拿去试试。效果展示:绿色提示框红色提示框黄色提示框灰色提示框蓝色提示框黑色提示框虚线提示框绿边提示框红边提示框橙边提示框代码部署:❶.编辑WordPress主题目录下的functions.php文件,添加如下代码:/*短代码信息框 开始*/function toz($atts, $content

看到很多博客都在用这个美化框,感觉不错,也用上了,自己拓展了一下,增加了几个,并在后台文章文本编辑器添加了自定义快捷标签按钮。WP自带的摘要也太素了,而且看着感觉不清楚。有需要的朋友也可以拿去试试。

效果展示:

绿色提示框红色提示框黄色提示框灰色提示框蓝色提示框黑色提示框虚线提示框绿边提示框红边提示框橙边提示框

代码部署:

❶.编辑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. function tod($atts, $content=null){
  19.     return ‘<div id=“sc_blue”>’.$content.'</div>’;
  20. }
  21. add_shortcode(‘v_blue’,’tod’);
  22. function toe($atts, $content=null){
  23.     return ‘<div id=“sc_black”>’.$content.'</div>’;
  24. }
  25. add_shortcode(‘v_black’,’toe’);
  26. function tof($atts, $content=null){
  27.     return ‘<div id=“sc_xuk”>’.$content.'</div>’;
  28. }
  29. add_shortcode(‘v_xuk’,’tof’);
  30. function tog($atts, $content=null){
  31.     return ‘<div id=“sc_lvb”>’.$content.'</div>’;
  32. }
  33. add_shortcode(‘v_lvb’,’tog’);
  34. function toh($atts, $content=null){
  35.     return ‘<div id=“sc_redb”>’.$content.'</div>’;
  36. }
  37. add_shortcode(‘v_redb’,’toh’);
  38. function toi($atts, $content=null){
  39.     return ‘<div id=“sc_orange”>’.$content.'</div>’;
  40. }
  41. add_shortcode(‘v_orange’,’toi’);
  42. /* 短代码信息框 完毕*/

❷.CSS代码:

添加到style.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.  }
  10. #sc_warn {
  11.     color: #ad9948;
  12.     background: #fff4b9 url(‘img/sc_warn.png’) –1px –1px no-repeat;
  13.     border: 1px solid #eac946;
  14.     overflow: hidden;
  15.     margin: 10px 0;
  16.     padding: 15px 15px 15px 35px;
  17.  }
  18. #sc_error {
  19.     color: #c66;
  20.     background: #ffecea url(‘img/sc_error.png’) –1px –1px no-repeat;
  21.     border: 1px solid #ebb1b1;
  22.     overflow: hidden;
  23.     margin: 10px 0;
  24.     padding: 15px 15px 15px 35px;

版权声明:本文为 “链子seo” 网络收集,转载请附上保留出处链接及本声明;

原文链接:/Website/3048.html

留言与评论(共有 条评论)
   
验证码:
关于我们
链子seo网站建设团队专注搜索引擎排名优化,专业做企业网站建设、网站设计制作、网页设计、企业建站做网站、网站SEO优化、网络推广,丰富的建站经验团队,优化团队,对谷歌、百度、360等搜索引擎进行快速优化排名。
扫码关注
联系方式
全国服务热线:15810537727
地址:河南省信阳市
Email:3467894574@qq.com
邮编:464000
Copyright ©2012-2020 Powered by 链子seo