如何使用WP Pointers在WordPress后台显示提示信息

WordPress Pointers是WordPress 3.3引入的新特性，顾名思义，这是一种tooltip，带有箭头，可以实现指向一个位置，显示一些提示信息的效果，这种效果在微博等应用中很常见。WordPress后台对新手而言不是一般的难以理解，有了这种带箭头的提示框，就可以更好的引导用户学习使用某些功能。

加载WP Pointers脚本

WP Pointers是基于jquery的脚本，只需要加载js代码和样式表即可，因此要使用WP Pointers，只需要

wp_enqueue_style( 'wp-pointer' );
wp_enqueue_script( 'wp-pointer' );

WP Pointers示例

下面的代码可以实现如图所示的效果

代码放在functions.php中，即可看到效果，点击dismiss后提示框将不再显示。

add_action( 'admin_enqueue_scripts', 'my_admin_enqueue_scripts' );
function my_admin_enqueue_scripts() {
	// Using Pointers
	wp_enqueue_style( 'wp-pointer' );
	wp_enqueue_script( 'wp-pointer' );
		
	// Register our action
	add_action( 'admin_print_footer_scripts', 'my_admin_print_footer_scripts' );
}

function my_admin_print_footer_scripts() {
	$dismissed = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
	if ( ! in_array( 'my_pointer', $dismissed ) ) :
		$pointer_content = '<h3>小工具：近期评论</h3>';
		$pointer_content .= '<p>这个“近期评论”小工会具显示您网站的最新评论，点击右侧的配置按钮可以设置显示条数</p>';
		?>
		<script type="text/javascript">
		//<![CDATA[
		jQuery(document).ready( function($) {
			$('#dashboard_recent_comments').pointer({
				content: '<?php echo $pointer_content; ?>',
				position: 'bottom',
				pointerWidth: 320,
				close  : function() {
					jQuery.post( '<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php', {
						pointer: 'my_pointer',
						action: 'dismiss-wp-pointer'
					});
				}
			}).pointer('open');
		});
		//]]>
		</script>
		<?php
	endif;
}