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

2017年9月4日21:53:48 46 16,391

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

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

 

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

 

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

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

 

效果实现

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

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

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

此处为隐藏的内容!
发表评论并刷新,方可查看

 

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', '绿框', '<div id="sc_notice">绿色提示框</div>n', "" );
  7. QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>n', "" );
  8. QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>n', "" );
  9. QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>n', "" );
  10. QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>n', "" );
  11. QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>n', "" );
  12. QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>n', "" );
  13. QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>n', "" );
  14. QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>n', "" );
  15. QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>n', "" );
  16. function bolo_QTnextpage_arg1() {
  17.     }
  18.     </script>
  19. <?php
  20. }

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

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

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

3.CSS美化

将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;

 

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

下载地址见文章末尾

 

4.后台效果

完成以上步骤后,打开文章编辑界面,应该会看到以下效果:

 

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

 

【提醒】在新版知更鸟Begin主题LTS版中,已经集成了此按钮,无需我们自己部署代码。

 

 

下载信息 素材名称:CSS代码中有5个图标链接 应用平台:WordPress 素材大小:2KB
下载密码:发表评论并刷新可见!
下载地址
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

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

目前评论:46   其中:访客  0   博主  0

    • 啊啊 啊啊 1 来自天朝的朋友 云南省昭通市 电信

      66666666666啊

      • 啊啊 啊啊 1 来自天朝的朋友 云南省昭通市 电信

        是发送到发送到地方

        • 开心 开心 1 来自天朝的朋友 广东省东莞市 电信

          表示很强大

          • 喵喵 喵喵 2 来自天朝的朋友 河南省郑州市 联通

            厉害了

            • 小米米 小米米 3 来自天朝的朋友 吉林省吉林市 联通

              非常好用

              • 诚诚吖 诚诚吖 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                66666666666啊

                • 21312 21312 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                  66666666啊

                  • 21312 21312 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                    设计搜索兰

                    • 過眼雲煙 過眼雲煙 0 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

                      不错好像很强大的样子

                      • 锟斤拷锟斤拷 锟斤拷锟斤拷 0 来自天朝的朋友 谷歌浏览器  Android 6.0.1 Redmi Note 3 Build/MMB29M 陕西省西安市 电信

                        看看看看

                        • dusy001 dusy001 0 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信

                          下载图标

                          • shdder shdder 3 来自天朝的朋友 谷歌浏览器 Windows 10 天津市 腾讯公司联通数据中心节点

                            学习学习

                            • a262831980 a262831980 4 来自天朝的朋友 谷歌浏览器 Windows 7 广东省湛江市 电信

                              学习学习

                              • 橘猫 橘猫 0 来自天朝的朋友 谷歌浏览器 Windows 7 山东省威海市 联通

                                不错 楼主辛苦了

                                • 王小优 王小优 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省株洲市 电信

                                  路过学习

                                  • 锟斤拷锟斤拷 锟斤拷锟斤拷 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

                                    看看怎么样

                                    • CLAM CLAM 1 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省温州市 电信

                                      感谢分享

                                      • wordus wordus 1 来自天朝的朋友 搜狗浏览器 Windows 10 江苏省盐城市东台市 电信

                                        学习了。

                                        • wordus wordus 1 来自天朝的朋友 搜狗浏览器 Windows 10 江苏省盐城市东台市 电信

                                          学习。

                                          • 墨铺 墨铺 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省邵阳市 移动

                                            希望能用