基础的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中看实例学正则表达式
Dec 25 PHP
使用PHP实现Mysql读写分离
Jun 28 PHP
php cli配置文件问题分析
Oct 15 PHP
ThinkPHP框架安全实现分析
Mar 14 PHP
php的api数据接口书写实例(推荐)
Sep 22 PHP
php利用imagemagick实现复古老照片效果实例
Feb 16 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
Mar 04 PHP
PHP面向对象之工作单元(实例讲解)
Jun 26 PHP
php实现微信企业号支付个人的方法详解
Jul 26 PHP
PHP+原生态ajax实现的省市联动功能详解
Aug 15 PHP
YII框架http缓存操作示例
Apr 29 PHP
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
Apr 01 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学习 计数器实例代码
2008/06/15 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
yii中widget的用法
2014/12/03 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
小程序实现多列选择器
2019/02/15 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python制作刷网页流量工具
2017/04/23 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
90后毕业生的求职信范文
2013/09/21 职场文书
商场消防管理制度
2014/01/12 职场文书
副处级干部考察材料
2014/05/17 职场文书
公司会议开幕词
2015/01/29 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers