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



Tags: ajax, development, widget, wordpress

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