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

2017年8月10日18:07:16 37 688

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

其美化效果是有了,但是却并不方便,所以对整个代码做了修改,增加了几个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:

目前评论:37   其中:访客  25   博主  12

    • avatar zero 来自天朝的朋友 Safari浏览器 Mac OS X 10_13_2江苏省无锡市 电信 1

      看看

      • avatar 妖雪恋人 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 4_3_2 like Mac OS X湖南省长沙市 电信 0

        试试看,

        • avatar 安徽会计网 来自天朝的朋友 谷歌浏览器 Windows XP安徽省六安市 电信 0

          为什么在改functions.php提示代码错误呢?

          • avatar 小贤 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 4_3_2 like Mac OS X广东省湛江市 电信 0

            签到

            • avatar 梦庆轩博客 来自天朝的朋友 谷歌浏览器 Windows 7云南省昆明市 电信 1

              很不错,拿来试试

              • avatar 54464744 来自天朝的朋友 谷歌浏览器 Windows 7湖北省武汉市 联通 1

                签到成功!签到时间:下午11:09:08,每日签到,生活更精彩哦~

                • avatar 54464744 来自天朝的朋友 谷歌浏览器 Windows 7湖北省武汉市 联通 1

                  签到成功!签到时间:04:12:40,每日签到签到成功!签到时间:下午11:07:22,每日签到,生活更精彩哦~

                  • avatar 灰常记忆 来自天朝的朋友 谷歌浏览器 Windows 7陕西省西安市 电信 1

                    这个我以前特爱折腾,现在可有可无。

                    • avatar 堆爱博客 博主 来自天朝的朋友 QQ浏览器  Android 7.1.1 OPPO R11 Plus Build/NMF26X 贵州省铜仁地区 电信

                      签到成功!签到时间:04:12:40,每日签到,生活更精彩哦~

                      • avatar feger 来自天朝的朋友 谷歌浏览器  BLN-AL10 Build/HONORBLN-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.0.0 Mobile Safari/537.36 湖南省湘潭市 联通 1

                        签到成功!签到时间:01:18:35,每日签到,生活更精彩哦~ :razz:

                        • avatar 666 来自天朝的朋友 谷歌浏览器  BLN-AL10 Build/HONORBLN-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.0.0 Mobile Safari/537.36 湖南省湘潭市 联通 1

                          签到成功!签到时间:01:18:35,每日签到,生活更精彩哦~

                          • avatar XIAOMAYI 来自天朝的朋友 谷歌浏览器 Windows 10黑龙江省哈尔滨市 电信 1

                            很不错,拿来试试

                            • avatar 酷播网最新电影VIP电影免费看 来自天朝的朋友 谷歌浏览器 Windows 8.1湖南省永州市 电信 0

                              代码不错

                              • avatar 繁夜 来自天朝的朋友 谷歌浏览器 Windows 10北京市 电信 2

                                确实挺好看的,拿回去折腾去了

                                  • avatar 堆爱博客 博主 来自天朝的朋友 QQ浏览器  Android 6.0.1 ATH-AL00 Build/HONORATH-AL00 贵州省铜仁地区 电信

                                    @繁夜 这个值得折腾一下。反正简单。

                                  • avatar 夏天烤洋芋 来自天朝的朋友 谷歌浏览器 Windows 10云南省昆明市 电信 2

                                    :grin: 却是在写文章的时候,是希望有一些段落能被特别标注的。

                                    • 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: