默认编辑器增加彩色美化框自定义按钮

2017年8月10日18:07:16 42 801

之前在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感,体验方便,所以堆爱博客也用上了,效果不错哦。这里也分享给大家。

其美化效果是有了,但是却并不方便,所以对整个代码做了修改,增加了几个WordPress默认TinyMCE编辑器自定义按钮。点击按钮直接插入标签,更加方便实用。

效果展示

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

很多博客都有这样的代码教程,但是基本上都是没有添加到后台自定义按钮。

广告也精彩

效果实现

1.更改编辑器默认视图为HTML

大家都知道,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们来说,可能更习惯使用HTML视图手动编辑。

设置方法:将以下代码添加到主题的functions.php文件里即可:

  1. //更改编辑器默认视图为HTM
  2. add_filter('wp_default_editor', create_function('', 'return "html";'));

2.新增WordPress默认TinyMCE编辑器自定义按钮

在WordPress主题的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
    }

其中,主要设置自定义按钮的是这个函数:

  1. QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );

四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行

广告也精彩

3.CSS美化

将css代码放入主题的style.css文件中或其他地方:

  1. /*彩色美化框*/
  2. #sc_notice {
  3. color#7da33c;
  4. background#ecf2d6 url('img/sc/sc_notice.png') -1px -1px no-repeat;
  5. border1px solid #aac66d;
  6. overflowhidden;
  7. margin10px 0;
  8. padding15px 15px 15px 35px;
  9. width: 98%;
  10. }
  11. #sc_warn, .post-password-form {
  12. color#ad9948;
  13. background#fff4b9 url('img/sc/sc_warn.png') -1px -1px no-repeat;
  14. border1px solid #eac946;
  15. overflowhidden;
  16. margin10px 0;
  17. padding15px 15px 15px 35px;
  18. width: 98%;
  19. }
  20. #sc_error {
  21. color#c66;
  22. background#ffecea url('img/sc/sc_error.png') -1px -1px no-repeat;
  23. border1px solid #ebb1b1;
  24. overflowhidden;
  25. margin10px 0;
  26. padding15px 15px 15px 35px;
  27. width: 98%;
  28. }
  29. #sc_tips {
  30. color#888888;
  31. background#f1f1f1 url('img/sc/sc_tips.png') -1px -1px no-repeat;
  32. border1px solid #bbbbbb;
  33. padding15px 15px 5px 35px;
  34. margin10px 0;
  35. width: 98%;
  36. overflowhidden;
  37. }
  38. #sc_blue {
  39.     color#1ba1e2;
  40.     background: rgba(27, 161, 226, 0.26) url('img/sc/sc_blue.png') -1px -1px no-repeat;
  41.     border1px solid #1ba1e2;
  42.     overflowhidden;
  43.     margin10px 0;
  44.     padding15px 15px 15px 35px;
  45. }
  46. #sc_black {
  47.     border-width1px 4px 4px 1px;
  48.     border-stylesolid;
  49.     border-color#3e3e3e;
  50.     margin10px 0;
  51.     padding15px 15px 15px 35px;
  52. }
  53. #sc_xuk {
  54.     border2px dashed rgb(41, 170, 227);
  55.     background-colorrgb(248, 247, 245);
  56.     margin10px 0;
  57.     padding15px 15px 15px 35px;
  58. }
  59. #sc_lvb {
  60.     margin10px 0;
  61.     padding10px 15px;
  62.     border1px solid #e3e3e3;
  63.     border-left2px solid #05B536;
  64.     background#FFF;
  65. }
  66. #sc_redb {
  67.     margin10px 0;
  68.     padding10px 15px;
  69.     border1px solid #e3e3e3;
  70.     border-left2px solid #ED0505;
  71.     background#FFF;
  72. }
  73. #sc_organge {
  74.     margin10px 0;
  75.     padding10px 15px;
  76.     border1px solid #e3e3e3;
  77.     border-left2px solid #EC8006;
  78.     background#FFF;

CSS代码中有5个图标链接,请将链接改为你保存的位置
图标素材下载:

密码:
此处为隐藏的内容!
发表评论并刷新后查看

4.后台效果

完成以上步骤后,打开文章编辑界面,应该会看到以下效果:
默认编辑器增加彩色美化框自定义按钮
使用时,只需要将“输入文字”改为需要的文字即可。

历史上的今天:

文件下载

广告也精彩
weinxin
我的微信
这是我的微信扫一扫

发表评论

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

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

目前评论:42   其中:访客  29   博主  13

    • avatar 乐赚168 来自天朝的朋友 谷歌浏览器 Windows 10河南省南阳市 电信 2

      博客很不错,支持博主

      • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows XP浙江省杭州市 电信 4

        博客弄得多姿多彩啊!

        • avatar 自留地 来自天朝的朋友 谷歌浏览器 Windows 7河南省郑州市 联通 1

          之前评论之后,也刷新了,并且清理了浏览器的缓存,结果还是看不到提取码。再来一次

          • avatar 自留地 来自天朝的朋友 谷歌浏览器 Windows 7河南省郑州市 联通 1

            我也发现这个问题,每次想编辑,必须先找到相应的彩色框代码。你太有才了

            • avatar 九哥 来自天朝的朋友 QQ浏览器 Windows 7云南省昭通市 电信 2

              这个NEW用在你这有点不合适,最新文章那块你换成我那样好点。

                • avatar 堆爱博客 博主 来自天朝的朋友 QQ浏览器 Windows 10贵州省铜仁地区 电信

                  @九哥 怎么不合适啊?挺好的。

                    • avatar 九哥 来自天朝的朋友 QQ浏览器 Windows 7云南省昭通市 电信 2

                      @堆爱博客 第一个右边被挡住了,没发现?效果不好。

                        • avatar 堆爱博客 博主 来自天朝的朋友 QQ浏览器 Windows 10贵州省铜仁地区 电信

                          @九哥 :!: 好像是啊。有空调一下代码。 :evil: :evil: