wordpress创建widget

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

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

建立什么样的Widget实例？

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

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

以下是Widget的外观：

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

在恰当的时候载入Widget

我门要做的第一件事情是必须在需要的时候载入Widget。Wordpress提供的widgets_init操作钩子（Action Hook）使我们能够做到这一点。操作钩子（Action Hook）在Wordpress默认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_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设置面版

WordPress 2.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代码。

<?php
}
}
?>

创建属于你自己的Widget

如果你在WordPress 2.8以前曾经和企图创建一个Widget，那么你可以看看现在是多么的简单。为了帮助人们学习新的系统，我已经把这一教程的代码放到一起，并在里面详细注释了代码的功能。