这篇文章主要介绍了基础的WordPress插件制作教程,包括基本的使用ajax提交数据的实现,需要的朋友可以参考下。

插件制作准备工作

首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件，这个是插件的主文件，文件的开始需要一些命名的格式：如下面的代码

1. <!--?php <br ?--> /* 
2. Plugin Name: My Mood 
3. Plugin URI: http://www.aips.me 
4. Description: 一个心情发布插件 
5. Version: 1.0 
6. Author: 周良博客 
7. Author URI: http://www.aips.me 
8. License: GPL 
9. */ 
10. ?> 

Plugin Name 代表了插件的名字。

Plugin URI 代表的是插件的发布地址。

Description 代表的是关于这个插件的描述。

Version 代表了版本好，第一个版本使用1.0，如果你的插件有更新，就依次更改这个版本参数。

Author 代表插件作者的名字。

Author URI 代表作者的主页。。

License 代表了插件的License，如果你是开源的就使用GPL，关于License的参数可以百度或者Google查询，这里不再过多的篇幅叙述。

插件的初始化安装

插件不仅仅是样式的改变，通常我们会加入新的表，那么新加的表我就是通过插件的安装函数来完成的，我们继续在index.php中加入如下的代码：

1. <!--?php <br ?--> //激活动作 
2. register_activation_hook( __FILE__, 'my_mood_install'); 
3.  
4. function my_mood_install() { 
5.  
6. // 启用时要做的事情 
7. global $wpdb; 
8.  
9. $table_name = $wpdb->prefix . "mood"; 
10.  
11. $charset_collate = $wpdb->get_charset_collate(); 
12.  
13. $sql = "CREATE TABLE $table_name ( 
14. id mediumint(9) NOT NULL AUTO_INCREMENT, 
15. createdon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL, 
16. publishedon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL, 
17. status int NOT NULL, 
18. mood int NOT NULL, 
19. text text NOT NULL, 
20. address varchar(55) DEFAULT '' NOT NULL, 
21. UNIQUE KEY id (id) 
22. ) $charset_collate;"; 
23.  
24. require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); 
25. dbDelta( $sql ); 
26. } 
27. ?> 

如上面代码的注释，我们通过register_activation_hook激活动作来完成插件的安装，激活动作通过参数my_mood_install，找到名为my_mood_install的函数执行，这个动作会在插件激活的时候执行。

我们通过my_mood_install函数创建了一张名为”mood”的表，数据库表的创建是通过Wordpress的dbDelta函数来执行sql语句完成的，要想使用此函数需要先引入wp-admin/includes/upgrade.php文件。

通过上面的代码我们就运用Wordpress内置的方法创建了一张给mood插件存储数据的表。

插件卸载

既然Wordpress有安装也一定会有卸载。Wordpress插件的卸载方法是通过一个叫做uninstall.php的固定命名文件来执行的，在插件根目录下建一个名叫uninstall.php的文件，代码内容如下所示：

1. <!--?php <br ?--> //卸载动作 
2. my_mood_uninstall(); 
3.  
4. function my_mood_uninstall() { 
5.  
6. // 执行内容 
7. global $wpdb; 
8. $table_name = $wpdb->prefix . "mood"; 
9. $wpdb->query("DROP TABLE IF EXISTS " . $table_name); 
10. } 
11. ?> 

通过Wordpress的$wpdb->query来执行sql，删除我们安装时的创建的表，这样就删除一切与该插件相关的内容了。

给插件添加后台管理菜单

如下面的代码：

1. <!--?php <br ?--> //添加菜单 
2. add_action( 'admin_menu', 'my_mood_create_menu' ); 
3. function my_mood_create_menu() { 
4. global $my_settings; 
5. $my_mood_settings=add_menu_page( 
6. "My Mood", 
7. "My Mood", 
8. "manage_options", 
9. "my-mood", 
10. "test" 
11. ); 
12. } 
13. ?> 

通过上面的代码我们就可以为插件添加一个菜单。方法通过add_action( ‘admin_menu', ‘my_mood_create_menu' )添加一个菜单而菜单具体的页面则是通过参数来绑定的，如上面的方法是传入了叫做”test”的参数，因此当点击这个”My Mood”的菜单的时候就会去寻找叫做”test”的方法进行样式的输出，我们给出test方法

1. <!--?php <br ?--> function test(){ 
2. global $wpdb; 
3. $table_name = $wpdb->prefix . "mood"; 
4.  
5. $fivesdrafts = $wpdb->get_results( 
6. " 
7. SELECT id, createdon, publishedon,status,mood,text,address 
8. FROM $table_name 
9. ORDER BY createdon DESC 
10. " 
11. ); 
12. ?> 
13. <div id="my-mood">foreach ( $fivesdrafts as $fivesdraft ) 
14. { 
15. ?> } 
16. ?> 
17. <table class="widefat"> 
18. <thead> 
19. <tr> 
20. <th>发布内容</th> 
21. <th>现在所在的</th> 
22. <th>心情</th> 
23. <th>创建日期</th> 
24. <th>操作</th> 
25. </tr> 
26. </thead> 
27. <tfoot> 
28. <tr> 
29. <th>发布内容</th> 
30. <th>现在所在的</th> 
31. <th>心情</th> 
32. <th>创建日期</th> 
33. <th>操作</th> 
34. </tr> 
35. </tfoot> 
36. <tbody> 
37. <tr> 
38. <td><input name="text" type="text" value="" placeholder="输入你的心情" /></td> 
39. <td><input name="address" type="text" value="" placeholder="输入现在所在地" /></td> 
40. <td><label>高兴：<input class="mood" checked="checked" name="mood" type="radio" value="0" /></label> 
41. <label>一般：<input class="mood" name="mood" type="radio" value="1" /></label> 
42. <label>悲伤：<input class="mood" name="mood" type="radio" value="2" /></label> 
43. <label>忧虑：<input class="mood" name="mood" type="radio" value="3" /></label> 
44. <label>其他：<input class="mood" name="mood" type="radio" value="4" /></label></td> 
45. <td></td> 
46. <td><a class="add">添加</a></td> 
47. </tr> 
48. <!--?php <br ?--> 
49. <tr> 
50. <td><input name="text" type="text" value="'<?php" />text; ?>'/></td> 
51. <td><input name="address" type="text" value="'<?php" />address; ?>'/></td> 
52. <td><label>高兴：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==0?'checked=checked':''; ?> value="0"></label> 
53. <label>一般：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood=='1'?'checked=checked':''; ?> value="1"></label> 
54. <label>悲伤：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==2?'checked=checked':''; ?> value="2"></label> 
55. <label>忧虑：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==3?'checked=checked':''; ?> value="3"></label> 
56. <label>其他：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==4?'checked=checked':''; ?> value="4"></label></td> 
57. <td></td> 
58. <td><a class="edit">保存</a><a class="delete">删除</a></td> 
59. </tr> 
60. <!--?php <br ?--></tbody> 
61. </table> 
62. </div> 
63. <!--?php <br ?--> } 
64. ?> 

test方法是php与html代码混编的样式，其中HTMl部分主要负责样式的输出，而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分，通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据，返回的是一个数据集合，包含了多条数据。最后通过foreach循环将数据输出。

我们把数据的界面显示出来了，那么怎样才能将数据保存呢？同样根据上一篇心情插件的例子，先看下面的代码

1. <!--?php <br ?--> function aad_load_scripts($hook) { 
2. global $my_settings; 
3. if( $hook != $my_settings ) 
4. return; 
5. /*载入ajax的js文件,也可以载入其他的javascript和/或css等*/ 
6. wp_enqueue_script('my-ajax', plugins_url( 'my-mood/js/index.js', __FILE ), array('jquery')); 
7.  
8. wp_register_style( 'my-style', plugins_url( 'my-mood/css/style.css', __FILE ), array(), '', 'all' ); 
9. wp_enqueue_style( 'my-style' ); 
10.  
11. /* 
12. 创建验证nonce 
13. 它会输出类似于： 
14. <![CDATA[ 
15. var aad_vars = {"aad_nonce":"5c18514d34"}; 
16. ]]> 
17. 之类的被注释掉的js到HTML。 
18. */ 
19. wp_localize_script('my-js', 'my_vars', array( 
20. 'my_nonce' => wp_create_nonce('aad-nonce') 
21. ) 
22. ); 
23. } 
24. add_action('admin_enqueue_scripts', 'aad_load_scripts'); 
25. ?> 

其中index.js的代码如下

1. jQuery(document).ready(function(){ 
2. jQuery("input").blur(function(){ 
3. var value=jQuery(this).val(); 
4. jQuery.ajax({ 
5. type:"POST", 
6. url:"/wp-admin/admin-ajax.php", 
7. dataType: 'json', 
8. data:{action:"say",value:value}, 
9. success:function(data){ 
10. } 
11. }); 
12. }) 
13.  
14. jQuery(".add").click(function(){ 
15. var parent=jQuery(this).closest("tr"); 
16.  
17. var text=jQuery(parent).find("input[name='text']").val(); 
18. var address=jQuery(parent).find("input[name='address']").val(); 
19. var mood=jQuery(parent).find("input[type='radio']:checked").val(); 
20. jQuery.ajax({ 
21. type:"POST", 
22. url:"/wp-admin/admin-ajax.php", 
23. dataType: 'json', 
24. data:{action:"add_mood",text:text,address:address,mood:mood}, 
25. success:function(data){ 
26. window.location.href=window.location; 
27. } 
28. }); 
29. }) 
30.  
31. jQuery(".delete").click(function(){ 
32. var parent=jQuery(this).closest("tr"); 
33.  
34. var id=jQuery(parent).attr('data'); 
35. jQuery.ajax({ 
36. type:"POST", 
37. url:"/wp-admin/admin-ajax.php", 
38. dataType: 'json', 
39. data:{action:"delete_mood",id:id}, 
40. success:function(data){ 
41. window.location.href=window.location; 
42. } 
43. }); 
44. }) 
45.  
46. jQuery(".edit").click(function(){ 
47. var parent=jQuery(this).closest("tr"); 
48.  
49. var id=jQuery(parent).attr('data'); 
50. var text=jQuery(parent).find("input[name='text']").val(); 
51. var address=jQuery(parent).find("input[name='address']").val(); 
52. var mood=jQuery(parent).find("input[type='radio']:checked").val(); 
53. jQuery.ajax({ 
54. type:"POST", 
55. url:"/wp-admin/admin-ajax.php", 
56. dataType: 'json', 
57. data:{action:"edit_mood",id:id,text:text,address:address,mood:mood}, 
58. success:function(data){ 
59. window.location.href=window.location; 
60. } 
61. }); 
62. }) 
63.  
64. }); 

在上面的代码中我们通过Hook插入我们需要js代码和css代码，这样我们插件的js和css就会因为插件的启用而插入到页面代码中。

我们实现异步加载数据，要根据下面的代码：

1. <!--?php <br ?--> function say(){ 
2. $return=array(); 
3. $return['success'] = '1'; 
4. $return['msg']=$_POST['value']."test-ajax"; 
5. echo json_encode($return); 
6. die(); 
7. } 
8. add_action('wp_ajax_say', 'say'); 
9. ?> 

这段代码的意思是要使用ajax提交数据，add_action(‘wp_ajax_函数名'，函数名)的格式就是注册一个say路由，它对应的js代码是

1. jQuery("input").blur(function(){ 
2. var value=jQuery(this).val(); 
3. jQuery.ajax({ 
4. type:"POST", 
5. url:"/wp-admin/admin-ajax.php", 
6. dataType: 'json', 
7. data:{action:"say",value:value}, 
8. success:function(data){ 
9. } 
10. }); 
11. }) 

因此可以看到js代码的action为say

同样的道理数据要进行添加，注册一个add_mood的路由

1. <!--?php <br ?--> function add_mood(){ 
2.  
3. $text=$_POST['text']; 
4. $address=$_POST['address']; 
5. $mood=$_POST['mood']; 
6. add($text,$address,$mood); 
7.  
8. $return=array(); 
9. $return['success'] = '1'; 
10. echo json_encode($return); 
11. die(); 
12. } 
13. add_action('wp_ajax_add_mood', 'add_mood'); 
14. ?> 

数据要进行删除，注册一个delete_mood的路由

1. <!--?php <br ?--> function delete_mood(){ 
2.  
3. $id=$_POST['id']; 
4. delete($id); 
5.  
6. $return=array(); 
7. $return['success'] = '1'; 
8. echo json_encode($return); 
9. die(); 
10. } 
11. add_action('wp_ajax_delete_mood', 'delete_mood'); 
12. ?> 

数据要进行编辑，注册一个edit_mood的路由

1. <!--?php <br ?--> function edit_mood(){ 
2.  
3. $id=$_POST['id']; 
4. $text=$_POST['text']; 
5. $address=$_POST['address']; 
6. $mood=$_POST['mood']; 
7. edit($id,$text,$address,$mood); 
8.  
9. $return=array(); 
10. $return['success'] = '1'; 
11. echo json_encode($return); 
12. die(); 
13. } 
14. add_action('wp_ajax_edit_mood', 'edit_mood'); 
15. ?> 

对应上面增删改的php函数如下所示

1. <!--?php <br ?--> function add($text,$address,$mood){ 
2. global $wpdb; 
3.  
4. $table_name = $wpdb->prefix . "mood"; 
5. $wpdb->insert( 
6. $table_name, 
7. array( 
8. 'createdon' => current_time( 'mysql' ), 
9. 'publishedon' => current_time( 'mysql' ), 
10. 'status' => 1, 
11. 'mood' => $mood, 
12. 'text'=>$text, 
13. 'address'=>$address, 
14. ) 
15. ); 
16. } 
17. ?> 
18.  
19. <!--?php <br ?--> function delete($id){ 
20. global $wpdb; 
21.  
22. $table_name = $wpdb->prefix . "mood"; 
23. $wpdb->delete( 
24. $table_name, 
25. array( 
26. 'id'=>$id 
27. ) 
28. ); 
29. } 
30. ?> 
31.  
32. <!--?php <br ?--> function edit($id,$text,$address,$mood){ 
33. global $wpdb; 
34.  
35. $table_name = $wpdb->prefix . "mood"; 
36. $wpdb->update( 
37. $table_name, 
38. array( 
39. 'mood' => $mood, 
40. 'text'=>$text, 
41. 'address'=>$address, 
42. ), 
43. array( 
44. 'id' => $id 
45. ) 
46. ); 
47. } 
48. ?> 

现在插件的后台数据和界面都已经处理完了，那么怎样把我们的心情插件在前台引用呢？我们需要添加下面的代码

1. <!--?php <br ?--> function mood_dispaly(){ 
2. global $wpdb; 
3. $table_name = $wpdb->prefix . "mood"; 
4.  
5. $fivesdrafts = $wpdb->get_results( 
6. " 
7. SELECT text 
8. FROM $table_name 
9. ORDER BY createdon DESC 
10. LIMIT 10 
11. " 
12. ); 
13.  
14. ?> 
15.  
16. <!--?php <br ?--> } 
17. ?> 

这段代码就把数据库中存储的心情数据通过HTML显示在前台，那么样子哪里控制的呢？还记得第一步我们添加的js和css吗，是的，样式就是通过第一步插入的样式来控制的。

到此一个完整的心情插件就完成了，照着例子你就可以制作一个属于自己的心情插件了。

Tags: WordPress插件制作教程

分享到：