WordPress 美化:短代碼給文章添加彩色美化框+按鈕

2018年9月3日00:15:46 發表評論

WordPress 美化:短代碼給文章添加彩色美化框+按鈕

看到很多博客都在用這個美化框,感覺不錯,也用來試試,這里說的是純代碼版,用插件 G-Shortcode 也是可以實現同樣的功能的,只不過本人有個習慣就是能不用插件就不用,因為插件使用太多托累網站速度。

先來看看效果圖:

WordPress 美化:短代碼給文章添加彩色美化框+按鈕

代碼部署:

1.編輯 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. /*?沃森博客短代碼信息框?完畢*/

2.把下方代碼添加到 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;
  25. ?}
  26. #sc_tips?{
  27. ????color:?#777;
  28. ????background:?#eaeaea?url('img/sc_tips.png')?-1px?-1px?no-repeat;
  29. ????border:?1px?solid?#ccc;
  30. ????overflow:?hidden;
  31. ????margin:?10px?0;
  32. ????padding:?15px?15px?15px?35px;
  33. }
  34. #sc_blue?{
  35. ????color:?#1ba1e2;
  36. ????background:?rgba(27,?161,?226,?0.26)?url('img/sc_blue.png')?-1px?-1px?no-repeat;
  37. ????border:?1px?solid?#1ba1e2;
  38. ????overflow:?hidden;
  39. ????margin:?10px?0;
  40. ????padding:?15px?15px?15px?35px;
  41. }
  42. #sc_black?{
  43. ????border-width:?1px?4px?4px?1px;
  44. ????border-style:?solid;
  45. ????border-color:?#3e3e3e;
  46. ????margin:?10px?0;
  47. ????padding:?15px?15px?15px?35px;
  48. }
  49. #sc_xuk?{
  50. ????border:?2px?dashed?rgb(41,?170,?227);
  51. ????background-color:?rgb(248,?247,?245);
  52. ????margin:?10px?0;
  53. ????padding:?15px?15px?15px?35px;
  54. }
  55. #sc_lvb?{
  56. ????margin:?10px?0;
  57. ????padding:?10px?15px;
  58. ????border:?1px?solid?#e3e3e3;
  59. ????border-left:?2px?solid?#05B536;
  60. ????background:?#FFF;
  61. }
  62. #sc_redb?{
  63. ????margin:?10px?0;
  64. ????padding:?10px?15px;
  65. ????border:?1px?solid?#e3e3e3;
  66. ????border-left:?2px?solid?#ED0505;
  67. ????background:?#FFF;
  68. }
  69. #sc_organge?{
  70. ????margin:?10px?0;
  71. ????padding:?10px?15px;
  72. ????border:?1px?solid?#e3e3e3;
  73. ????border-left:?2px?solid?#EC8006;
  74. ????background:?#FFF;
  75. }

注:記得將代碼中的圖片素材地址改為你保存的目錄地址(素材下載到文章底部)。

3.使用方法:在文章編輯時插入以下代碼即可,注意修改"]["為“}{”

{v_notice]綠色提示框[/v_notice}

{v_error]紅色提示框[/v_error}

{v_warn]黃色提示框[/v_warn}

{v_tips]灰色提示框[/v_tips}

{v_blue]藍色提示框[/v_blue}

{v_black]黑色提示框[/v_black}

{v_xuk]虛線提示框[/v_xuk}

{v_lvb]綠邊提示框[/v_lvb}

{v_redb]紅邊提示框[/v_redb}

{v_orange]橙邊提示框[/v_orange}

 

4.后臺文章文本編輯器添加快捷按鈕的方法:

如果添加提示框,每次都填寫這么多代碼的話,那不就既枯燥又麻煩死!那么怎么解決呢?

最簡單的是通過在后臺文本編輯器上面加上一些按鈕來避免這種重復的輸入。

好了,直接給出比較全的代碼吧,在 functions.php 文件中加入以下代碼,就可以在后臺文本編輯器上面加上下面這些短代碼了:

  1. //添加 HTML 編輯器自定義快捷標簽按鈕
  2. add_action('after_wp_tiny_mce',?'bolo_after_wp_tiny_mce');
  3. function?bolo_after_wp_tiny_mce($mce_settings)?{
  4. ?>
  5. ????<script?type="text/javascript">
  6. QTags.addButton(?'v_notice',?'綠框',?'<div?id="sc_notice">綠色提示框</div>n',?""?);
  7. QTags.addButton(?'v_error',?'紅框',?'<div?id="sc_error">紅色提示框</div>n',?""?);
  8. QTags.addButton(?'v_warn',?'黃框',?'<div?id="sc_warn">黃色提示框</div>n',?""?);
  9. QTags.addButton(?'v_tips',?'灰框',?'<div?id="sc_tips">灰色提示框</div>n',?""?);
  10. QTags.addButton(?'v_blue',?'藍框',?'<div?id="sc_blue">藍色提示框</div>n',?""?);
  11. QTags.addButton(?'v_black',?'黑框',?'<div?id="sc_black">黑色提示框</div>n',?""?);
  12. QTags.addButton(?'v_xuk',?'虛線',?'<div?id="sc_xuk">虛線提示框</div>n',?""?);
  13. QTags.addButton(?'v_lvb',?'綠邊',?'<div?id="sc_lvb">綠邊提示框</div>n',?""?);
  14. QTags.addButton(?'v_redb',?'紅邊',?'<div?id="sc_redb">紅邊提示框</div>n',?""?);
  15. QTags.addButton(?'v_orange',?'橙邊',?'<div?id="sc_orange">橙邊提示框</div>n',?""?);
  16. function?bolo_QTnextpage_arg1()?{
  17. ????}
  18. ????</script>
  19. <?php
  20. }

代碼說明:

  1. QTags.addButton(?'',?'',?'',?''?);

四對引號,分別表示按鈕的 ID、按鈕顯示名、點一下輸入內容、再點一下關閉內容(最后一對引號為空則一次輸入全部內容),n 表示換行;

形象說明:QTags.addButton( ' 按鈕 ID', '按鈕顯示名', '點一下輸入內容', '點一下關閉內容' );

可以自定義添加多行 QTags.addButton( '', '', '', '' );增加多個按鈕!

最后效果圖如下:

WordPress 美化:短代碼給文章添加彩色美化框+按鈕

圖片素材下載:https://pan.baidu.com/s/16JjdzcvZfd7pFzhfrQcB6w 密碼: eza9

重要說明:本教程只是為了記錄代碼,所以步驟有點繁瑣。如只要實現此功能的話,只需按第 2 和 4 步操作即可。

原文鏈接:https://www.seoqe.com/52.html

  • 博主微信
  • 趕快加我來聊天吧
  • weinxin
  • 博主QQ
  • QQ號:862277464
  • weinxin

發表評論

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