17713433920 info@mac163.com
如何使您的WordPress主题和插件更可用性
如何使您的WordPress主题和插件更可用性

构建一个出色的WordPress主题或插件既要使其易于使用,又要兼顾功能和优化的代码。每次用户激活主题或插件并为找到和进入其设置而苦苦挣扎时,都会在世界上的某个地方遭受小猫的折磨。如果我们结束这一点,那会很好,对吗?

幸运的是,要使您的插件和主题更可用,您需要做的就是利用WordPress的内置功能。“重新发明轮子”不在此所需的技能列表中。让我们看一下一些技术,这些技术可以帮助用户找到自己的出路,并摆脱使用您的插件和主题的挫败感。

管理指针

WordPress 3.3中引入了WordPress管理员指针,它是吸引用户注意力的最激进方式,因此请不要疯狂地使用指针。尽管如此,如果您绝对必须告诉某些人刚刚安装/升级了您的主题或插件的人,WordPress管理员指针是您的最佳选择。

它们非常易于使用,但在WordPress Codex网站上的记录却很少。这是指针工作原理的快速细分,然后是在“设置”菜单旁边添加指针的示例。

    • 主题或插件可以注册新的指针,为每个指针分配一个唯一的ID
    • 指针将显示给用户,直到他们单击“关闭”链接
    • 发生这种情况时,会将指针ID添加到用户的dismissed_wp_pointersmeta键,并且不再显示指针

和示例,如所承诺的:

/**
 * Adds a simple WordPress pointer to Settings menu
 */
 
function thsp_enqueue_pointer_script_style( $hook_suffix ) {
	
	// Assume pointer shouldn't be shown
	$enqueue_pointer_script_style = false;

	// Get array list of dismissed pointers for current user and convert it to array
	$dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );

	// Check if our pointer is not among dismissed ones
	if( !in_array( 'thsp_settings_pointer', $dismissed_pointers ) ) {
		$enqueue_pointer_script_style = true;
		
		// Add footer scripts using callback function
		add_action( 'admin_print_footer_scripts', 'thsp_pointer_print_scripts' );
	}

	// Enqueue pointer CSS and JS files, if needed
	if( $enqueue_pointer_script_style ) {
		wp_enqueue_style( 'wp-pointer' );
		wp_enqueue_script( 'wp-pointer' );
	}
	
}
add_action( 'admin_enqueue_scripts', 'thsp_enqueue_pointer_script_style' );

function thsp_pointer_print_scripts() {

	$pointer_content  = "<h3>Stop looking for it, it is right here!</h3>";
	$pointer_content .= "<p>If you ever activated a plugin, then had no idea where its settings page is, raise your hand.</p>"; ?>
	
	<script type="text/javascript">
	//<![CDATA[
	jQuery(document).ready( function($) {
		$('#menu-settings').pointer({
			content:		'<?php echo $pointer_content; ?>',
			position:		{
								edge:	'left', // arrow direction
								align:	'center' // vertical alignment
							},
			pointerWidth:	350,
			close:			function() {
								$.post( ajaxurl, {
										pointer: 'thsp_settings_pointer', // pointer ID
										action: 'dismiss-wp-pointer'
								});
							}
		}).pointer('open');
	});
	//]]>
	</script>

<?php
} ?>

这将导致如下所示:

wordpress-admin-pointer-example
wordpress-admin-pointer-example

如果您想了解有关WordPress管理员指针的更多信息,这只是一个简单的文章,请参阅这篇  与WordPress的UI集成:管理员指针的文章

管理员注意事项

如果管理员指针是一个在商店前面举着大箭头标志的家伙,那么管理员会注意到那个家伙在偏远的地方分发传单。并没有完全吸引您,但仍然吸引了您的注意。当然,您不想一直显示通知,因此您应该使它们可忽略或将其放在条件函数中。这是一个例子:

管理员注意事项
管理员注意事项
/**
 * Add admin notices
 */
function thsp_admin_notices() {
	global $current_user;
	$userid = $current_user->ID;
	global $pagenow;
	
	// This notice will only be shown in General Settings page
	if ( $pagenow == 'options-general.php' ) {
		echo '<div class="updated">
			<p>This is an "updated" notice.</p>
		</div>';
	}
	
	// Only show this notice if user hasn't already dismissed it
	// Take a good look at "Dismiss" link href attribute
	if ( !get_user_meta( $userid, 'ignore_sample_error_notice' ) ) {
		echo '<div class="error">
			<p>This is an "error" notice. <a href="?dismiss_me=yes">Dismiss</a>.</p>
		</div>';
	}
}
add_action( 'admin_notices', 'thsp_admin_notices' );

此示例中的第一条通知将仅显示在“常规设置”页面中。第二个仅显示给尚未关闭它的用户。如您所见,它将检查当前用户的ignore_sample_error_notice用户元字段,并且仅在该字段为空时才显示。那么,当用户单击“关闭”时,如何添加用户元字段?简单:

/**
 * Add user meta value when Dismiss link is clicked
 */

function thsp_dismiss_admin_notice() {
	global $current_user;
	$userid = $current_user->ID;
	
	// If "Dismiss" link has been clicked, user meta field is added
	if ( isset( $_GET['dismiss_me'] ) && 'yes' == $_GET['dismiss_me'] ) {
		add_user_meta( $userid, 'ignore_sample_error_notice', 'yes', true );
	}
}
add_action( 'admin_init', 'thsp_dismiss_admin_notice' );

我们正在admin_init采取行动,并检查是否dismiss_me已设置GET参数。由于我们的“关闭”链接的href属性是?dismiss_me=yes用户单击后的属性,因此添加了用户元字段,因此,请再见。

上下文帮助

上下文帮助
上下文帮助

想象一下一个世界,在此世界中,仅在需要时,您可以随时获得所需的任何文档。现在,让它实现。

上下文帮助不仅使这成为可能,而且非常容易。让我们为插件注册一个设置页面,以便为它添加一些上下文帮助。

/**
 * Add settings page, under Settings menu
 */
 
function thsp_add_settings_page() {

	global $thsp_settings_page;

	$thsp_settings_page = add_options_page(
		'Our Settings Page',
		'Our Settings Page',
		'manage_options',
		'thsp_settings_page',
		'thsp_show_settings_page'
	);

	// Check if WP version is 3.3 or higher, add contextual help
	global $wp_version;
	if ( version_compare( $wp_version, '3.3') >= 0 ) {
		add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
	}

}
add_action( 'admin_menu', 'thsp_add_settings_page' );

我们不会处理设置页面的回调函数– thsp_show_settings_page,因为它不在本博客文章的讨论范围之内。如果您需要了解WordPress设置页面,Wptuts +的Tom McFarlin可以帮助您。无论如何,我们真正想要深入研究的代码是:

// Check if WP version is 3.3 or higher, add contextual help
global $wp_version;
if ( version_compare( $wp_version, '3.3') >= 0 ) {
	add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
}

需要WordPress 3.3或更高版本,因为我们将使用add_help_tab函数添加上下文帮助选项卡。注意在add_action中使用的钩子如何在其中具有变量– ‘load-‘ . $thsp_settings_page吗?这样可以确保thsp_add_help_tabs仅在我们刚刚注册的设置页面上钩住功能。辉煌。

现在,这是添加帮助选项卡的功能:

/**
 * Callback function for contextual help, requires WP 3.3
 */
 
function thsp_add_help_tabs () {

	global $wp_version;
	if ( version_compare( $wp_version, '3.3') >= 0 ) {
	
		global $thsp_settings_page;

		$screen = get_current_screen();

		
		// Check if current screen is settings page we registered
		// Don't add help tab if it's not
		if ( $screen->id != $thsp_settings_page )
			return;

		// Add help tabs
		$screen->add_help_tab( array(
			'id'	=> 'thsp_first_tab',
			'title'	=> __( 'First tab', 'thsp_contextual_help' ),
			'content'	=> __( '
				<p>Yeah, you can even embed videos, nice!</p>
				<iframe width="560" height="315" src="http://www.youtube.com/embed/RBA-lH2a6E8" frameborder="0" allowfullscreen></iframe>
				', 'thsp_contextual_help'
			),
		) );

		$screen->add_help_tab( array(
			'id'	=> 'thsp_second_tab',
			'title'	=> __( 'Second tab', 'thsp_contextual_help' ),
			'content'	=> __( '
				<p>I\'m just a second tab that no one will ever click.</p>
				', 'thsp_contextual_help'
			),
		) );

		// Set help sidebar
		$screen->set_help_sidebar(
			'
			<ul>
				<li><a href="http://thematosoup.com">' . __( 'Our website', 'ts-fab' ) . '</a></li>
				<li><a href="http://twitter.com/#!/thematosoup">Twitter</a></li>
				<li><a href="http://www.facebook.com/ThematoSoup">Facebook</a></li>
				<li><a href="http://plus.google.com/104360438826479763912">Google+</a></li>
				<li><a href="http://www.linkedin.com/company/thematosoup">LinkedIn</a></li>
			</ul>
			'
		);

	}

}

我们只需要检查WordPress版本是否为3.3或更高版本,请确保我们位于正确的页面上,然后使用add_help_tab函数添加帮助标签,并使用set_help_sidebar添加帮助侧栏。其他所有内容都是纯HTML。

如果上下文帮助有任何缺点,那就是大多数WordPress用户甚至都不知道它(屏幕选项也是如此)。那么,也许是一个指针,以确保他们不会错过它?

WordPress管理员栏链接
WordPress管理员栏链接

这些非常方便,尤其是对于登录用户浏览其网站的前端。它们提供一键式访问最重要的仪表板功能的功能,如果您觉得主题或插件值得在WordPress Admin Bar中占据一席之地,那么这样做很容易:

/**
 * Admin bar customization
 */

function thsp_admin_bar_links() {

	global $wp_admin_bar;
	
	// Adds a new submenu to an existing to level admin bar link
	$wp_admin_bar->add_menu( array(
		'parent'	=> 'new-content',
		'id'		=> 'install_plugin',
		'title'		=> __( 'Plugin', 'thsp_admin_bar' ),
		'href'		=> admin_url( 'plugin-install.php' )
	) );

	// Adds a new top level admin bar link and a submenu to it
	$wp_admin_bar->add_menu( array(
		'parent'	=> false,
		'id'		=> 'custom_top_level',
		'title'		=> __( 'Top Level', 'thsp_admin_bar' ),
		'href'		=> '#'
	) );
	$wp_admin_bar->add_menu( array(
		'parent'	=> 'custom_top_level',
		'id'		=> 'custom_sub_menu',
		'title'		=> __( 'Sub Menu', 'thsp_admin_bar' ),
		'href'		=> '#'
	) );

	// Removes an existing top level admin bar link
	$wp_admin_bar->remove_menu( 'comments' );
	
}
add_action( 'wp_before_admin_bar_render', 'thsp_admin_bar_links' );

我们正在使用wp_before_admin_bar_render动作挂钩在呈现$ wp_admin_bar对象之前对其进行修改。上面的示例向现有的顶级链接(新建)添加了一个子菜单,一个新的顶级链接以及嵌套在其中的另一个链接(顶级,子菜单),并删除了现有的顶级链接(注释)。

插件操作和元链接
插件操作和元链接

仪表板插件屏幕显示所有已安装插件的列表。您可以查看每个插件的名称,描述,版本,作者和插件网站的链接以及操作链接–激活,停用,编辑,删除的组合,具体取决于插件是否被激活。

对于一些插件来说已经足够了。但是,如果您的插件有一个设置页面,我想听听一个很好的理由,不要在其中添加操作链接,尤其是如果它是如此简单:

/**
 * Add action links in Plugins table
 */
 
add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), 'thsp_plugin_action_links' );
function thsp_plugin_action_links( $links ) {

	return array_merge(
		array(
			'settings' => '<a href="' . admin_url( 'tools.php?page=our-settings-page.php' ) . '">' . __( 'Settings', 'ts-fab' ) . '</a>'
		),
		$links
	);

}

您应该将此代码添加到插件的主文件(plugin-name.php)中,以便可以使用适当的钩子。例如,如果您插件的主文件确实是plugin-name.php,则将使用’plugin_action_links_plugin-name’过滤钩,以确保仅为您的插件添加操作链接。那些神奇的WordPress时刻中的另一个。

插件行元链接略有不同。挂钩名称不是动态的,因此您需要将两个参数传递给自定义函数,正在处理现有链接数组和当前插件链接:

/**
 * Add meta links in Plugins table
 */
 
add_filter( 'plugin_row_meta', 'thsp_plugin_meta_links', 10, 2 );
function thsp_plugin_meta_links( $links, $file ) {

	$plugin = plugin_basename(__FILE__);
	
	// create link
	if ( $file == $plugin ) {
		return array_merge(
			$links,
			array( '<a href="http://twitter.com/thematosoup">Follow us on Twitter</a>' )
		);
	}
	return $links;
}

由您决定要显示哪些链接,因此,如果您以前从未处理过插件操作和元链接,请检查已安装插件的列表以了解其他开发人员的工作方式。

结论

某些智能计划,常识和WordPress内置功能可以使您走得很远,但是与生活中的其他一切一样,节制才是关键。太多不必要的管理指针或管理栏链接可能令人沮丧。

您不必成为可用性专家即可制造可用的WordPress产品。

还有其他您想分享的技术吗?


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部