基礎(chǔ)的WordPress插件制作教程

2024-09-07 00:48:14

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了基礎(chǔ)的WordPress插件制作教程,包括基本的使用ajax提交數(shù)據(jù)的實(shí)現(xiàn),需要的朋友可以參考下。

插件制作準(zhǔn)備工作

首先我們?cè)?wp-content/plugins目錄下添加一個(gè)文件夾叫做”My-Mood”,在文件夾中添加一個(gè)叫做index.php的主文件，這個(gè)是插件的主文件，文件的開(kāi)始需要一些命名的格式：如下面的代碼

/*

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

*/

?>

Plugin Name 代表了插件的名字。

Plugin URI 代表的是插件的發(fā)布地址。

Description 代表的是關(guān)于這個(gè)插件的描述。

Version 代表了版本好，第一個(gè)版本使用1.0，如果你的插件有更新，就依次更改這個(gè)版本參數(shù)。

Author 代表插件作者的名字。

Author URI 代表作者的主頁(yè)。。

License 代表了插件的License，如果你是開(kāi)源的就使用GPL，關(guān)于License的參數(shù)可以百度或者Google查詢，這里不再過(guò)多的篇幅敘述。

插件的初始化安裝

插件不僅僅是樣式的改變，通常我們會(huì)加入新的表，那么新加的表我就是通過(guò)插件的安裝函數(shù)來(lái)完成的，我們繼續(xù)在index.php中加入如下的代碼：

//激活動(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 );

}

?>

如上面代碼的注釋，我們通過(guò)register_activation_hook激活動(dòng)作來(lái)完成插件的安裝，激活動(dòng)作通過(guò)參數(shù)my_mood_install，找到名為my_mood_install的函數(shù)執(zhí)行，這個(gè)動(dòng)作會(huì)在插件激活的時(shí)候執(zhí)行。

我們通過(guò)my_mood_install函數(shù)創(chuàng)建了一張名為”mood”的表，數(shù)據(jù)庫(kù)表的創(chuàng)建是通過(guò)Wordpress的dbDelta函數(shù)來(lái)執(zhí)行sql語(yǔ)句完成的，要想使用此函數(shù)需要先引入wp-admin/includes/upgrade.php文件。

通過(guò)上面的代碼我們就運(yùn)用Wordpress內(nèi)置的方法創(chuàng)建了一張給mood插件存儲(chǔ)數(shù)據(jù)的表。

插件卸載

既然Wordpress有安裝也一定會(huì)有卸載。Wordpress插件的卸載方法是通過(guò)一個(gè)叫做uninstall.php的固定命名文件來(lái)執(zhí)行的，在插件根目錄下建一個(gè)名叫uninstall.php的文件，代碼內(nèi)容如下所示：

//卸載動(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);

}

?>

通過(guò)Wordpress的$wpdb->query來(lái)執(zhí)行sql，刪除我們安裝時(shí)的創(chuàng)建的表，這樣就刪除一切與該插件相關(guān)的內(nèi)容了。

給插件添加后臺(tái)管理菜單

如下面的代碼：

//添加菜單

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"

);

}

?>

通過(guò)上面的代碼我們就可以為插件添加一個(gè)菜單。方法通過(guò)add_action( ‘admin_menu', ‘my_mood_create_menu' )添加一個(gè)菜單而菜單具體的頁(yè)面則是通過(guò)參數(shù)來(lái)綁定的，如上面的方法是傳入了叫做”test”的參數(shù)，因此當(dāng)點(diǎn)擊這個(gè)”My Mood”的菜單的時(shí)候就會(huì)去尋找叫做”test”的方法進(jìn)行樣式的輸出，我們給出test方法

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>



<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>

</tbody>

</table>

</div>

 }

?>

test方法是php與html代碼混編的樣式，其中HTMl部分主要負(fù)責(zé)樣式的輸出，而PHP的代碼則是負(fù)責(zé)執(zhí)行取數(shù)據(jù)的邏輯。主要從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)的部分，通過(guò)Wordpress的$wpdb->get_results方法就可以從數(shù)據(jù)庫(kù)中取出我們第一步中創(chuàng)建的表中的數(shù)據(jù)，返回的是一個(gè)數(shù)據(jù)集合，包含了多條數(shù)據(jù)。最后通過(guò)foreach循環(huán)將數(shù)據(jù)輸出。

我們把數(shù)據(jù)的界面顯示出來(lái)了，那么怎樣才能將數(shù)據(jù)保存呢？同樣根據(jù)上一篇心情插件的例子，先看下面的代碼

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的代碼如下

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;

}

});

})

});

在上面的代碼中我們通過(guò)Hook插入我們需要js代碼和css代碼，這樣我們插件的js和css就會(huì)因?yàn)椴寮膯⒂枚迦氲巾?yè)面代碼中。

我們實(shí)現(xiàn)異步加載數(shù)據(jù)，要根據(jù)下面的代碼：

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代碼是

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為say

同樣的道理數(shù)據(jù)要進(jìn)行添加，注冊(cè)一個(gè)add_mood的路由

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

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

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ù)如下所示

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,

)

);

}

?>

 function delete($id){

global $wpdb;

$table_name = $wpdb->prefix . "mood";

$wpdb->delete(

$table_name,

array(

'id'=>$id

)

);

}

?>

 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)引用呢？我們需要添加下面的代碼

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

"

);

?>

 }

?>