WordPress Ajax Widget开发

本篇文章是紧接上一篇WordPress 2.8+ Widget 插件开发.
自己开发得一个小工具 WP Dict需要调用服务器端方法查询单词,但是个人觉得页面跳转的用户体验不好,所以小研究了一把ajax的实现方法而且试验成功,特此记录。

注册服务端方法


function wp_dict_request_handler() {
}
add_action('init', 'wp_dict_request_handler');

比想象的更加简单,Wordpress可以通过add_action注册自己的服务器端方法,所有页面均可调用。唯一需要注意的是方法名需要保证唯一。

注册jquery

在Widget类的构造方法中添加如下语句。

// Load jQuery
wp_enqueue_script('jquery');

获得Widget ID

在widget()方法extract方法后天添加如下语句。

function widget( $args, $instance ) {
extract( $args );
// Get the div id of the widget
$widgetid = $args['widget_id'];
。。。
}

Ajax实现

在Widget的显示内容部分($after_title,$after_widget之间)添加ajax调用代码。

echo $after_title;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#wp_dict_submit").click(function(){
$.ajax({
type : "GET",
url : "index.php",
data : { mywidget_request : "wp_dict_request_handler",
query : $("#wp_dict_query").val() },
success : function(response) {
// The server has finished executing PHP and has returned something,
// so display it!
$("#wp_dict_result").html(response);
}
});
});
});
</script>
<?php

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

基本就是jQuery调用ajax的典型用法。不过这里有几点针对wordpress的说明

  • url参数其实可以是任意有效的php路径。
  • mywidget_request配置的就是之前注册的方法名。
  • mywidget_request之后的都是自定义的参数,这里我需要一个query的单词名。

最后

按照普通Widget的要求,把widget添加之后,就可以在页面看到并使用了。相当方便。

遗留问题

WP Super Cache会把页面内容转化成静态HTML,所以Ajax会破坏这个机制。参考资料中另外一篇文章,不过还没有时间学习。

参考资料

AJAX-ifying WordPress Widgets
Make Any Plugin Work with WP Super Cache

 

WordPress 2.8+ Widget 插件开发

WordPress 2.8.0之后的版本对Widget提供了一套详细的API规范。貌似和水煮鱼团队的范例有很大区别。

加载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' );
}

Wordpress 2.8以上的版本中,widgets_init事件会在wordpress注册默认widgets之后被触发。Example_Widget是具体实现widget的类名。

配置你的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的一些基本信息,例如标识符,描述,以及大小等信息。

显示你的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;
}

Wordpress 2.8以上的版本中,规定了function widget( $args, $instance )这个接口。这个接口专门用来实现widget的显示内容的。其中extract( $args );是标准用法,只需要添加就可以了。除此之外Wordpress还提供了四个标准变量用来区分显示的阶段:$before_widget, $after_widget, $before_title, and $after_title。最后$instance是用来获取Widget本身实例属性的。Widget实例属性的操作会在后面提到。

Widget配置页面

在Widgets页面中添加了某个Widget之后可以配置该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 ); ?>
<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>

</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>
<?php
}
?>

Wordpress提供了标准接口function form( $instance ) 用来显示该配置页面的内容。方法中主要包含两个部分。

  • 第一部分配置了所有实例属性的默认值。
  • 第二个部分是配置页面的显示内容。

更新Widget实例属性


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

Wordpress提供了标准接口function update( $new_instance, $old_instance )用来处理实例属性的更新。更新的内容直接设置在$instance中就可以了。不需要直接操作数据库。

总结

这就是所有开发正常widget所需要了解的内容了。快动手吧。

参考资料

http://codex.wordpress.org/Widgets_API
The complete guide to creating widgets in WordPress 2.8

 

WordPress插件开发入门心得

WordPress用了一段时间,有了一些自己的需求。于是硬着头皮就自己做起了插件。眼见0.1.0总算要release了。把这一周的新的体会记录下来。当作是总结。

插件入门

强烈推荐水煮鱼团队的系列文章(见下面的参考),第一篇非常清楚的描述了Wordpress 插件入门的步骤。其实就是一个附带规定格式备注的php。还能更容易么?

/*
Plugin Name: XXXXXX
Plugin URI: XXXXXXXX
Description: XXXXXXXXXXXXXXXXX
Version: XXXXXXXX
Author: XXXXXXXX
Author URI: XXXXXXXX
*/

把上面的信息保存到php文件中,把php文件放到wp-content/plugins//下。你的插件就可以在Plugins列表中看到了。说实话,这一步超酷的,这也是吸引我做下去的关键一步。

Action and Filter

WordPress提供了丰富的API供开发者调用。其中核心的概念就是Action和Filter。
Action指的就是事件,发布博客,进入Admin页面,激活插件,这些都是action。Wordpress可以让开发者将这些action与自己实现的方法关联起来,从而在事件激发的时候能够完成自己的功能。
Filter指的就是过滤器。Wordpress可以让开发者通过注册filter的方式修改Wordpress地默认表现。例如自定义短链接,格式化标题等等。
参考资料中包含了Action和Filter的具体列表。

后台选项页

没想到如此的简单,三步就能完成。
一,注册Action,用户进入Admin页面的时候需要调用的方法。

add_action('admin_menu', 'plugin_name_options_admin');

二,用户进入Admin页面的时候需要具体显示的文字,注册打开选项页时调用的方法。

//Set option page for the plugin
function plugin_name_options_admin(){
add_options_page('wp_douban_post', __('XXXXXXXX, 'xxxxxxxxxxxxxx'), 5,
__FILE__, 'plugin_name_options');
}

三,实现打开选项页时调用的方法。

function wp_douban_post_options()
{
//页面提交需要实现的功能

if($_POST['update_doubanshow_option'])
{
$wp_doubanshow_option_saved = get_option("wp_doubanshow_option");
$wp_doubanshow_option = array (
"userid" => $_POST['userid'],
"apikey" => $_POST['apikey'],
"profile" => $_POST['profile'],
"collection" => $_POST['collection'],
"recommendations" => $_POST['recommendations'],
"powerby" => $_POST['powerby']
);
if ($wp_doubanshow_option_saved != $wp_doubanshow_option)
{
if(!update_option("wp_doubanshow_option",$wp_doubanshow_option))
{
$message = __('Update Failed', 'wp-doubanshow');
}
}
update_doubanshow();

echo $message ;
}
//这部分是显示的html
<div class=wrap>
<form method="post" action="">
<h2><?php _e('DoubanShow Options', 'wp-doubanshow'); ?></h2>
<fieldset name="wp_basic_options" class="options">
<table>
<tr>
<td valign="top" align="right"><?php _e('Douban ID:', 'wp-doubanshow'); ?></td>
<td><input type="text" name="userid" value="<?php echo $userID; ?>" /> <?php _e('Enter your Douban ID.', 'wp-doubanshow'); ?></td>
</tr>
</table>
</fieldset>
<p class="submit"><input type="submit" name="update_doubanshow_option" value="Update Options »" /></p>
</form>
</div>
}

比我想想的容易很多。轻松过了这关。

参数数据库保存

WordPress提供了get_option()和 c()两个方法,可以方便的保存选项页中的参数。

get_option


<?php echo get_option( $show, $default ); ?>
$show
(string) (required) Name of the option to retrieve. A list of valid default options can be found at the Option Reference.
$default
(mixed) (optional) The default value to return if no value is returned (ie. the option is not in the database).

update_option


<?php update_option( $option_name, $newvalue ); ?>
option_name
(string) (required) Name of the option to update. A list of valid default options to update can be found at the Option Reference.
newvalue
(mixed) (required) The NEW value for this option name. This value can be a string, an array, an object or a serialized value.

需要注意的是所有插件的option都保存在一张表,所以为了避免冲突,option名字需要格外当心。

后台定时任务

WordPress提供了简单机制使得插件可以完成定时更新之类的功能。示例如下。

//自定义Action,并注册相关function
add_action('my_event', 'my_function');

//定义Action的出发频率
if (!wp_next_scheduled('my_event')) {
wp_schedule_event( time(), 'hourly', 'my_event' );
}

//当插件被停止时候,移除相关Function
function update_deactivation(){
wp_clear_scheduled_hook('my_event');
}

register_deactivation_hook(basename(__FILE__),' update_deactivation');

总结

总之就是动手做,其乐无穷啊~~~~~~~~~

参考资料

WordPress Plugin API
Write a Plugin
Plugin API/Action Reference
Plugin API/Filter Reference
自己动手写 WordPress 插件
用 Eclipse PDT 开发一个 WordPress 插件

 

无觅相关文章插件,快速提升流量