成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

WordPress技巧

分段图

最新文章

WordPress技巧
当前位置: 首页 » 大学杂谈 » WordPress技巧 » WordPress默认TinyMCE编辑器增加彩色美化框自定义按钮

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

编辑:狂族晨曦 来源:WordPress技巧 日期:2016-06-16 阅读: 3,390 次 22 条评论 » 百度已收录

先森在新的友链伙伴闲鱼博客那里看到了一篇技术文,介绍的是WordPress短代码实现文章添加彩色美化框。可能看标题大家不太明白说的是什么,其实就是指的包裹着这段话的绿框框。

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

效果展示

绿色输入框:输入文字
红色提示框:输入文字
黄色提示框:输入文字
灰色提示框:输入文字

这种彩色美化框非常常见,尤其是实用知更鸟主题的博客,先森的友链都有很多是实用的知更鸟主题。相信无论是知更鸟主题,还是这种美化框,都是很受欢迎的。

效果实现

在闲鱼博客那里,先森发现使用的是短代码实现的。但当先森研究了一下WordPress默认TinyMCE编辑器增加自定义按钮的时候发现,其实可以直接省略短代码那一步了,来看看怎么实现的吧。

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

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

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

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

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

在WordPress主题的functions.php最后一个?>前加入一下代码:

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'v_notice', '绿色提示框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_error', '红色提示框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_warn', '黄色提示框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_tips', '灰色提示框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
</script>
<?php
}

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

QTags.addButton( ”, ”, ”, ” );

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

形象说明:

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

可以自定义添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多个按钮!

3.CSS美化

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

/*彩色美化框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}

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

图标素材下载:链接: http://pan.baidu.com/s/1bo3ziCB 密码: chxs(成航先森)

4.后台效果

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

实现后台效果

实现后台效果

使用时,只需要将“输入文字”改为需要的文字即可。

写在最后

先森从开始WordPress建站之后,就将WordPress默认的TinyMCE编辑器换成了百度UEditor编辑器了,所以为了完成本文的效果还费了点功夫来熟悉默认编辑器。先森是两步一起走,同时还实现了为UEditor编辑器增加同样功能的自定义按钮。相较于UEditor,TinyMCE的自定义按钮就显得很小儿科了,方法先森过两天再分享出来。

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共2877个字
转载请注明出处来自http://www.capjsj.cn/tinymce_caise_anniu.html
已有 22 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
WORDPRESS短代码给文章添加彩色美化框+按钮 |的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 杰伦视频网的头像

    好久没来了,过来瞧瞧。
    代码框里面的代码怎么是乱的

    2016-06-16 18:46 回复
  2. Koolight的头像

    搞这么多不同颜色的框,那得多么丰富的内容才能用得上啊!

    2016-06-16 23:54 回复
    • 博主的Gravatar 头像

      @Koolight: 又不是在一篇文章中添加所有颜色的,只在需要的时候添加即可。我认为是绿色摘要、引用,黄色提醒,粉红色警告,灰色引用链接,各种颜色功能不同吧,看怎么用了。

      2016-06-16 23:59 回复
  3. 闲鱼的头像

    :mrgreen: 其实我是有整合到知更鸟的按钮里的,你这样也很方便

    2016-06-17 07:56 回复
    • 博主的Gravatar 头像

      @闲鱼: 主要是并不是所有人都用的知更鸟的嘛,他们就没有你这么方便了

      2016-06-17 08:23 回复
  4. benen005的头像

    确实用得上

    2016-06-17 10:37 回复
  5. 唯历史的头像

    大神们经常搞点东西出来,羡煞不懂技术的人

    2016-06-17 10:41 回复
  6. 夏日博客的头像

    这种高亮显示对于经常插入代码来说,体验上很好。

    2016-06-17 14:32 回复
  7. 个人博客的头像

    没啥多少内容好像用不上

    2016-06-17 15:39 回复
  8. 纯洁博客的头像

    这个弄着还不错

    2016-06-17 16:36 回复
  9. 刘传鹏博客的头像

    太过聚焦在技术上,就有些过了吧

    2016-06-17 20:19 回复
  10. 小C博客的头像

    好东西!我一般都是看到喜欢的直接扒来!

    2016-06-17 23:43 回复
  11. 蒸汽回收机的头像

    不错哦,谢谢博主分享

    2016-06-18 17:06 回复
  12. 米粒博客的头像

    挺不错的!虽然我也想折腾一下,不过怕不适合zlog!

    2016-06-20 10:25 回复
  13. BanYuner的头像

    一切的美化都是基于CSS的 学习CSS是绝对有必要的

    2016-06-23 13:28 回复
  14. 堆爱博客的头像

    找了一大圈,终于找到了!感谢。

    2017-03-13 13:28 回复
  15. 堆爱博客的头像

    QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );
    按钮ID和点一下输入内容中的ID不一样!是不是有错误啊?

    2017-03-13 14:42 回复
    • 博主的Gravatar 头像

      @堆爱博客: 不是错误,两个ID的作用不一样,按钮ID是区分按钮的,标签ID是用于定义CSS代码的。

      2017-03-13 21:28 回复
  16. 堆爱博客的头像

    为什么我没有整出来!

    2017-03-13 19:11 回复
官方微信
发表评论 返回顶部