插件制作准备工作
首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件，这个是插件的主文件，文件的开始需要一些命名的格式：如下面的代码
|
1
|
|
2
3
4
5
6
7
8
9
10
|
<!--?php <br ?--> /*Plugin Name: My MoodPlugin URI: http://www.aips.meDescription: 一个心情发布插件Version: 1.0Author: 周良博客Author URI: http://www.aips.meLicense: GPL*/?> |
- Plugin Name 代表了插件的名字。
- Plugin URI 代表的是插件的发布地址。
- Description 代表的是关于这个插件的描述。
- Version 代表了版本好，第一个版本使用1.0，如果你的插件有更新，就依次更改这个版本参数。
- Author 代表插件作者的名字。
- Author URI 代表作者的主页。。
- License 代表了插件的License，如果你是开源的就使用GPL，关于License的参数可以百度或者Google查询，这里不再过多的篇幅叙述。
插件的初始化安装
插件不仅仅是样式的改变，通常我们会加入新的表，那么新加的表我就是通过插件的安装函数来完成的，我们继续在index.php中加入如下的代码：
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!--?php <br ?--> //激活动作register_activation_hook( __FILE__, 'my_mood_install');function my_mood_install() {// 启用时要做的事情global $wpdb;$table_name = $wpdb->prefix . "mood";$charset_collate = $wpdb->get_charset_collate();$sql = "CREATE TABLE $table_name (id mediumint(9) NOT NULL AUTO_INCREMENT,createdon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,publishedon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,status int NOT NULL,mood int NOT NULL,text text NOT NULL,address varchar(55) DEFAULT '' NOT NULL,UNIQUE KEY id (id)) $charset_collate;";require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );dbDelta( $sql );}?> |
如上面代码的注释，我们通过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
|
|
2
3
4
5
6
7
8
9
10
11
|
<!--?php <br ?--> //卸载动作my_mood_uninstall();function my_mood_uninstall() {// 执行内容global $wpdb;$table_name = $wpdb->prefix . "mood";$wpdb->query("DROP TABLE IF EXISTS " . $table_name);}?> |
通过Wordpress的$wpdb->query来执行sql，删除我们安装时的创建的表，这样就删除一切与该插件相关的内容了。
给插件添加后台管理菜单
如下面的代码：
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--?php <br ?--> //添加菜单add_action( 'admin_menu', 'my_mood_create_menu' );function my_mood_create_menu() {global $my_settings;$my_mood_settings=add_menu_page("My Mood","My Mood","manage_options","my-mood","test");}?> |
通过上面的代码我们就可以为插件添加一个菜单。方法通过add_action( ‘admin_menu', ‘my_mood_create_menu' )添加一个菜单而菜单具体的页面则是通过参数来绑定的，如上面的方法是传入了叫做”test”的参数，因此当点击这个”My Mood”的菜单的时候就会去寻找叫做”test”的方法进行样式的输出，我们给出test方法
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!--?php <br ?--> function test(){global $wpdb;$table_name = $wpdb->prefix . "mood";$fivesdrafts = $wpdb->get_results("SELECT id, createdon, publishedon,status,mood,text,addressFROM $table_nameORDER BY createdon DESC");?><div id="my-mood">foreach ( $fivesdrafts as $fivesdraft ){?> }?><table class="widefat"><thead><tr><th>发布内容</th><th>现在所在的</th><th>心情</th><th>创建日期</th><th>操作</th></tr></thead><tfoot><tr><th>发布内容</th><th>现在所在的</th><th>心情</th><th>创建日期</th><th>操作</th></tr></tfoot><tbody><tr><td><input name="text" type="text" value="" placeholder="输入你的心情" /></td><td><input name="address" type="text" value="" placeholder="输入现在所在地" /></td><td><label>高兴：<input class="mood" checked="checked" name="mood" type="radio" value="0" /></label><label>一般：<input class="mood" name="mood" type="radio" value="1" /></label><label>悲伤：<input class="mood" name="mood" type="radio" value="2" /></label><label>忧虑：<input class="mood" name="mood" type="radio" value="3" /></label><label>其他：<input class="mood" name="mood" type="radio" value="4" /></label></td><td></td><td><a class="add">添加</a></td></tr><!--?php <br ?--><tr><td><input name="text" type="text" value="'<?php" />text; ?>'/></td><td><input name="address" type="text" value="'<?php" />address; ?>'/></td><td><label>高兴：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==0?'checked=checked':''; ?> value="0"></label><label>一般：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood=='1'?'checked=checked':''; ?> value="1"></label><label>悲伤：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==2?'checked=checked':''; ?> value="2"></label><label>忧虑：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==3?'checked=checked':''; ?> value="3"></label><label>其他：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==4?'checked=checked':''; ?> value="4"></label></td><td></td><td><a class="edit">保存</a><a class="delete">删除</a></td></tr><!--?php <br ?--></tbody></table></div><!--?php <br ?--> }?> |
test方法是php与html代码混编的样式，其中HTMl部分主要负责样式的输出，而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分，通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据，返回的是一个数据集合，包含了多条数据。最后通过foreach循环将数据输出。
我们把数据的界面显示出来了，那么怎样才能将数据保存呢？同样根据上一篇心情插件的例子，先看下面的代码
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!--?php <br ?--> function aad_load_scripts($hook) {global $my_settings;if( $hook != $my_settings )return;/*载入ajax的js文件,也可以载入其他的javascript和/或css等*/wp_enqueue_script('my-ajax', plugins_url( 'my-mood/js/index.js', __FILE ), array('jquery'));wp_register_style( 'my-style', plugins_url( 'my-mood/css/style.css', __FILE ), array(), '', 'all' );wp_enqueue_style( 'my-style' );/*创建验证nonce它会输出类似于：<![CDATA[var aad_vars = {"aad_nonce":"5c18514d34"};]]>之类的被注释掉的js到HTML。*/wp_localize_script('my-js', 'my_vars', array('my_nonce' => wp_create_nonce('aad-nonce')));}add_action('admin_enqueue_scripts', 'aad_load_scripts');?> |
其中index.js的代码如下
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
jQuery(document).ready(function(){jQuery("input").blur(function(){var value=jQuery(this).val();jQuery.ajax({type:"POST",url:"/wp-admin/admin-ajax.php",dataType: 'json',data:{action:"say",value:value},success:function(data){}});})jQuery(".add").click(function(){var parent=jQuery(this).closest("tr");var text=jQuery(parent).find("input[name='text']").val();var address=jQuery(parent).find("input[name='address']").val();var mood=jQuery(parent).find("input[type='radio']:checked").val();jQuery.ajax({type:"POST",url:"/wp-admin/admin-ajax.php",dataType: 'json',data:{action:"add_mood",text:text,address:address,mood:mood},success:function(data){window.location.href=window.location;}});})jQuery(".delete").click(function(){var parent=jQuery(this).closest("tr");var id=jQuery(parent).attr('data');jQuery.ajax({type:"POST",url:"/wp-admin/admin-ajax.php",dataType: 'json',data:{action:"delete_mood",id:id},success:function(data){window.location.href=window.location;}});})jQuery(".edit").click(function(){var parent=jQuery(this).closest("tr");var id=jQuery(parent).attr('data');var text=jQuery(parent).find("input[name='text']").val();var address=jQuery(parent).find("input[name='address']").val();var mood=jQuery(parent).find("input[type='radio']:checked").val();jQuery.ajax({type:"POST",url:"/wp-admin/admin-ajax.php",dataType: 'json',data:{action:"edit_mood",id:id,text:text,address:address,mood:mood},success:function(data){window.location.href=window.location;}});})}); |
在上面的代码中我们通过Hook插入我们需要js代码和css代码，这样我们插件的js和css就会因为插件的启用而插入到页面代码中。
我们实现异步加载数据，要根据下面的代码：
|
1
|
|
2
3
4
5
6
7
8
9
|
<!--?php <br ?--> function say(){$return=array();$return['success'] = '1';$return['msg']=$_POST['value']."test-ajax";echo json_encode($return);die();}add_action('wp_ajax_say', 'say');?> |
这段代码的意思是要使用ajax提交数据，add_action(‘wp_ajax_函数名'，函数名)的格式就是注册一个say路由，它对应的js代码是
|
1
|
|
2
3
4
5
6
7
8
9
10
11
|
jQuery("input").blur(function(){var value=jQuery(this).val();jQuery.ajax({type:"POST",url:"/wp-admin/admin-ajax.php",dataType: 'json',data:{action:"say",value:value},success:function(data){}});}) |
因此可以看到js代码的action为say
同样的道理数据要进行添加，注册一个add_mood的路由
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!--?php <br ?--> function add_mood(){$text=$_POST['text'];$address=$_POST['address'];$mood=$_POST['mood'];add($text,$address,$mood);$return=array();$return['success'] = '1';echo json_encode($return);die();}add_action('wp_ajax_add_mood', 'add_mood');?> |
数据要进行删除，注册一个delete_mood的路由
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
|
<!--?php <br ?--> function delete_mood(){$id=$_POST['id'];delete($id);$return=array();$return['success'] = '1';echo json_encode($return);die();}add_action('wp_ajax_delete_mood', 'delete_mood');?> |
数据要进行编辑，注册一个edit_mood的路由
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!--?php <br ?--> function edit_mood(){$id=$_POST['id'];$text=$_POST['text'];$address=$_POST['address'];$mood=$_POST['mood'];edit($id,$text,$address,$mood);$return=array();$return['success'] = '1';echo json_encode($return);die();}add_action('wp_ajax_edit_mood', 'edit_mood');?> |
对应上面增删改的php函数如下所示
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!--?php <br ?--> function add($text,$address,$mood){global $wpdb;$table_name = $wpdb->prefix . "mood";$wpdb->insert($table_name,array('createdon' => current_time( 'mysql' ),'publishedon' => current_time( 'mysql' ),'status' => 1,'mood' => $mood,'text'=>$text,'address'=>$address,));}?><!--?php <br ?--> function delete($id){global $wpdb;$table_name = $wpdb->prefix . "mood";$wpdb->delete($table_name,array('id'=>$id));}?><!--?php <br ?--> function edit($id,$text,$address,$mood){global $wpdb;$table_name = $wpdb->prefix . "mood";$wpdb->update($table_name,array('mood' => $mood,'text'=>$text,'address'=>$address,),array('id' => $id));}?> |
现在插件的后台数据和界面都已经处理完了，那么怎样把我们的心情插件在前台引用呢？我们需要添加下面的代码
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--?php <br ?--> function mood_dispaly(){global $wpdb;$table_name = $wpdb->prefix . "mood";$fivesdrafts = $wpdb->get_results("SELECT textFROM $table_nameORDER BY createdon DESCLIMIT 10");?><!--?php <br ?--> }?> |
这段代码就把数据库中存储的心情数据通过HTML显示在前台，那么样子哪里控制的呢？还记得第一步我们添加的js和css吗，是的，样式就是通过第一步插入的样式来控制的。
到此一个完整的心情插件就完成了，照着例子你就可以制作一个属于自己的心情插件了。
