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

在开始之前我们需要知道 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