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示例

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

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;
}

7条留言

  1. 不知道这个是否可以出现在访问页面的任意地方,类似现在很流行的一种效果,就是当你访问某个网站的时候,他会出现一个半透明的叠加层,上面有很多箭头指示以及一些说明,只有点击知道了以后才能使用网站。能起到对初次来网站的客户提示的左右,不知您知道wordpress下有没有办法实现呢?

    1. 这个更多的是js相关的,只要js能实现,就可以集成到WordPress里,你说的效果是不是类似这样的http://particlebits.com/code/jquery-tutorial/,进去以后点start demo,就会出现提示框,指示用户一步步的操作,蛮像玩游戏之前的教程的

      1. 对的,类似这样,但是比这个好一些,就是还有一个聚光灯效果,会把整个页面变暗,只在指示的地方显示高亮。

        1. 这效果我只在手机或平板应用里见过,网页版的还没见过,有例子没,给我一个瞧瞧

          1. 其实,你说的这个跟我给你那个例子一样的。
            http://particlebits.com/code/jquery-tutorial/

            仔细看一下这个例子,它有聚光灯效果,只不过例子中设置的overlay背景色是白色,所以看不出来,如果改成黑色,就是你要的效果了。
            我没研究过discuz,不过这些就是js和css的问题,根据脚本的使用方法来就行。个人感觉,那个脚本很适合你的想法

      2. 博主能写一个这个教学就太好了!非常感谢!

评论功能已关闭