《PHP實(shí)例：基礎(chǔ)的WordPress插件制作教程》要點(diǎn)：
本文介紹了PHP實(shí)例：基礎(chǔ)的WordPress插件制作教程，希望對(duì)您有用。如果有疑問，可以聯(lián)系我們。
插件制作準(zhǔn)備工作PHP學(xué)習(xí)
首先我們?cè)赲wp-content\plugins目錄下添加一個(gè)文件夾叫做”My-Mood”,在文件夾中添加一個(gè)叫做index.php的主文件,這個(gè)是插件的主文件,文件的開始需要一些命名的格式：如下面的代碼PHP學(xué)習(xí)
<!--?php <br ?--> /* Plugin Name: My Mood Plugin URI: http://www.aips.me Description: 一個(gè)心情發(fā)布插件 Version: 1.0 Author: 周良博客 Author URI: http://www.aips.me License: GPL */ ?>
插件的初始化安裝PHP學(xué)習(xí)
插件不僅僅是樣式的改變,通常我們會(huì)加入新的表,那么新加的表我就是通過插件的安裝函數(shù)來完成的,我們繼續(xù)在index.php中加入如下的代碼：PHP學(xué)習(xí)
<!--?php <br ?--> //激活動(dòng)作
register_activation_hook( __FILE__, 'my_mood_install');
function my_mood_install() {
// 啟用時(shí)要做的事情
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激活動(dòng)作來完成插件的安裝,激活動(dòng)作通過參數(shù)my_mood_install,找到名為my_mood_install的函數(shù)執(zhí)行,這個(gè)動(dòng)作會(huì)在插件激活的時(shí)候執(zhí)行.PHP學(xué)習(xí)
我們通過my_mood_install函數(shù)創(chuàng)建了一張名為”mood”的表,數(shù)據(jù)庫表的創(chuàng)建是通過Wordpress的dbDelta函數(shù)來執(zhí)行sql語句完成的,要想使用此函數(shù)需要先引入wp-admin/includes/upgrade.php文件.PHP學(xué)習(xí)
通過上面的代碼我們就運(yùn)用Wordpress內(nèi)置的辦法創(chuàng)建了一張給mood插件存儲(chǔ)數(shù)據(jù)的表.PHP學(xué)習(xí)
插件卸載PHP學(xué)習(xí)
既然Wordpress有安裝也一定會(huì)有卸載.Wordpress插件的卸載辦法是通過一個(gè)叫做uninstall.php的固定命名文件來執(zhí)行的,在插件根目錄下建一個(gè)名叫uninstall.php的文件,代碼內(nèi)容如下所示：PHP學(xué)習(xí)
<!--?php <br ?--> //卸載動(dòng)作
my_mood_uninstall();
function my_mood_uninstall() {
// 執(zhí)行內(nèi)容
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->query("DROP TABLE IF EXISTS " . $table_name);
}
?>
通過Wordpress的$wpdb->query來執(zhí)行sql,刪除我們安裝時(shí)的創(chuàng)建的表,這樣就刪除一切與該插件相關(guān)的內(nèi)容了.PHP學(xué)習(xí)
給插件添加后臺(tái)管理菜單PHP學(xué)習(xí)
如下面的代碼：PHP學(xué)習(xí)
<!--?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"
);
}
?>
通過上面的代碼我們就可以為插件添加一個(gè)菜單.辦法通過add_action( ‘a(chǎn)dmin_menu', ‘my_mood_create_menu' )添加一個(gè)菜單而菜單具體的頁面則是通過參數(shù)來綁定的,如上面的辦法是傳入了叫做”test”的參數(shù),因此當(dāng)點(diǎn)擊這個(gè)”My Mood”的菜單的時(shí)候就會(huì)去尋找叫做”test”的辦法進(jìn)行樣式的輸出,我們給出test辦法PHP學(xué)習(xí)
<!--?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>發(fā)布內(nèi)容</th>
<th>現(xiàn)在所在的</th>
<th>心情</th>
<th>創(chuàng)建日期</th>
<th>操作</th>
</tr>
</thead>
<tfoot>
<tr>
<th>發(fā)布內(nèi)容</th>
<th>現(xiàn)在所在的</th>
<th>心情</th>
<th>創(chuàng)建日期</th>
<th>操作</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input name="text" type="text" value="" placeholder="輸入你的心情" /></td>
<td><input name="address" type="text" value="" placeholder="輸入現(xiàn)在所在地" /></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部分主要負(fù)責(zé)樣式的輸出,而PHP的代碼則是負(fù)責(zé)執(zhí)行取數(shù)據(jù)的邏輯.主要從數(shù)據(jù)庫讀取數(shù)據(jù)的部分,通過Wordpress的$wpdb->get_results辦法就可以從數(shù)據(jù)庫中取出我們第一步中創(chuàng)建的表中的數(shù)據(jù),返回的是一個(gè)數(shù)據(jù)集合,包含了多條數(shù)據(jù).最后通過foreach循環(huán)將數(shù)據(jù)輸出.PHP學(xué)習(xí)
我們把數(shù)據(jù)的界面顯示出來了,那么怎樣才能將數(shù)據(jù)保留呢?同樣根據(jù)上一篇心情插件的例子,先看下面的代碼
PHP學(xué)習(xí)
<!--?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' );
/*
創(chuàng)建驗(yàn)證nonce
它會(huì)輸出類似于：
<![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的代碼如下PHP學(xué)習(xí)
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就會(huì)因?yàn)椴寮膯⒂枚迦氲巾撁娲a中.
我們實(shí)現(xiàn)異步加載數(shù)據(jù),要根據(jù)下面的代碼：PHP學(xué)習(xí)
<!--?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提交數(shù)據(jù),add_action(‘wp_ajax_函數(shù)名',函數(shù)名)的格式就是注冊(cè)一個(gè)say路由,它對(duì)應(yīng)的js代碼是PHP學(xué)習(xí)
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){
}
});
})
因此可以看到j(luò)s代碼的action為sayPHP學(xué)習(xí)
同樣的道理數(shù)據(jù)要進(jìn)行添加,注冊(cè)一個(gè)add_mood的路由PHP學(xué)習(xí)
<!--?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');
?>
數(shù)據(jù)要進(jìn)行刪除,注冊(cè)一個(gè)delete_mood的路由PHP學(xué)習(xí)
<!--?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');
?>
數(shù)據(jù)要進(jìn)行編輯,注冊(cè)一個(gè)edit_mood的路由PHP學(xué)習(xí)
<!--?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');
?>
對(duì)應(yīng)上面增刪改的php函數(shù)如下所示PHP學(xué)習(xí)
<!--?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
)
);
}
?>
現(xiàn)在插件的后臺(tái)數(shù)據(jù)和界面都已經(jīng)處理完了,那么怎樣把我們的心情插件在前臺(tái)引用呢?我們需要添加下面的代碼PHP學(xué)習(xí)
<!--?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 ?--> }
?>
這段代碼就把數(shù)據(jù)庫中存儲(chǔ)的心情數(shù)據(jù)通過HTML顯示在前臺(tái),那么樣子哪里控制的呢?還記得第一步我們添加的js和css嗎,是的,樣式就是通過第一步插入的樣式來控制的.PHP學(xué)習(xí)
到此一個(gè)完整的心情插件就完成了,照著例子你就可以制作一個(gè)屬于本身的心情插件了.PHP學(xué)習(xí)
歡迎參與《PHP實(shí)例：基礎(chǔ)的WordPress插件制作教程》討論，分享您的想法，維易PHP學(xué)院為您提供專業(yè)教程。
轉(zhuǎn)載請(qǐng)注明本頁網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/8355.html
