WordPress 2.8创建Widget完全攻略

六

2009

WordPress 2.8创建Widget完全攻略

发布者: seasun

我在WordPress-o-Sphere网站上看到一些Wordpress2.8创建Widget指南，但是我并认为它们中任何一个真正涉及了实际应用。我想通过使用Wordpress2.8的Widget类来告诉你如何创建一个实际应用的Widget。

这个教程，我会从建立Widget、设置表单，显示在网站一步步来告诉你。结尾附有可供下载的实例。当然，你也通过把它应用到你的主题中去。如果你不想阅读教程，可以直接到教程结尾下载实例。

建立什么样的Widget实例？

这个教程，我们将建立一个极其简单的实例，但是你会从中看到如何给予用户更多的Widget控制权的高级技术。

实例Widget将显示一个人的姓名和性别。控件将允许输入Widget标题（文本框）、用户名称（文本框），可以选择用户的性别（选择框）和是否允许公开显示性别信息（复选框）。

以下是Widget的外观：

我知道，这个优点简单，但你可以把这些工具应用到更复杂的Widget中。

在恰当的时候载入Widget

我门要做的第一件事情是必须在需要的时候载入Widget。Wordpress提供的widgets_init 操作钩子（Action Hook）使我们能够做到这一点。操作钩子（Action Hook）在Wordpress默认Widget注册后被触发。

<?php

/* Add our function to the widgets_init hook. */
add_action( 'widgets_init', 'example_load_widgets' );

/* Function that registers our widget. */
function example_load_widgets() {
	register_widget( 'Example_Widget' );
}

如果你要创建一个以上的Widget，请在example_load_widgets()函数内为每个Widget使用register_widget()函数。

建立我们的Widget

过去，我们建立Widget是一件很费解的事情。在2.8里，我们只要扩展原有的 WP_Widget类。因此，第一步是建立一个新的类（Class）。

class Example_Widget extends WP_Widget {

然后，我门将要添加第一个函数。这个函数将使我们的Widget不同于默认的，且允许我们设置它。

请注意，类名称和函数名称是相同的。例子中均为 Example_Widget。

	function Example_Widget() {
		/* Widget settings. */
		$widget_ops = array(
				'classname' =>
				'example', 'description' =>
				'An example widget that displays a person\'s name and sex.'
			);

		/* Widget control settings. */
		$control_ops = array(
				'width' =>
				300, 'height' =>
				350, 'id_base' =>
				'example-widget'
			);

		/* Create the widget. */
		$this->
		WP_Widget( 'example-widget', 'Example Widget', $widget_ops, $control_ops );
	}

显示Widget

Example_Widget类的下一个函数负责显示Widget。此代码可能使你优点困惑，因为我们并不知道发生了什么（我们还没有添加控制功能）。这这里我们将取得用户设置并根据设置显示。

还有一点也很重要，确保$before_widget，$after_widget，$before_title，$after_title可以用。这些是由主题实现的，我们不应该硬编码。Widget如何显示是由主题负责的。

function widget( $args, $instance ) {
	extract( $args );

	/* User-selected settings. */
	$title = apply_filters('widget_title', $instance['title'] );
	$name = $instance['name'];
	$sex = $instance['sex'];
	$show_sex = isset( $instance['show_sex'] ) ? $instance['show_sex'] : false;

	/* Before widget (defined by themes). */
	echo $before_widget;

	/* Title of widget (before and after defined by themes). */
	if ( $title )
		echo $before_title . $title . $after_title;

	/* Display name from widget settings. */
	if ( $name )
		echo '<p>Hello.  My name is' . $name . '.</p>';

	/* Show sex. */
	if ( $show_sex )
		echo '<p>I am a ' . $sex . '.</p>';

	/* After widget (defined by themes). */
	echo $after_widget;
	}

确保Widget更新并保存

这一步，我们将设置每个Widget并保存。这是一个简单的程序，我们只是更新用户的设置。

如果你在表格中使用的是一个像文本输入的功能，而不让用户使用XHTML，那么你应该使用strip_tags()下面的函数。

function update( $new_instance, $old_instance ) {
	$instance = $old_instance;

	/* Strip tags (if needed) and update the widget settings. */
	$instance['title'] = strip_tags( $new_instance['title'] );
	$instance['name'] = strip_tags( $new_instance['name'] );
	$instance['sex'] = $new_instance['sex'];
	$instance['show_sex'] = $new_instance['show_sex'];

	return $instance;
}

创建Widget设置面版

WordPress2.8新的Widget类能够轻易创建Widget控制面版。get_field_id()和get_field_name() 函数负责大部分肮脏的工作，使我们更专注于像建立Widget这样更重要的事情。请特别注意这个函数的使用，因为它能使得你的更简单地开发。

首先，我们可能想要设置一些默认值。通过建立默认值，我们可以控制在用户没有设置时该显示什么。

function form( $instance ) {

/* Set up some default widget settings. */
$defaults = array( 'title' => 'Example', 'name' => 'John Doe', 'sex' => 'male', 'show_sex' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>

表格的前两部分是文本输入框，Widget标题和用户性别。

<p>
	<label for="<?php echo $this->
	get_field_id( 'title' ); ?>">Title:</label>
	<input id="<?php echo $this->
	get_field_id( 'title' ); ?>" name="<?php echo $this->
	get_field_name( 'title' ); ?>" value="<?php echo $instance['title'];
	?>" style="width:100%;" />
</p>

<p>
	<label for="<?php echo $this->
	get_field_id( 'name' ); ?>">Your Name:</label>
	<input id="<?php echo $this->
	get_field_id( 'name' ); ?>" name="<?php echo $this->
	get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>"
	style="width:100%;" />
	</p>

表单第二步是这一单选框，允许用户选择性别。

<p>
<label for="<?php echo $this->get_field_id( 'sex' ); ?>"
>Sex:</label>
<select id="<?php echo $this->get_field_id( 'sex' ); ?>"
name="<?php echo $this->get_field_name( 'sex' ); ?>"
class="widefat" style="width:100%;">
<option <?php if ( 'male' == $instance['format'] )
echo 'selected="selected"'; ?>>male</option>
<option <?php if ( 'female' == $instance['format'] )
echo 'selected="selected"'; ?>>female</option>
</select>
</p>

表单的最后一项是一个可供用户选择是否显示性别信息的复选框。

<p>
<input class=”checkbox” type=”checkbox”
<?php checked( $instance['show_sex'], true ); ?>
id=”<?php echo $this->get_field_id( ‘show_sex’ ); ?>”
name=”<?php echo $this->get_field_name( ‘show_sex’ ); ?>” />
<label for=”<?php echo $this->get_field_id( ‘show_sex’ ); ?>”>
Display sex publicly?</label>
</p>

唯一还没有完成的是关闭表单函数并完成剩下的Widget代码。