wordpress开发之插件开发初识,wordpress后台中的侧边栏添加菜单或子菜单的方法
分类:面向对象

插件制作准备工作

图片 1

复制代码代码如下:
//该方法为向已经存在的菜单中添加子菜单
function add_submenu() {
add_submenu_page( 'themes.php', 'my_backup', '测试', 'manage_options', 'backup-page', 'submenu_function');
}
// 用于显示菜单的内容,填写菜单页面的HTML代码即可
function submenu_function() {
echo '测试,也可以添加html代码';
}
// 通过add_action来自动调用add_submenu函数
add_action('admin_menu', 'add_submenu');
//themes.php的菜单为‘外观’,如果想加入其它菜单的话,可以参考另外一篇博文
/////////////////
//下面的方法是添加菜单
// my_add_pages() 为 'admin_menu' 钩子的回调函数
function my_add_pages() {
// 第一个参数'Help page'为菜单名称,第二个参数'使用帮助'为菜单标题
// 'manage_options' 参数为用户权限
// 'my_toplevel_page' 参数用于调用my_toplevel_page()函数,来显示菜单内容
add_menu_page('Help page', '使用帮助', 'manage_options', apizl_file, 'my_toplevel_page');
}
// my_toplevel_page() 用于显示菜单的内容,填写菜单页面的HTML代码即可
function my_toplevel_page() {
echo '
这里填菜单页面的HTML代码
';
}
// 通过add_action来自动调用my_add_pages函数
add_action('admin_menu', 'my_add_pages');

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

首先,你要在wp-content/plugins/下建立一个文件夹,文件夹的名字最好只由字母、数字、“-”和下滑组成。同时,还要在这个文件夹下建立一个同名的php文件。比如你的文件夹名字为my-plugin,则php的名字就是my-plugin.php,这个文件做为你plugin的主文件,像主题文件的sytle.css文件一样,它的头部包含了对这个插件的描述信息。下面是一个简单的例子:

也可以单独创建一个php文件,利用ruquire方法导入该文件
可以创建一个submenu.php把上面的代码放入submenu.php中,用
require( get_template_directory().'/submenu.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
*/
?>

复制代码代码如下:
< ?php
/*
Plugin Name: 插件名称
Plugin URI:
Description: 插件的简单描述
Version: 插件版本号, 例如: 1.0
Author: 插件作者
Author URI:
*/
?>

  • Plugin Name 代表了插件的名字。

  • Plugin URI 代表的是插件的发布地址。

  • Description 代表的是关于这个插件的描述。

  • Version 代表了版本好,第一个版本使用1.0,如果你的插件有更新,就依次更改这个版本参数。

  • Author 代表插件作者的名字。

  • Author URI 代表作者的主页。。

  • License 代表了插件的License,如果你是开源的就使用GPL,关于License的参数可以百度或者Google查询,这里不再过多的篇幅叙述。

另外如果你想要把你的插件提交到wordpress.org上,你还要在文件夹中添加一个readme.txt文件。就像主题中的style.css文件一样。类似的,readme.txt的头部包含了对这个插件的基本描述信息。关于readme.txt的格式,可以参考WordPress的官方示例。因为这里只是简单的写一个可用的Plugin,就不介绍reaadme.txt了。
WordPress的插件其实就是一堆php的方法。这些方法通过调用系统自带的钩子来为博客增加新的功能。下面我们就来看一下什么是系统的钩子。
插件钩子

插件的初始化安装

WordPress定义了很多不同用途的钩子,在Wordpress运行的不同阶段,它会检测当前阶段是否注册了钩子函数,如果有,则优先执行这些函数。添加filter的方法如下:

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

复制代码代码如下:add_filter('filter_name', 'filter_callback_function_name', $priority=10, $accepted_args=1);

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

add_fitler的四个参数分别是:要挂载的钩子的名称,钩子的回调函数,回调函数的优先级,回调函数的参数个数。一个例子如下:

如上面代码的注释,我们通过register_activation_hook激活动作来完成插件的安装,激活动作通过参数my_mood_install,找到名为my_mood_install的函数执行,这个动作会在插件激活的时候执行。

复制代码代码如下:
add_fitler('the_title', 'my_title', 10, 2);
function my_title($title, $id) {
return News:$title;
}

我们通过my_mood_install函数创建了一张名为”mood”的表,数据库表的创建是通过Wordpress的dbDelta函数来执行sql语句完成的,要想使用此函数需要先引入wp-admin/includes/upgrade.php文件。

这个例子中,我们在the_title钩子上挂载了一个my_title的函数,这个函数接受两个参数,每别是文章的标题和ID,当Wordpress要把文章post给浏览器之前,会首先调用到这个函数,在这里,我们在每个文章的标题前加了一个“News:”。
关于Wordpress所提供的所有钩子,可以参考Wordpress的官网文档:Filter Reference。
另外你可能会在某些文章中看到令一个添加钩子的函数add_action。我们来看一下wordpress的内核你或许就明白了:

通过上面的代码我们就运用Wordpress内置的方法创建了一张给mood插件存储数据的表。

复制代码代码如下:
function add_action($tag, $function_to_add, $priority = 10, $accept_args = 1) {
return add_filter($tag, $function_to_add, $priority, $accept_args);
}

插件卸载

所以add_action和add_filter本质上没有任何区别。
之前说过,Wordpress会在系统的不同阶段调用不同的钩子,其实,如果需要,你也可以在你的代码里手动调用这些钩子。方法如下:

既然Wordpress有安装也一定会有卸载。Wordpress插件的卸载方法是通过一个叫做uninstall.php的固定命名文件来执行的,在插件根目录下建一个名叫uninstall.php的文件,代码内容如下所示:

复制代码代码如下:
$return_values = apply_filtere('filter_name', $args ... );

<!--?php <br ?--> //卸载动作
my_mood_uninstall();

function my_mood_uninstall() {

// 执行内容
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->query("DROP TABLE IF EXISTS " . $table_name);
}
?>

有了这些filter,你就可以在wordpress处理流程中的任意地方修改数据内容,实现插件所需要的功能。
Option机制

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

仅仅有了filter还不够,很多插件还需要保存一些信息,比方插件的属性设置之类,这个时候你就要用到Wordpress的Option机制了。
WordPress的Option机制通过add_option,get_option, update_option三个函数来实现,三个函数的定义如下:

给插件添加后台管理菜单

复制代码代码如下:
add_option($name, $value, $deprecated, $autoload);
get_option($name);
update_option($option_name, $newvalue);

如下面的代码:

add_option有4个参数,功能分别如下:
$name:必选,变量名
$value:可选,变量值,默认为空字符
$deprecated:没用的参数,纯粹是历史遗留问题。留着它只是为了兼容以有的插件。当然如果你要调用到后面的$autoload,你需要为它传入一个空字符或null。
$autoload: “yes” or “no”,默认是”yes”,当设为”yes”时,该属性会在wp_load_alloptions调用时获取到。
get_option用来获取你添加的参数,同时系统中已经默认定义了一些参数,你可以参考Wordpress的官方列表:Option Refernce。
而update_option则是用来更新option。
三个方法都比较好理解,我也不多说了。通过这三个方法你可以把你需要长久保存的数据放在数据库中。
设置页面

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

有了filter和option,我们已经完成了一个插件的核心工作。不过做为一个插件,它经常还需要为用户提供一个设置页面,也就是在Wordpress后台插件列表中所看到的settings链接,如下图:
settings
这里我们用一个最简单的例子还说明如何添加一个设置页面:

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

复制代码代码如下:
public function __construct(){
if(is_admin()){
add_action('admin_menu', array($this, 'add_plugin_page'));
add_action('admin_init', array($this, 'page_init'));
}
}
public function add_plugin_page(){
// This page will be under "Settings"
add_options_page('Settings Admin', 'Settings', 'manage_options', 'test-setting-admin', array($this, 'create_admin_page'));
}
public function create_admin_page(){
?>

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

< ?php screen_icon(); ?>

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

Settings

< ?php
// This prints out all hidden setting fields
settings_fields(‘test_option_group’);
do_settings_sections(‘test-setting-admin’);
?>
< ?php submit_button(); ?>

<>
< ?php
}
public function page_init(){
register_setting(‘test_option_group’, ‘array_key’, array($this, ‘check_ID’));
add_settings_section(
‘setting_section_id’,
‘Setting’,
array($this, ‘print_section_info’),
‘test-setting-admin’
);
add_settings_field(
‘some_id’,
‘Some ID(Title)’,
array($this, ‘create_an_id_field’),
‘test-setting-admin’,
‘setting_section_id’
);
}
public function check_ID($input){
if(is_numeric($input['some_id'])){
$mid = $input['some_id'];
if(get_option(‘test_some_id’) === FALSE){
add_option(‘test_some_id’, $mid);
}else{
update_option(‘test_some_id’, $mid);
}
}else{
$mid = ”;
}
return $mid;
}
public function print_section_info(){
print ‘Enter your setting below:’;
}
public function create_an_id_field(){
?>” />< ?php
}
}
$wctest = new wctest();

上面创建的类会在你的Wordpress后台添加一个新页面,同时它允许用户保存一个id值。

到这里,我们一个简单的Wordpress插件就完成了。虽然这个插件本身没有什么用途。谢谢大家。

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

<!--?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吗,是的,样式就是通过第一步插入的样式来控制的。

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

本文由10bet手机官网发布于面向对象,转载请注明出处:wordpress开发之插件开发初识,wordpress后台中的侧边栏添加菜单或子菜单的方法

上一篇:php中3des加密代码,net中des加解密的实现方法 下一篇:没有了
猜你喜欢
热门排行
精彩图文