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

2017年9月4日21:53:48 46 15,495

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

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

    • 78tnnd 78tnnd 2 来自天朝的朋友 谷歌浏览器 Windows 10 山东省 移动

      感谢分享