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

2017年8月10日18:07:16 39 763

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

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

目前评论:39   其中:访客  27   博主  12

    • avatar 清风 来自天朝的朋友 搜狗浏览器 Windows 10广东省佛山市 电信 0

      学习了 谢谢

      • avatar 青山 来自天朝的朋友 搜狗浏览器 Windows 7江西省萍乡市 电信 3

        学习下!

        • avatar xiaojun 来自天朝的朋友 谷歌浏览器 Windows 7山东省 联通 1

          签到成功!签到时间:下午5:24:38,每日签到,生活更精彩哦~