Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > 基础的WordPress插件制作教程_php实例

基础的WordPress插件制作教程_php实例

WBOY
Release： 2016-06-07 17:10:48
Original
898 people have browsed it

插件制作准备工作

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

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

插件的初始化安装

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

<!--&#63;php <br &#63;--> //激活动作
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 );
}
&#63;>
Copy after login

如上面代码的注释，我们通过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的文件，代码内容如下所示：

<!--&#63;php <br &#63;--> //卸载动作
my_mood_uninstall();

function my_mood_uninstall() {

// 执行内容
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->query("DROP TABLE IF EXISTS " . $table_name);
}
&#63;>
Copy after login

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

给插件添加后台管理菜单

如下面的代码：

<!--&#63;php <br &#63;--> //添加菜单
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"
);
}
&#63;>
Copy after login

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

<!--&#63;php <br &#63;--> 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
"
);
&#63;>
<div id="my-mood">foreach ( $fivesdrafts as $fivesdraft )
{
&#63;> }
&#63;>
<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>
<!--&#63;php <br &#63;-->
<tr>
<td><input name="text" type="text" value="'<&#63;php" />text; &#63;>'/></td>
<td><input name="address" type="text" value="'<&#63;php" />address; &#63;>'/></td>
<td><label>高兴：<input class="mood" name="mood<&#63;php echo $fivesdraft->id; &#63;>" type="radio" />mood==0&#63;'checked=checked':''; &#63;> value="0"></label>
<label>一般：<input class="mood" name="mood<&#63;php echo $fivesdraft->id; &#63;>" type="radio" />mood=='1'&#63;'checked=checked':''; &#63;> value="1"></label>
<label>悲伤：<input class="mood" name="mood<&#63;php echo $fivesdraft->id; &#63;>" type="radio" />mood==2&#63;'checked=checked':''; &#63;> value="2"></label>
<label>忧虑：<input class="mood" name="mood<&#63;php echo $fivesdraft->id; &#63;>" type="radio" />mood==3&#63;'checked=checked':''; &#63;> value="3"></label>
<label>其他：<input class="mood" name="mood<&#63;php echo $fivesdraft->id; &#63;>" type="radio" />mood==4&#63;'checked=checked':''; &#63;> value="4"></label></td>
<td></td>
<td><a class="edit">保存</a><a class="delete">删除</a></td>
</tr>
<!--&#63;php <br &#63;--></tbody>
</table>
</div>
<!--&#63;php <br &#63;--> }
&#63;>
Copy after login

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

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

<!--&#63;php <br &#63;--> 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');
&#63;>
Copy after login

其中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;
}
});
})

});
Copy after login

在上面的代码中我们通过Hook插入我们需要js代码和css代码，这样我们插件的js和css就会因为插件的启用而插入到页面代码中。
我们实现异步加载数据，要根据下面的代码：

<!--&#63;php <br &#63;--> function say(){
$return=array();
$return['success'] = '1';
$return['msg']=$_POST['value']."test-ajax";
echo json_encode($return);
die();
}
add_action('wp_ajax_say', 'say');
&#63;>
Copy after login

这段代码的意思是要使用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){
}
});
})
Copy after login

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

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

<!--&#63;php <br &#63;--> 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');
&#63;>
Copy after login

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

<!--&#63;php <br &#63;--> 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');
&#63;>
Copy after login

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

<!--&#63;php <br &#63;--> 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');
&#63;>
Copy after login

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

<!--&#63;php <br &#63;--> 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,
)
);
}
&#63;>

<!--&#63;php <br &#63;--> function delete($id){
global $wpdb;

$table_name = $wpdb->prefix . "mood";
$wpdb->delete(
$table_name,
array(
'id'=>$id
)
);
}
&#63;>

<!--&#63;php <br &#63;--> 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
)
);
}
&#63;>
Copy after login

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

<!--&#63;php <br &#63;--> 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
"
);

&#63;>

<!--&#63;php <br &#63;--> }
&#63;>
Copy after login

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

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

Related labels：
wordpress plug-in
source：php.cn
Previous article：基于php实现七牛抓取远程图片_php实例 Next article：PHP新建类问题分析及解决思路_php实例
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Pin WordPress version on wp-cli I'm using wp-cli to download WordPresswp-cli--allow-rootcoredownload Is there any way to f...
From 2024-04-04 21:52:26
0
1
1456
Create a hover effect that transforms the menu button into an x ​​shape with a shadowed clone version First I want to admit that my title is confusing and I'm sorry for that. What I want to ac...
From 2024-04-04 11:55:21
0
2
315
Get files from specified path based on partial file name matching I'm developing a WordPress that utilizes gulp to build the front-end of the application (s...
From 2024-04-03 14:50:46
0
1
419
Why doesn't my Jquery slider display correctly? I'm trying to implement the SlickSlider library in my WordPress custom theme to display an...
From 2024-04-03 10:43:26
0
1
397
Retrieve WordPress Photo' value to be placed in custom php page I need to create a WordPress website from existing HTML (more specifically from an asp.net...
From 2024-04-02 19:13:12
0
1
296
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template