使用QuicktagsAPI为WP文本编辑器添加快捷按钮

少羽.
少羽.
少羽.
1844
文章
92
评论
2019年1月7日17:20:14 评论 3.1K 1488字阅读4分57秒

建站的过程中为了网站整体风格的统一以及代码的简化,我们常常需要将一些常用的功能或样式打包起来然后通过短代码的方式进行调用,但是随着自定义的短代码越来越多,要记住并正确使用这些短代码就变得非常困难,而解决这一问题最简单的方式莫过于使用按钮了。WordPress的 Quicktags API 就可以很方便地为我们在文本编辑器中添加这样一个快捷按钮。下面我们就来具体了解一下这个API。使用QuicktagsAPI为WP文本编辑器添加快捷按钮

在开始之前我们需要知道 Quicktags API 所使用的两个 JS 文件分别是wp-includes/js/文件夹下的 quicktags.js 和 quicktags.min.js.  WordPress的文本编辑器默认的一些快捷按钮就是调用的这两个文件。

Quicktags语法

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

 

id:字符串类型,必选值。标签在前端HTML页面中显示时的id值,这里我们一般设置为定义的函数名即可。

display:字符串类型,必选值。显示在按钮上的提示性文字。

arg1:字符串类型,必选值。一般为我们所设置的短代码的起始标签,或者为点击按钮时的回调。

arg2:字符串类型,可选值。一般为我们所设置的短代码的终止标签,若无终止标签则留空。

access_key:字符串类型,可选值。用于设置按钮的热键。

title:字符串类型,可选值。标签在前端HTML页面中的标题。

priority:整型,可选值。设置按钮在文本编辑器工具栏中的位置。

instance:字符串类型,可选值。设置按钮只针对特定的实例起作用,留空则对所有实例有效。

Quicktags示例

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

这里我们就用官方的示例来进行简单的说明。appthemes_add_quicktags() 中我们只需要将 quicktags 更改为自己所定义的函数名即可。以代码中的 p 按钮为例,当我们使用这个按钮后它在前端显示的代码为:

<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="Paragraph tag" value="p">

这里需要注意的是虽然官方文档上说对于定义的 id 值前端显示的时候会自动加上 qt_content_  但是我设置了几个好像并没有自动加上。

参考文档:https://codex.wordpress.org/Quicktags_API

少羽.
  • 本文由 发表于 2019年1月7日17:20:14
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改区块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用...
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

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