WordPress

WordPress优化:为wordpress添加彩色按钮

WordPress优化:为wordpress添加彩色按钮-优次元

函数代码

将以下代码添加到主题function.php文件中,

  1. /*绿色提醒框*/  
  2. function toz($atts$content=null){  
  3.     return '<div id="sc_notice">'.$content.'</div>';  
  4. }  
  5. add_shortcode('v_notice','toz');  
  6. /*红色提醒框*/  
  7. function toa($atts$content=null){  
  8.     return '<div id="sc_error">'.$content.'</div>';  
  9. }  
  10. add_shortcode('v_error','toa');  
  11. /*黄色提醒框*/  
  12. function toc($atts$content=null){  
  13.     return '<div id="sc_warn">'.$content.'</div>';  
  14. }  
  15. add_shortcode('v_warn','toc');  
  16. /*灰色提醒框*/  
  17. function tob($atts$content=null){  
  18.     return '<div id="sc_tips">'.$content.'</div>';  
  19. }  
  20. add_shortcode('v_tips','tob');  
  21. /*蓝色提醒框*/  
  22. function tod($atts$content=null){  
  23.     return '<div id="sc_blue">'.$content.'</div>';  
  24. }  
  25. add_shortcode('v_blue','tod');  
  26. /*蓝边文本框*/  
  27. function toe($atts$content=null){  
  28.     return '<div  class="sc_act">'.$content.'</div>';  
  29. }  
  30. add_shortcode('v_act','toe');  
  31. /*橙色文本框*/  
  32. function tof($atts$content=null){  
  33.     return '<div id="sc_organge">'.$content.'</div>';  
  34. }  
  35. add_shortcode('v_organge','tof');  
  36. /*青色文本框*/  
  37. function tog($atts$content=null){  
  38.     return '<div id="sc_qing">'.$content.'</div>';  
  39. }  
  40. add_shortcode('v_qing','tog');  
  41. /*粉色文本框*/  
  42. function toh($atts$content=null){  
  43.     return '<div id="sc_pink">'.$content.'</div>';  
  44. }  
  45. add_shortcode('v_pink','toh');  
  46. /*绿色按钮*/  
  47. function toi($atts$content=null) {  
  48.    extract(shortcode_atts(array("href" => 'http://'), $atts));  
  49.     return '<a class="greenbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';  
  50. }  
  51. add_shortcode('gb' , 'toi' );  
  52. /*蓝色按钮*/  
  53. function toj($atts$content=null) {  
  54.    extract(shortcode_atts(array("href" => 'http://'), $atts));  
  55.     return '<a class="bluebtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';  
  56. }  
  57. add_shortcode('bb' , 'toj' );  
  58. /*黄色按钮*/  
  59. function tok($atts$content=null) {  
  60.    extract(shortcode_atts(array("href" => 'http://'), $atts));  
  61.     return '<a class="yellowbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';  
  62. }  
  63. add_shortcode('yb' , 'tok' );  
  64. /*添加音乐按钮*/  
  65. function tol($atts$content=null){  
  66.     return '<audio style="width:100%;max-height:40px;" src="'.$content.'" controls preload loop>您的浏览器不支持HTML5的 audio 标签,无法为您播放!</audio>';  
  67. }  
  68. add_shortcode('music','tol');  

样式代码

把以下代码添加到主题style.css文件中:

  1.  /*通知框*/  
  2. #sc_notice { color#7da33cbackground#ecf2d6 url('images/sc_notice.png') -1px -1px no-repeatborder1px solid #aac66doverflowhiddenmargin10px 0; padding15px 15px 15px 35px; }#sc_warn { color#ad9948background#fff4b9 url('images/sc_warn.png') -1px -1px no-repeatborder1px solid #eac946overflowhiddenmargin10px 0; padding15px 15px 15px 35px; }#sc_error { color#c66background#ffecea url('images/sc_error.png') -1px -1px no-repeatborder1px solid #ebb1b1overflowhiddenmargin10px 0; padding15px 15px 15px 35px; }#sc_tips {color#777;background#eaeaea url('images/sc_tips.png') -1px -1px no-repeat;border1px solid #ccc;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}#sc_blue {color#4D99D2;background#dbe7f8 url('images/sc_blue.png') -1px -1px no-repeat;border1px solid #b7d2f2;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}#sc_organge {color:#1c2b49;background#ffbc06;border1px solid #e9ac1a;overflowhidden;margin10px 0;padding15px 15px 15px 35px;} #sc_qing {color#131418;background#009856;border1px solid #1065e6;overflowhidden;margin10px 0;padding:  
  3. 15px 15px 15px 35px;}  
  4. #sc_pink {color#131418;background#ef4b86;border1px solid #cb2027;overflow:  
  5. hidden;margin10px 0;padding:  
  6. 15px 15px 15px 35px;}  
  7. .sc_act{margin:10px 0;padding:10px 15px;background:#FFF;border:1px solid  
  8. #E3E3E3;border-left:3px solid #3DABCE}  
  9. .sc_act:hover{background:#fcfcfc;}  
  10. /*!彩色按钮样式 */  
  11. .greenbtn{-moz-box-shadow:0 10px 14px -7px #3e7327;-webkit-box-shadow:0 10px  
  12. 14px -7px #3e7327;box-shadow:0 10px 14px -7px  
  13. #3e7327;background:-webkit-gradient(linear,left top,left  
  14. bottombottom,color-stop(0.05,#77b55a),color-stop(1,#72b352));background:-moz-linear-gr  
  15. adient(top,#77b55a 5%,#72b352  
  16. 100%);background:-webkit-linear-gradient(top,#77b55a 5%,#72b352  
  17. 100%);background:-o-linear-gradient(top,#77b55a 5%,#72b352  
  18. 100%);background:-ms-linear-gradient(top,#77b55a 5%,#72b352  
  19. 100%);background:linear-gradient(to bottombottom,#77b55a 5%,#72b352  
  20. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',  
  21. endColorstr='#72b352',GradientType=0);background-color:#77b55a;-moz-border-radiu  
  22. s:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid  
  23. #4b8f29;display:inline-block;cursor:pointer;color:#fff !important;  
  24. ;font-family:arial;font-size:13px;font-weight:bold;padding:6px  
  25. 12px;text-decoration:none;text-shadow:0 1px 0  
  26. #5b8a3c}.greenbtn:hover{background:-webkit-gradient(linear,left top,left  
  27. bottombottom,color-stop(0.05,#72b352),color-stop(1,#77b55a));background:-moz-linear-gr  
  28. adient(top,#72b352 5%,#77b55a  
  29. 100%);background:-webkit-linear-gradient(top,#72b352 5%,#77b55a  
  30. 100%);background:-o-linear-gradient(top,#72b352 5%,#77b55a  
  31. 100%);background:-ms-linear-gradient(top,#72b352 5%,#77b55a  
  32. 100%);background:linear-gradient(to bottombottom,#72b352 5%,#77b55a  
  33. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',  
  34. endColorstr='#77b55a',GradientType=0);background-color:#72b352;}.greenbtn:active{  
  35. position:relative;top:1px;}  
  36. .bluebtn{-moz-box-shadow:inset 0 1px 0 0 #54a3f7;-webkit-box-shadow:inset 0 1px  
  37. 0 0 #54a3f7;box-shadow:inset 0 1px 0 0  
  38. #54a3f7;background:-webkit-gradient(linear,left top,left  
  39. bottombottom,color-stop(0.05,#007dc1),color-stop(1,#0061a7));background:-moz-linear-gr  
  40. adient(top,#007dc1 5%,#0061a7  
  41. 100%);background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7  
  42. 100%);background:-o-linear-gradient(top,#007dc1 5%,#0061a7  
  43. 100%);background:-ms-linear-gradient(top,#007dc1 5%,#0061a7  
  44. 100%);background:linear-gradient(to bottombottom,#007dc1 5%,#0061a7  
  45. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1',  
  46. endColorstr='#0061a7',GradientType=0);background-color:#007dc1;-moz-border-radiu  
  47. s:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid  
  48. #124d77;display:inline-block;cursor:pointer;color:#fff !important;  
  49. ;font-family:arial;font-size:13px;padding:6px  
  50. 24px;text-decoration:none;text-shadow:0 1px 0  
  51. #154682}.bluebtn:hover{background:-webkit-gradient(linear,left top,left  
  52. bottombottom,color-stop(0.05,#0061a7),color-stop(1,#007dc1));background:-moz-linear-gr  
  53. adient(top,#0061a7 5%,#007dc1  
  54. 100%);background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1  
  55. 100%);background:-o-linear-gradient(top,#0061a7 5%,#007dc1  
  56. 100%);background:-ms-linear-gradient(top,#0061a7 5%,#007dc1  
  57. 100%);background:linear-gradient(to bottombottom,#0061a7 5%,#007dc1  
  58. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',  
  59. endColorstr='#007dc1',GradientType=0);background-color:#0061a7;}.bluebtn:active{p  
  60. osition:relative;top:1px;}  
  61. .yellowbtn{-moz-box-shadow:inset 0 1px 0 0 #fff6af;-webkit-box-shadow:inset 0  
  62. 1px 0 0 #fff6af;box-shadow:inset 0 1px 0 0  
  63. #fff6af;background:-webkit-gradient(linear,left top,left  
  64. bottombottom,color-stop(0.05,#ffec64),color-stop(1,#ffab23));background:-moz-linear-gr  
  65. adient(top,#ffec64 5%,#ffab23  
  66. 100%);background:-webkit-linear-gradient(top,#ffec64 5%,#ffab23  
  67. 100%);background:-o-linear-gradient(top,#ffec64 5%,#ffab23  
  68. 100%);background:-ms-linear-gradient(top,#ffec64 5%,#ffab23  
  69. 100%);background:linear-gradient(to bottombottom,#ffec64 5%,#ffab23  
  70. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',  
  71. endColorstr='#ffab23',GradientType=0);background-color:#ffec64;-moz-border-radiu  
  72. s:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid  
  73. #fa2;display:inline-block;cursor:pointer;color:#333 !important;  
  74. ;font-family:arial;font-size:15px;font-weight:bold;padding:6px  
  75. 24px;text-decoration:none;text-shadow:0 1px 0  
  76. #fe6}.yellowbtn:hover{background:-webkit-gradient(linear,left top,left  
  77. bottombottom,color-stop(0.05,#ffab23),color-stop(1,#ffec64));background:-moz-linear-gr  
  78. adient(top,#ffab23 5%,#ffec64  
  79. 100%);background:-webkit-linear-gradient(top,#ffab23 5%,#ffec64  
  80. 100%);background:-o-linear-gradient(top,#ffab23 5%,#ffec64  
  81. 100%);background:-ms-linear-gradient(top,#ffab23 5%,#ffec64  
  82. 100%);background:linear-gradient(to bottombottom,#ffab23 5%,#ffec64  
  83. 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',  
  84. endColorstr='#ffec64',GradientType=0);background-color:#ffab23;}.yellowbtn:active  
  85. {position:relative;top:1px;}  

添加按钮

在主题文件..\js\my_quicktags.js文件中添加以下代码:

  1. QTags.addButton( 'dl', '下载按钮', "[dl href='""']下载地址[/dl]" );  
  2. QTags.addButton( 'dm', '链接按钮', "[dm href='""'][/dm]" );  
  3. QTags.addButton( 'v_notice', '绿色通知框', "
    ""

    " );  

  4. QTags.addButton( 'v_error', '红色警告框', "
    ""

    " );  

  5. QTags.addButton( 'v_warn', '黄色错误框', "
    ""

    " );  

  6. QTags.addButton( 'v_tips', '灰色提示框', "
    ""

    " );  

  7. QTags.addButton( 'v_blue', '蓝色提示框', "
    ""

    " );  

  8. QTags.addButton( 'v_act', '蓝边文本框', "[v_act]""[/v_act]" );  
  9. QTags.addButton( 'v_organge', '橙色文本框', "[v_organge]""[/v_organge]" );  
  10. QTags.addButton( 'v_qing', '青色文本框', "[v_qing]""[/v_qing]" );  
  11. QTags.addButton( 'v_pink', '粉色文本框', "[v_pink]""[/v_pink]" );  
  12. QTags.addButton( 'gb', '绿色按钮', """" );  
  13. QTags.addButton( 'bb', '蓝色按钮', """" );  
  14. QTags.addButton( 'yb', '黄色按钮', """" );  
  15. QTags.addButton( 'gt', '开源按钮', "[gt href='""']开源按钮[/gt]" );  
  16. QTags.addButton( 'music', '音乐按钮', "[music]""[/music]" );  

历史上的今天:

(4)

本文由 优次元 作者:芈悦 发表,转载请注明来源!

热评文章

发表评论