WordPress给编辑器添加自定义按钮

2018年4月8日 3 条评论 12.76k 次阅读 0 人点赞

上文中我们成功添加了Shortcodes短代码,然而在编辑的时候还是有点不方便,为了更有效率的进行文章编辑,我们还可以给WordPress的后台编辑器加上自定义按钮

添加HTML文本编辑器下的按钮

WordPress后台默认使用的是TinyMCE编辑器Github地址。后台的按钮大致分为三种,最上方的我称作Media button,默认只有一个添加媒体按钮,在可视化编辑器下的的叫Edit button,这些按钮可以自己添加图片(标),最后在HTML文本编辑器下的叫HTML button

此处添加的是文本按钮添加添加文本编辑器的按钮方法比较简单,只需用到一个action钩子,还是打开主题的functions.php,加在最后一个?>之前(一般在add_action,add_fliter这些后面一点点都OK)前提是已经添加好Shortcode,代码示例

添加可视化编辑器按钮

functions.php中添加的代码参考

接下来在新建一个名为shortcodes的文件夹,上传到主题根目录,里面新建一个more.js的文件,编辑该文件,参考代码

变量名需和functions.php里的一致,可以看到我需要在shortcodes文件夹下新建一个叫images的文件夹,里面存放按钮的图片,我设置的是方形的200*200的png图片

添加Media button

Media button的添加我在网上并没有找到任何教程(或者有教程也是错误的),目前只会添加按钮但还不能给按钮赋值,实现更多的功能,说不定以后多参考几个插件的代码可以找到方法

有关Media button可参考这两篇文章
给WordPress编辑器添加表情按钮,让文章萌萌哒!
如何给WordPress的编辑器添加一个自定义按钮,并且实现插入功能
更多参考链接
WordPress 的 Hook 机制与原理
WordPress为自带编辑器添加自定义功能按钮

Hungway

Hungway

If not me,who?If not now,when?

文章评论(3)

  • canadian pharcharmy online

    We're a group of volunteers and opening a new
    scheme in our community. Your web site offered us with valuable info to work on. You've done a formidable job and our entire community will be thankful to you.

    2018年12月25日
  • viagra coupon

    I'm not sure exactly why but this weblog is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I'll check back later on and see if the problem still exists.

    2019年3月23日
  • best price cialis 20mg

    Hiya! I know this is kinda off topic nevertheless I'd
    figured I'd ask. Would you be interested in trading links or maybe guest authoring a blog article or vice-versa?
    My blog discusses a lot of the same topics as yours and I think we could greatly benefit from
    each other. If you might be interested feel free to shoot me an e-mail.
    I look forward to hearing from you! Awesome blog by
    the way!

    2019年3月30日