本文目录
[隐藏]
- 1PHP部分
- 1.1安全第一
- 1.2定义一些用得上的常量
- 1.3I18n=国际化支持
- 1.4添加菜单项
- 1.5美化下菜单项前面的icon
- 1.6设置页面/后台的HTML结构
- 1.7载入ajax的js文件
- 1.8处理ajax的响应
- 2javascript文件
- 3下载完整的示例
这篇文章说下如何为自制的Wordpress主题/插件的设置后台添加ajax支持。
aad=Adding Ajax support in wordpress aDmin (总不能全是A吧)
PHP部分
安全第一
1
2
|
/*Exit if accessed directly:安全第一,如果是直接载入,就退出.*/
defined( 'ABSPATH' ) or exit;
|
/*Exit if accessed directly:安全第一,如果是直接载入,就退出.*/ defined( ‘ABSPATH’ ) or exit;
定义一些用得上的常量
其实越少越好!
1
2
|
/*Define a(some) Constant(s):定义常量(没有复数的中文的优势显示出来了吧)*/
defined('AAD_PLUGIN_URL') or define('AAD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
|
/*Define a(some) Constant(s):定义常量(没有复数的中文的优势显示出来了吧)*/ defined(‘AAD_PLUGIN_URL’) or define(‘AAD_PLUGIN_URL’, plugin_dir_url( __FILE__ ));
I18n=国际化支持
其实就是做个语言包,让使用者可以自行翻译语言包。
1
2
3
4
5
6
7
8
|
/*
I18n
*/
function aad_load_textdomain() {
$aad_lang_dir = dirname( plugin_basename( __FILE__ ) ) . '/lang/';
load_plugin_textdomain( 'aad', false, $aad_lang_dir );
}
add_action( 'init', 'aad_load_textdomain' );
|
/* I18n */ function aad_load_textdomain() { $aad_lang_dir = dirname( plugin_basename( __FILE__ ) ) . ‘/lang/’; load_plugin_textdomain( ‘aad’, false, $aad_lang_dir ); } add_action( ‘init’, ‘aad_load_textdomain’ );
添加菜单项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
function aad_admin_page() {
/*添加菜单,并指定一个全局Hook给它*/
global $aad_settings;
/*
Add sub menu page to the Settings menu:这个API将会把你想添加的菜单添加到setting(设置)菜单下;
add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);
我们要将自己的菜单添加为顶级菜单,所以,不用这个了。
*/
//$aad_settings = add_options_page(__('Admin Ajax Demo', 'aad'), __('Admin Ajax', 'aad'), 'manage_options', 'admin-ajax-demo', 'aad_render_admin');
/*
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
$position可选:
2 Dashboard=替代原有的仪表盘(首页),不合适;
4 Separator=仪表盘(首页)和文章之间分割线的位置;
5 Posts=仪表盘(首页)和文章之间正常的位置,这时候它和仪表盘(首页)的分割线还在
10 Media=替代原有的多媒体的位置;
15 Links=在新版本的Wordpress中,Link功能默认是隐藏的,也就是默认的,你是看不到这个菜单项的,所以这个位置也是可以的;
20 Pages=替代菜单项“页面”,不合适;
25 Comments=替代菜单项“评论”,不合适;
59 Separator=替代评论和外观之间分割线的位置,可以;
60 Appearance=替代菜单项“外观”,不合适;
65 Plugins=替代菜单项“插件”,不合适;
70 Users=替代菜单项“用户”,不合适;
75 Tools=替代菜单项“工具”,不合适;
80 Settings=替代菜单项“设置”,不合适;
99 Separator=替代WP后台菜单最下侧的分割线的位置,合适;
可以更大吗?可以。
*/
/*
使用自制的icon作为菜单项的标志
*/
//$aad_settings = add_menu_page(__('Admin Ajax Demo', 'aad'), __('Admin Ajax', 'aad'), 'manage_options', 'admin-ajax-demo','aad_render_admin', AAD_PLUGIN_URL. 'img/ajax.png', 99);
/*
准备使用wordpress自带的dashicon作为菜单项的标志,所以把$icon_url的值置为false
*/
$aad_settings = add_menu_page(__('Admin Ajax Demo', 'aad'), __('Admin Ajax', 'aad'), 'manage_options', 'admin-ajax-demo','aad_render_admin',false, 99);
}
add_action('admin_menu', 'aad_admin_page');
|
function aad_admin_page() { /*添加菜单,并指定一个全局Hook给它*/ global $aad_settings; /* Add sub menu page to the Settings menu:这个API将会把你想添加的菜单添加到setting(设置)菜单下; add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function); 我们要将自己的菜单添加为顶级菜单,所以,不用这个了。 */ //$aad_settings = add_options_page(__(‘Admin Ajax Demo’, ‘aad’), __(‘Admin Ajax’, ‘aad’), ‘manage_options’, ‘admin-ajax-demo’, ‘aad_render_admin’); /* add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); $position可选: 2 Dashboard=替代原有的仪表盘(首页),不合适; 4 Separator=仪表盘(首页)和文章之间分割线的位置; 5 Posts=仪表盘(首页)和文章之间正常的位置,这时候它和仪表盘(首页)的分割线还在 10 Media=替代原有的多媒体的位置; 15 Links=在新版本的Wordpress中,Link功能默认是隐藏的,也就是默认的,你是看不到这个菜单项的,所以这个位置也是可以的; 20 Pages=替代菜单项“页面”,不合适; 25 Comments=替代菜单项“评论”,不合适; 59 Separator=替代评论和外观之间分割线的位置,可以; 60 Appearance=替代菜单项“外观”,不合适; 65 Plugins=替代菜单项“插件”,不合适; 70 Users=替代菜单项“用户”,不合适; 75 Tools=替代菜单项“工具”,不合适; 80 Settings=替代菜单项“设置”,不合适; 99 Separator=替代WP后台菜单最下侧的分割线的位置,合适; 可以更大吗?可以。 */ /* 使用自制的icon作为菜单项的标志 */ //$aad_settings = add_menu_page(__(‘Admin Ajax Demo’, ‘aad’), __(‘Admin Ajax’, ‘aad’), ‘manage_options’, ‘admin-ajax-demo’,’aad_render_admin’, AAD_PLUGIN_URL. ‘img/ajax.png’, 99); /* 准备使用wordpress自带的dashicon作为菜单项的标志,所以把$icon_url的值置为false */ $aad_settings = add_menu_page(__(‘Admin Ajax Demo’, ‘aad’), __(‘Admin Ajax’, ‘aad’), ‘manage_options’, ‘admin-ajax-demo’,’aad_render_admin’,false, 99); } add_action(‘admin_menu’, ‘aad_admin_page’);
美化下菜单项前面的icon
下面的示例采用插件/主题自带图片的方案仅供参考,建议使用图标字体,下面使用了Wordpress自带的dashicons字体:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function aad_style(){
/*
css内容较少的情况下,使用admin_head这个hook直接输出比较合适;如果css内容较多,使用自制的icon作为菜单项的标志用admin_enqueue_scripts这个Hook载入css文件比较合适.
*/
/*
限制菜单项前面的icon的尺寸
*/
//$output='<style>#toplevel_page_admin-ajax-demo .wp-menu-image img{width:20px;height:20px;}</style>';
/*
使用Wordpress自带的图标字体dashicons;
更多详情:http://suoling.net/wordpress-dashicons/
*/
$output='<style>#adminmenu #toplevel_page_admin-ajax-demo .wp-menu-image:before {content: "\f321";}</style>';
echo $output;
}
add_action('admin_head','aad_style');
|
function aad_style(){ /* css内容较少的情况下,使用admin_head这个hook直接输出比较合适;如果css内容较多,使用自制的icon作为菜单项的标志用admin_enqueue_scripts这个Hook载入css文件比较合适. */ /* 限制菜单项前面的icon的尺寸 */ //$output='<style>#toplevel_page_admin-ajax-demo .wp-menu-image img{width:20px;height:20px;}</style>’; /* 使用Wordpress自带的图标字体dashicons; 更多详情:http://suoling.net/wordpress-dashicons/ */ $output='<style>#adminmenu #toplevel_page_admin-ajax-demo .wp-menu-image:before {content: “\f321”;}</style>’; echo $output; } add_action(‘admin_head’,’aad_style’);
设置页面/后台的HTML结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/*
开始处理页面输出
*/
function aad_render_admin() {
?>
<div class="wrap">
<h2><?php _e('Admin Ajax Demo', 'aad'); ?></h2>
<!-- 一个很简单的示例表单 -->
<form id="aad-form" action="" method="POST">
<div>
<input type="submit" name="aad-submit" id="aad_submit" class="button-primary" value="<?php _e('Get Results', 'aad'); ?>"/>
<img src="<?php echo admin_url('/images/wpspin_light.gif'); ?>" class="waiting" id="aad_loading" style="display:none;"/>
</div>
</form>
<!-- 用于显示结果的自定义节点 -->
<div id="aad_results"></div>
</div>
<?php
}
|
/* 开始处理页面输出 */ function aad_render_admin() { ?> <div class=”wrap”> <h2><?php _e(‘Admin Ajax Demo’, ‘aad’); ?></h2> <!– 一个很简单的示例表单 –> <form id=”aad-form” action=”” method=”POST”> <div> <input type=”submit” name=”aad-submit” id=”aad_submit” class=”button-primary” value=”<?php _e(‘Get Results’, ‘aad’); ?>”/> <img src=”<?php%20echo%20admin_url(‘/images/wpspin_light.gif’);%20?>” class=”waiting” id=”aad_loading” style=”display:none;”/> </div> </form> <!– 用于显示结果的自定义节点 –> <div id=”aad_results”></div> </div> <?php }
载入ajax的js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/*
载入ajax的js文件
*/
function aad_load_scripts($hook) {
global $aad_settings;
/*用上了前面定义的全局菜单Hook,如果不是这个,就返回*/
if( $hook != $aad_settings )
return;
/*载入ajax的js文件,也可以载入其他的javascript和/或css等*/
wp_enqueue_script('aad-ajax', AAD_PLUGIN_URL . 'js/aad-ajax.js', array('jquery'));
/*
创建验证nonce
它会输出类似于:
<![CDATA[
var aad_vars = {"aad_nonce":"5c18514d34"};
]]>
之类的被注释掉的js到HTML。
*/
wp_localize_script('aad-ajax', 'aad_vars', array(
'aad_nonce' => wp_create_nonce('aad-nonce')
)
);
}
add_action('admin_enqueue_scripts', 'aad_load_scripts');
|
/* 载入ajax的js文件 */ function aad_load_scripts($hook) { global $aad_settings; /*用上了前面定义的全局菜单Hook,如果不是这个,就返回*/ if( $hook != $aad_settings ) return; /*载入ajax的js文件,也可以载入其他的javascript和/或css等*/ wp_enqueue_script(‘aad-ajax’, AAD_PLUGIN_URL . ‘js/aad-ajax.js’, array(‘jquery’)); /* 创建验证nonce 它会输出类似于: <![CDATA[ var aad_vars = {“aad_nonce”:”5c18514d34″}; ]]> 之类的被注释掉的js到HTML。 */ wp_localize_script(‘aad-ajax’, ‘aad_vars’, array( ‘aad_nonce’ => wp_create_nonce(‘aad-nonce’) ) ); } add_action(‘admin_enqueue_scripts’, ‘aad_load_scripts’);
处理ajax的响应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/*
处理ajax的返回数据
*/
function aad_process_ajax() {
/*用nonce进行权限验证,以保证安全*/
if( !isset( $_POST['aad_nonce'] ) || !wp_verify_nonce($_POST['aad_nonce'], 'aad-nonce') )
die('Permissions check failed');
/*
输出一些查询数据
*/
$posts = get_posts(array('post_type' => 'post', 'posts_per_page' => 5));
if( $posts ) :
echo '<ul>';
foreach($posts as $post) {
echo '<li>' . get_the_title($post->ID) . ' - <a href="' . get_permalink($post->ID) . '">' . __('View post', 'aad') . '</a></li>';
}
echo '</ul>';
else :
echo '<p>' . __('No results found', 'aad') . '</p>';
endif;
die();
}
add_action('wp_ajax_aad_get_results', 'aad_process_ajax');
/////////////////////////////////////////Yeah!All done!
|
/* 处理ajax的返回数据 */ function aad_process_ajax() { /*用nonce进行权限验证,以保证安全*/ if( !isset( $_POST[‘aad_nonce’] ) || !wp_verify_nonce($_POST[‘aad_nonce’], ‘aad-nonce’) ) die(‘Permissions check failed’); /* 输出一些查询数据 */ $posts = get_posts(array(‘post_type’ => ‘post’, ‘posts_per_page’ => 5)); if( $posts ) : echo ‘<ul>’; foreach($posts as $post) { echo ‘<li>’ . get_the_title($post->ID) . ‘ – <a href=”‘%20.%20get_permalink($post->ID)%20.%20′”>’ . __(‘View post’, ‘aad’) . ‘</a></li>’; } echo ‘</ul>’; else : echo ‘<p>’ . __(‘No results found’, ‘aad’) . ‘</p>’; endif; die(); } add_action(‘wp_ajax_aad_get_results’, ‘aad_process_ajax’); /////////////////////////////////////////Yeah!All done!
javascript文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
jQuery(document).ready(function($) {
$('#aad-form').submit(function() {
/*提交过程*/
/*让loading图标显示*/
$('#aad_loading').show();
/*让提交按钮不可用*/
$('#aad_submit').attr('disabled', true);
/*响应数据的准备*/
data = {
action: 'aad_get_results',
aad_nonce: aad_vars.aad_nonce
};
/*返回相应数据*/
$.post(ajaxurl, data, function (response) {
/*把返回数据显示在指定ID的节点*/
$('#aad_results').html(response);
/*隐藏loading图标*/
$('#aad_loading').hide();
/*让提交按钮可用*/
$('#aad_submit').attr('disabled', false);
});
return false;
});
}
|
下载完整的示例