基础的WordPress插件制作教程
插件制作准备工作
首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件，这个是插件的主文件，文件的开始需要一些命名的格式：如下面的代码
<!--?php<br?-->/* PluginName:MyMood PluginURI:http://www.aips.me Description:一个心情发布插件 Version:1.0 Author:周良博客 AuthorURI:http://www.aips.me License:GPL */ ?>
- PluginName代表了插件的名字。
- PluginURI代表的是插件的发布地址。
- Description代表的是关于这个插件的描述。
- Version代表了版本好，第一个版本使用1.0，如果你的插件有更新，就依次更改这个版本参数。
- Author代表插件作者的名字。
- AuthorURI代表作者的主页。。
- License代表了插件的License，如果你是开源的就使用GPL，关于License的参数可以百度或者Google查询，这里不再过多的篇幅叙述。
插件的初始化安装
插件不仅仅是样式的改变，通常我们会加入新的表，那么新加的表我就是通过插件的安装函数来完成的，我们继续在index.php中加入如下的代码：
<!--?php<br?-->//激活动作
register_activation_hook(__FILE__,'my_mood_install');
functionmy_mood_install(){
//启用时要做的事情
global$wpdb;
$table_name=$wpdb->prefix."mood";
$charset_collate=$wpdb->get_charset_collate();
$sql="CREATETABLE$table_name(
idmediumint(9)NOTNULLAUTO_INCREMENT,
createdondatetimeDEFAULT'0000-00-0000:00:00'NOTNULL,
publishedondatetimeDEFAULT'0000-00-0000:00:00'NOTNULL,
statusintNOTNULL,
moodintNOTNULL,
texttextNOTNULL,
addressvarchar(55)DEFAULT''NOTNULL,
UNIQUEKEYid(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的文件，代码内容如下所示：
<!--?php<br?-->//卸载动作
my_mood_uninstall();
functionmy_mood_uninstall(){
//执行内容
global$wpdb;
$table_name=$wpdb->prefix."mood";
$wpdb->query("DROPTABLEIFEXISTS".$table_name);
}
?>
通过Wordpress的$wpdb->query来执行sql，删除我们安装时的创建的表，这样就删除一切与该插件相关的内容了。
给插件添加后台管理菜单
如下面的代码：
<!--?php<br?-->//添加菜单
add_action('admin_menu','my_mood_create_menu');
functionmy_mood_create_menu(){
global$my_settings;
$my_mood_settings=add_menu_page(
"MyMood",
"MyMood",
"manage_options",
"my-mood",
"test"
);
}
?>
通过上面的代码我们就可以为插件添加一个菜单。方法通过add_action(‘admin_menu',‘my_mood_create_menu')添加一个菜单而菜单具体的页面则是通过参数来绑定的，如上面的方法是传入了叫做”test”的参数，因此当点击这个”MyMood”的菜单的时候就会去寻找叫做”test”的方法进行样式的输出，我们给出test方法
<!--?php<br?-->functiontest(){
global$wpdb;
$table_name=$wpdb->prefix."mood";
$fivesdrafts=$wpdb->get_results(
"
SELECTid,createdon,publishedon,status,mood,text,address
FROM$table_name
ORDERBYcreatedonDESC
"
);
?>
<divid="my-mood">foreach($fivesdraftsas$fivesdraft)
{
?>}
?>
<tableclass="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><inputname="text"type="text"value=""placeholder="输入你的心情"/></td>
<td><inputname="address"type="text"value=""placeholder="输入现在所在地"/></td>
<td><label>高兴：<inputclass="mood"checked="checked"name="mood"type="radio"value="0"/></label>
<label>一般：<inputclass="mood"name="mood"type="radio"value="1"/></label>
<label>悲伤：<inputclass="mood"name="mood"type="radio"value="2"/></label>
<label>忧虑：<inputclass="mood"name="mood"type="radio"value="3"/></label>
<label>其他：<inputclass="mood"name="mood"type="radio"value="4"/></label></td>
<td></td>
<td><aclass="add">添加</a></td>
</tr>
<!--?php<br?-->
<tr>
<td><inputname="text"type="text"value="'<?php"/>text;?>'/></td>
<td><inputname="address"type="text"value="'<?php"/>address;?>'/></td>
<td><label>高兴：<inputclass="mood"name="mood<?phpecho$fivesdraft->id;?>"type="radio"/>mood==0?'checked=checked':'';?>value="0"></label>
<label>一般：<inputclass="mood"name="mood<?phpecho$fivesdraft->id;?>"type="radio"/>mood=='1'?'checked=checked':'';?>value="1"></label>
<label>悲伤：<inputclass="mood"name="mood<?phpecho$fivesdraft->id;?>"type="radio"/>mood==2?'checked=checked':'';?>value="2"></label>
<label>忧虑：<inputclass="mood"name="mood<?phpecho$fivesdraft->id;?>"type="radio"/>mood==3?'checked=checked':'';?>value="3"></label>
<label>其他：<inputclass="mood"name="mood<?phpecho$fivesdraft->id;?>"type="radio"/>mood==4?'checked=checked':'';?>value="4"></label></td>
<td></td>
<td><aclass="edit">保存</a><aclass="delete">删除</a></td>
</tr>
<!--?php<br?--></tbody>
</table>
</div>
<!--?php<br?-->}
?>
test方法是php与html代码混编的样式，其中HTMl部分主要负责样式的输出，而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分，通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据，返回的是一个数据集合，包含了多条数据。最后通过foreach循环将数据输出。
我们把数据的界面显示出来了，那么怎样才能将数据保存呢？同样根据上一篇心情插件的例子，先看下面的代码
<!--?php<br?-->functionaad_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[
varaad_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的代码如下
jQuery(document).ready(function(){
jQuery("input").blur(function(){
varvalue=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(){
varparent=jQuery(this).closest("tr");
vartext=jQuery(parent).find("input[name='text']").val();
varaddress=jQuery(parent).find("input[name='address']").val();
varmood=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(){
varparent=jQuery(this).closest("tr");
varid=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(){
varparent=jQuery(this).closest("tr");
varid=jQuery(parent).attr('data');
vartext=jQuery(parent).find("input[name='text']").val();
varaddress=jQuery(parent).find("input[name='address']").val();
varmood=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就会因为插件的启用而插入到页面代码中。
我们实现异步加载数据，要根据下面的代码：
<!--?php<br?-->functionsay(){
$return=array();
$return['success']='1';
$return['msg']=$_POST['value']."test-ajax";
echojson_encode($return);
die();
}
add_action('wp_ajax_say','say');
?>
这段代码的意思是要使用ajax提交数据，add_action(‘wp_ajax_函数名'，函数名)的格式就是注册一个say路由，它对应的js代码是
jQuery("input").blur(function(){
varvalue=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的路由
<!--?php<br?-->functionadd_mood(){
$text=$_POST['text'];
$address=$_POST['address'];
$mood=$_POST['mood'];
add($text,$address,$mood);
$return=array();
$return['success']='1';
echojson_encode($return);
die();
}
add_action('wp_ajax_add_mood','add_mood');
?>
数据要进行删除，注册一个delete_mood的路由
<!--?php<br?-->functiondelete_mood(){
$id=$_POST['id'];
delete($id);
$return=array();
$return['success']='1';
echojson_encode($return);
die();
}
add_action('wp_ajax_delete_mood','delete_mood');
?>
数据要进行编辑，注册一个edit_mood的路由
<!--?php<br?-->functionedit_mood(){
$id=$_POST['id'];
$text=$_POST['text'];
$address=$_POST['address'];
$mood=$_POST['mood'];
edit($id,$text,$address,$mood);
$return=array();
$return['success']='1';
echojson_encode($return);
die();
}
add_action('wp_ajax_edit_mood','edit_mood');
?>
对应上面增删改的php函数如下所示
<!--?php<br?-->functionadd($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?-->functiondelete($id){
global$wpdb;
$table_name=$wpdb->prefix."mood";
$wpdb->delete(
$table_name,
array(
'id'=>$id
)
);
}
?>
<!--?php<br?-->functionedit($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
)
);
}
?>
现在插件的后台数据和界面都已经处理完了，那么怎样把我们的心情插件在前台引用呢？我们需要添加下面的代码
<!--?php<br?-->functionmood_dispaly(){
global$wpdb;
$table_name=$wpdb->prefix."mood";
$fivesdrafts=$wpdb->get_results(
"
SELECTtext
FROM$table_name
ORDERBYcreatedonDESC
LIMIT10
"
);
?>
<!--?php<br?-->}
?>
这段代码就把数据库中存储的心情数据通过HTML显示在前台，那么样子哪里控制的呢？还记得第一步我们添加的js和css吗，是的，样式就是通过第一步插入的样式来控制的。
到此一个完整的心情插件就完成了，照着例子你就可以制作一个属于自己的心情插件了。