wordpress主题ajax,为自制WordPress主题/插件的后台设置页面添加ajax支持

本文目录

[隐藏]

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='';

/*

使用Wordpress自带的图标字体dashicons;

更多详情:http://suoling.net/wordpress-dashicons/

*/

$output='';

echo $output;

}

add_action('admin_head','aad_style');

function aad_style(){ /* css内容较少的情况下,使用admin_head这个hook直接输出比较合适;如果css内容较多,使用自制的icon作为菜单项的标志用admin_enqueue_scripts这个Hook载入css文件比较合适. */ /* 限制菜单项前面的icon的尺寸 */ //$output='’; /* 使用Wordpress自带的图标字体dashicons; 更多详情:http://suoling.net/wordpress-dashicons/ */ $output='’; 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() {

?>

<?php _e('Admin Ajax Demo', 'aad'); ?>

}

/* 开始处理页面输出 */ function aad_render_admin() { ?>

<?php _e(‘Admin Ajax Demo’, ‘aad’); ?>

”/> ” class=”waiting” id=”aad_loading” style=”display:none;”/>

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

它会输出类似于：

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 它会输出类似于： 之类的被注释掉的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 '

• ';

foreach($posts as $post) {

echo '

' . get_the_title($post->ID) . ' - ' . __('View post', 'aad') . '';

}

echo '

';

else :

echo '

' . __('No results found', 'aad') . '

';

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 ‘

• ’; foreach($posts as $post) { echo ‘
• ’ . get_the_title($post->ID) . ‘ – ID)%20.%20′”>’ . __(‘View post’, ‘aad’) . ‘’; } echo ‘

’; else : echo ‘

’ . __(‘No results found’, ‘aad’) . ‘

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

});

}

下载完整的示例