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

  • A+
所属分类: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(271612260.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(41170227);
  55.     background-color: rgb(248247245);
  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文件夹就可以了,至此,你刷新下页面,就可以看到编辑器文本模式有这些彩色框标签添加按钮了。

下载信息 图标素材
下载地址
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

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

目前评论:8   其中:访客  5   博主  3

    • 新闻头条 新闻头条 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 阿里云计算有限公司

      文章不错非常喜欢

      • un un 2 来自天朝的朋友 火狐浏览器 Windows 10 辽宁省沈阳市 联通

        第三步怎么回事?

          • un un 2 来自天朝的朋友 火狐浏览器 Windows 10 辽宁省沈阳市 联通

            @un 好了okok

            • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Unknow Os 山东省潍坊市 移动

              @un 不用修改,直接使用默认代码即可。不过要把附件中的图片路径上传正确。

            • 小航工作室 小航工作室 1 来自天朝的朋友 QQ浏览器  Android 8.1.0 Redmi 6 Pro Build/OPM1.171019.019 广东省 联通

              博主,非常的急,请给个思路,,,,我自己测试了好几次都没有成功,由于没有电脑,给个思路,谢谢。
              就是……如图标题手机版会两边会突出一点蓝色的背景,怎么改和文章div板块一样啊!评论
              评论

                • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                  @小航工作室 你看下“博客折腾记录”第33、34项的代码对你可能有帮助!https://www.xgboke.com/92.html。或者发你的网站地址看看,不然没法给测试

                • 小四 小四 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省安阳市 移动

                  代码修改完了,编辑器不行啊,看着可修改的特别少,(难度我是新编辑器?)
                  根目录我也没找到function.php(我修改的是functions.php)

                    • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                      @小四 是添加的functions.php里,新编辑器不行吧,不要使用新的古腾堡编辑器。回退方法:一句代码禁用Gutenberg(古腾堡) 编辑器https://www.xgboke.com/1710.html