基础的WordPress插件制作教程
插件制作准备工作首先我们在wp-contentplugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件,这个是插件的主文件,文件的开始需要一些命名的格式:如下面的代码 /*
Plugin Name: My Mood
Plugin URI: http://www.aips.me
Description: 一个心情发布插件
Version: 1.0
Author: 周良博客
Author URI: http://www.aips.me
License: GPL
*/
?>
插件的初始化安装插件不仅仅是样式的改变,通常我们会加入新的表,那么新加的表我就是通过插件的安装函数来完成的,我们继续在index.php中加入如下的代码: //激活动作
register_activation_hook( __FILE__,'my_mood_install');
function my_mood_install() { // 启用时要做的事情 $table_name = $wpdb->prefix . "mood"; $charset_collate = $wpdb->get_charset_collate(); $sql = "CREATE TABLE $table_name ( require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); 如上面代码的注释,我们通过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的文件,代码内容如下所示: //卸载动作
my_mood_uninstall();
function my_mood_uninstall() { // 执行内容 通过Wordpress的$wpdb->query来执行sql,删除我们安装时的创建的表,这样就删除一切与该插件相关的内容了。 给插件添加后台管理菜单如下面的代码: //添加菜单
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方法 function test(){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$fivesdrafts = $wpdb->get_results( 现在所在的 |
心情 |
创建日期 |
操作 |
现在所在的 |
心情 |
创建日期 |
操作 |
|
test方法是php与html代码混编的样式,其中HTMl部分主要负责样式的输出,而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分,通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据,返回的是一个数据集合,包含了多条数据。最后通过foreach循环将数据输出。
我们把数据的界面显示出来了,那么怎样才能将数据保存呢?同样根据上一篇心情插件的例子,先看下面的代码
wp_register_style( 'my-style',plugins_url( 'my-mood/css/style.css',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的代码如下
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",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",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",data:{action:"edit_mood",id:id,success:function(data){
window.location.href=window.location;
}
});
})
});
在上面的代码中我们通过Hook插入我们需要js代码和css代码,这样我们插件的js和css就会因为插件的启用而插入到页面代码中。 我们实现异步加载数据,要根据下面的代码:
这段代码的意思是要使用ajax提交数据,add_action(‘wp_ajax_函数名',函数名)的格式就是注册一个say路由,它对应的js代码是
因此可以看到js代码的action为say
同样的道理数据要进行添加,注册一个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的路由
$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的路由
$id=$_POST['id'];
$text=$_POST['text'];
$address=$_POST['address'];
$mood=$_POST['mood'];
edit($id,$text,$mood);
$return=array();
$return['success'] = '1';
echo json_encode($return);
die();
}
add_action('wp_ajax_edit_mood','edit_mood');
?>
对应上面增删改的php函数如下所示
$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,)
);
}
?>
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->delete(
$table_name,array(
'id'=>$id
)
);
}
?>
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->update(
$table_name,array(
'mood' => $mood,),array(
'id' => $id
)
);
}
?>
现在插件的后台数据和界面都已经处理完了,那么怎样把我们的心情插件在前台引用呢?我们需要添加下面的代码
$fivesdrafts = $wpdb->get_results(
"
SELECT text
FROM $table_name
ORDER BY createdon DESC
LIMIT 10
"
);
?>
}?>
这段代码就把数据库中存储的心情数据通过HTML显示在前台,那么样子哪里控制的呢?还记得第一步我们添加的js和css吗,是的,样式就是通过第一步插入的样式来控制的。
到此一个完整的心情插件就完成了,照着例子你就可以制作一个属于自己的心情插件了。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!