WordPress文章编辑器增加彩色边框代码

发布时间：

WordPress文章编辑器增加彩色边框代码

在很多博客都看到这种彩色美化框，非常好看，而且把文章分得很有层次感，体验大方，站长的博客也用上了，效果不错哦，这里也分享给大家。代码来源【99八十一】博客

效果展示：

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

使用方法：

WordPress文章编辑器增加彩色边框代码

 

如何实现上面的编辑器添加这些彩色框插入标签按钮？

1.将以下代码添加到主题目录的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', '绿框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
  7. QTags.addButton( 'v_error', '红框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
  8. QTags.addButton( 'v_warn', '黄框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
  9. QTags.addButton( 'v_tips', '灰框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
  10. QTags.addButton( 'v_blue', '蓝框', '<blockquote id="sc_blue">输入文字</blockquote>\n', "" );
  11. QTags.addButton( 'v_black', '黑框', '<blockquote id="sc_black">输入文字</blockquote>\n', "" );
  12. QTags.addButton( 'v_xuk', '虚线', '<blockquote id="sc_xuk">输入文字</blockquote>\n', "" );
  13. QTags.addButton( 'v_lvb', '绿边', '<blockquote id="sc_lvb">输入文字</blockquote>\n', "" );
  14. QTags.addButton( 'v_redb', '红边', '<blockquote id="sc_redb">输入文字</blockquote>\n', "" );
  15. QTags.addButton( 'v_organge', '橙边', '<blockquote id="sc_organge">输入文字</blockquote>\n', "" );
  16. </script>
  17. <?php
  18. }

2.添加以下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. width: 98%;
  10. }
  11. #sc_warn, .post-password-form {
  12. color: #ad9948;
  13. background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
  14. border: 1px solid #eac946;
  15. overflow: hidden;
  16. margin: 10px 0;
  17. padding: 15px 15px 15px 35px;
  18. width: 98%;
  19. }
  20. #sc_error {
  21. color: #c66;
  22. background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
  23. border: 1px solid #ebb1b1;
  24. overflow: hidden;
  25. margin: 10px 0;
  26. padding: 15px 15px 15px 35px;
  27. width: 98%;
  28. }
  29. #sc_tips {
  30. color: #888888;
  31. background: #f1f1f1 url('img/sc_tips.png') -1px -1px no-repeat;
  32. border: 1px solid #bbbbbb;
  33. padding: 15px 15px 5px 35px;
  34. margin: 10px 0;
  35. width: 98%;
  36. overflow: hidden;
  37. }
  38. #sc_blue {
  39.     color: #1ba1e2;
  40.     background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
  41.     border: 1px solid #1ba1e2;
  42.     overflow: hidden;
  43.     margin: 10px 0;
  44.     padding: 15px 15px 15px 35px;
  45. }
  46. #sc_black {
  47.     border-width: 1px 4px 4px 1px;
  48.     border-style: solid;
  49.     border-color: #3e3e3e;
  50.     margin: 10px 0;
  51.     padding: 15px 15px 15px 35px;
  52. }
  53. #sc_xuk {
  54.     border: 2px dashed rgb(41, 170, 227);
  55.     background-color: rgb(248, 247, 245);
  56.     margin: 10px 0;
  57.     padding: 15px 15px 15px 35px;
  58. }
  59. #sc_lvb {
  60.     margin: 10px 0;
  61.     padding: 10px 15px;
  62.     border: 1px solid #e3e3e3;
  63.     border-left: 2px solid #05B536;
  64.     background: #FFF;
  65. }
  66. #sc_redb {
  67.     margin: 10px 0;
  68.     padding: 10px 15px;
  69.     border: 1px solid #e3e3e3;
  70.     border-left: 2px solid #ED0505;
  71.     background: #FFF;
  72. }
  73. #sc_organge {
  74.     margin: 10px 0;
  75.     padding: 10px 15px;
  76.     border: 1px solid #e3e3e3;
  77.     border-left: 2px solid #EC8006;
  78.     background: #FFF;
  79. }

3.修改上面CSS里面的5个图片URL地址url('img/sc_error.png')

下载后把图标上传到主题目录下面的img文件夹就可以了，至此，你刷新下页面，就可以看到编辑器文本模式有这些彩色框标签添加按钮了。

下载信息 图标素材
下载地址