WP笔记

为WordPress评论表单添加QuickTag

WordPress后台编辑器的HTML模式具有QuickTag的功能，Quicktag方便我们输入一些HTML标签，例如加粗、列表、链接地址或者图片等，这些标签在前台的评论编辑器中同样支持，只是需要自己手动输入。

评论表单通常如是说

您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

说起来容易但真正有几个人喜欢手动输入标签呢?如果像后台这样就好了。

quicktag

关于QuickTag

Quicktag是一段js代码，可以应用到任何textarea元素上，quicktag的源代码位于wp-includes/js/quicktag.js中，这个是发行版，未压缩的版本是quicktag.dev.js，如果打开这个文件，可以看到开头有一段说明，介绍了如何为任何textarea应用quicktag。

1. 运行quicktags(settings)初始化。

2. 设置settings值，形式如下

settings = {
	id : 'my_id', //textarea的HTML ID 
	buttons: '' //quicktag按钮名称，用逗号分隔
}

默认的按钮列表有：“strong,em,link,block,del,ins,img,ul,ol,li,code,more,spell,close”

如果想添加一个自定义按钮，quicktag也提供了一个API叫做QTags.addButton，形式如下

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

id – 按钮的HTML ID

display – 按钮的值

arg1 – 可以是起始标签例如<span>，或者是当按钮被点击时的回调函数

arg2 – 可选的结束标签例如</span>

access_key – 可选，按钮的access key

title – 按钮的title属性

priority – 可选，整数，设置按钮在工具栏中的位置， 1 – 9=第一个， 11-19 = 第二个，21-29=第三个，以此类推

instance – 可选，将按钮限制在某个quicktag的实例中。

为comment表单添加quicktag

最简单的方法

安装插件Basic Comment Quicktags，如果想修改按钮，打开插件下的quicktag.js文件，修改一下即可。次插件不仅支持WordPress的评论表单，也支持bbpress。

安装到主题

如果想和主题整合到一起，就玩弄一下代码好了。在主题目录下建立一个文件叫quicktags.js，写如下内容

quicktags({
	id: "comment",//评论输入框的ID
	buttons: "strong,link,img,ul,ol,li,code,close"
});

然后在主题的functions.php中写如下代码

function my_print_script() {	
	if( comments_open() && is_singular() ) {
		wp_enqueue_script("my_quicktags", get_bloginfo('template_directory') . "/quicktags.js", array("quicktags","jquery"), "1.0", 1,true);
		wp_print_styles('editor-buttons');
	}
}
add_action('wp_enqueue_scripts', 'my_print_script');

这样评论表单上面就会出现quicktags，效果如下

comment_quicktags

PS. wp_print_styles是backpress的一个API，在wp-includes/functions.wp-style.php中，用于打印已存在与队列中的脚本，定义如下

<?php
/**
 * BackPress styles procedural API.
 *
 * @package BackPress
 * @since r79
 */

/**
 * Display styles that are in the queue or part of $handles.
 *
 * @since r79
 * @uses do_action() Calls 'wp_print_styles' hook.
 * @global object $wp_styles The WP_Styles object for printing styles.
 *
 * @param array|bool $handles Styles to be printed. An empty array prints the queue,
 *  an array with one string prints that style, and an array of strings prints those styles.
 * @return bool True on success, false on failure.
 */
function wp_print_styles( $handles = false ) {
	if ( '' === $handles ) // for wp_head
		$handles = false;

	if ( ! $handles )
		do_action( 'wp_print_styles' );

	global $wp_styles;
	if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
		if ( ! did_action( 'init' ) )
			_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripts and styles should not be registered or enqueued until the %1$s, %2$s, or %3$s hooks.' ),
				'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );

		if ( !$handles )
			return array(); // No need to instantiate if nothing is there.
		else
			$wp_styles = new WP_Styles();
	}

	return $wp_styles->do_items( $handles );
}