基础的WordPress插件制作教程


Posted in PHP onNovember 24, 2015

插件制作准备工作

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

<!--?php <br ?--> /*
Plugin Name: My Mood
Plugin URI: http://www.aips.me
Description: 一个心情发布插件
Version: 1.0
Author: 周良博客
Author URI: http://www.aips.me
License: GPL
*/
?>
  • Plugin Name 代表了插件的名字。
  • Plugin URI 代表的是插件的发布地址。
  • Description 代表的是关于这个插件的描述。
  • Version 代表了版本好,第一个版本使用1.0,如果你的插件有更新,就依次更改这个版本参数。
  • Author 代表插件作者的名字。
  • Author URI 代表作者的主页。。
  • License 代表了插件的License,如果你是开源的就使用GPL,关于License的参数可以百度或者Google查询,这里不再过多的篇幅叙述。

插件的初始化安装

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

<!--?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的文件,代码内容如下所示:

<!--?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,删除我们安装时的创建的表,这样就删除一切与该插件相关的内容了。

给插件添加后台管理菜单

如下面的代码:

<!--?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方法

<!--?php <br ?--> function test(){
global $wpdb;
$table_name = $wpdb->prefix . "mood";

$fivesdrafts = $wpdb->get_results(
"
SELECT id, createdon, publishedon,status,mood,text,address
FROM $table_name
ORDER 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循环将数据输出。

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

<!--?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的代码如下

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就会因为插件的启用而插入到页面代码中。
我们实现异步加载数据,要根据下面的代码:

<!--?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代码是

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的路由

<!--?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的路由

<!--?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的路由

<!--?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函数如下所示

<!--?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
)
);
}
?>

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

<!--?php <br ?--> function mood_dispaly(){
global $wpdb;
$table_name = $wpdb->prefix . "mood";

$fivesdrafts = $wpdb->get_results(
"
SELECT text
FROM $table_name
ORDER BY createdon DESC
LIMIT 10
"
);

?>

<!--?php <br ?--> }
?>

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

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

PHP 相关文章推荐
PHP扩展编写点滴 技巧收集
Mar 09 PHP
php文件上传表单摘自drupal的代码
Feb 15 PHP
php页面缓存ob系列函数介绍
Oct 18 PHP
设置php页面编码的两种方法示例介绍
Mar 03 PHP
基于php的微信公众平台开发入门实例
Apr 15 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
Feb 26 PHP
CodeIgniter针对数据库的连接、配置及使用方法
Mar 03 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
May 12 PHP
通过php动态传数据到highcharts
Apr 05 PHP
php7安装yar扩展的方法详解
Aug 03 PHP
PHP多线程模拟实现秒杀抢单
Feb 07 PHP
PHP 观察者模式深入理解与应用分析
Sep 25 PHP
优化WordPress的Google字体以加速国内服务器上的运行
Nov 24 #PHP
在WordPress中实现评论头像的自定义默认和延迟加载
Nov 24 #PHP
WordPress中缩略图的使用以及相关技巧
Nov 24 #PHP
WordPress中对访客评论功能的一些优化方法
Nov 24 #PHP
php发送短信验证码完成注册功能
Nov 24 #PHP
PHP获取文件扩展名的4种方法
Nov 24 #PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
Aug 17 #PHP
You might like
基于php无限分类的深入理解
2013/06/02 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
详解JS模块导入导出
2017/12/20 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
写给女生的道歉信
2014/01/14 职场文书
农民工创业典型事迹
2014/01/25 职场文书
社区活动邀请函范文
2014/01/29 职场文书
幼儿园秋游感想
2014/03/12 职场文书
电视节目策划方案
2014/05/16 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
推荐信范文大全
2015/03/27 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js