這篇文章說(shuō)下如何為自制的Wordpress主題/插件的設(shè)置后臺(tái)添加ajax支持。
aad=Adding Ajax support in wordpress aDmin （總不能全是A吧）
PHP部分
安全第一
/*Exit if accessed directly:安全第一,如果是直接載入,就退出.*/
defined( 'ABSPATH' ) or exit;
定義一些用得上的常量
其實(shí)越少越好！
/*Define a(some) Constant(s):定義常量(沒(méi)有復(fù)數(shù)的中文的優(yōu)勢(shì)顯示出來(lái)了吧)*/
defined('AAD_PLUGIN_URL') or define('AAD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
I18n=國(guó)際化支持
其實(shí)就是做個(gè)語(yǔ)言包，讓使用者可以自行翻譯語(yǔ)言包。
/*
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' );
添加菜單項(xiàng)
function aad_admin_page() {
/*添加菜單，并指定一個(gè)全局Hook給它*/
global $aad_settings;
/*
Add sub menu page to the Settings menu:這個(gè)API將會(huì)把你想添加的菜單添加到setting(設(shè)置)菜單下;
add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);
我們要將自己的菜單添加為頂級(jí)菜單，所以，不用這個(gè)了。
*/
//$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=替代原有的儀表盤(pán)(首頁(yè)),不合適;
4 Separator=儀表盤(pán)(首頁(yè))和文章之間分割線的位置;
5 Posts=儀表盤(pán)(首頁(yè))和文章之間正常的位置,這時(shí)候它和儀表盤(pán)(首頁(yè))的分割線還在
10 Media=替代原有的多媒體的位置;
15 Links=在新版本的Wordpress中,Link功能默認(rèn)是隱藏的，也就是默認(rèn)的，你是看不到這個(gè)菜單項(xiàng)的，所以這個(gè)位置也是可以的;
20 Pages=替代菜單項(xiàng)“頁(yè)面”,不合適;
25 Comments=替代菜單項(xiàng)“評(píng)論”,不合適;
59 Separator=替代評(píng)論和外觀之間分割線的位置,可以;
60 Appearance=替代菜單項(xiàng)“外觀”,不合適;
65 Plugins=替代菜單項(xiàng)“插件”,不合適;
70 Users=替代菜單項(xiàng)“用戶”,不合適;
75 Tools=替代菜單項(xiàng)“工具”,不合適;
80 Settings=替代菜單項(xiàng)“設(shè)置”,不合適;
99 Separator=替代WP后臺(tái)菜單最下側(cè)的分割線的位置,合適;
可以更大嗎？可以。
*/
/*
使用自制的icon作為菜單項(xiàng)的標(biāo)志
*/
//$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);
/*
準(zhǔn)備使用wordpress自帶的dashicon作為菜單項(xiàng)的標(biāo)志,所以把$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');
美化下菜單項(xiàng)前面的icon
下面的示例采用插件/主題自帶圖片的方案僅供參考，建議使用圖標(biāo)字體，下面使用了Wordpress自帶的dashicons字體：
function aad_style(){
/*
css內(nèi)容較少的情況下,使用admin_head這個(gè)hook直接輸出比較合適;如果css內(nèi)容較多,使用自制的icon作為菜單項(xiàng)的標(biāo)志用admin_enqueue_scripts這個(gè)Hook載入css文件比較合適.
*/
/*
限制菜單項(xiàng)前面的icon的尺寸
*/
//$output='<style>#toplevel_page_admin-ajax-demo .wp-menu-image img{width:20px;height:20px;}</style>';
/*
使用Wordpress自帶的圖標(biāo)字體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');
設(shè)置頁(yè)面/后臺(tái)的HTML結(jié)構(gòu)
/*
開(kāi)始處理頁(yè)面輸出
*/
function aad_render_admin() {
?>
<div class="wrap">
<h2><?php _e('Admin Ajax Demo', 'aad'); ?></h2>
<!-- 一個(gè)很簡(jiǎn)單的示例表單 -->
<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>
<!-- 用于顯示結(jié)果的自定義節(jié)點(diǎn) -->
<div id="aad_results"></div>
</div>
<?php
}
載入ajax的js文件
/*
載入ajax的js文件
*/
function aad_load_scripts($hook) {
global $aad_settings;
/*用上了前面定義的全局菜單Hook,如果不是這個(gè),就返回*/
if( $hook != $aad_settings )
return;
/*載入ajax的js文件,也可以載入其他的javascript和/或css等*/
wp_enqueue_script('aad-ajax', AAD_PLUGIN_URL . 'js/aad-ajax.js', array('jquery'));
/*
創(chuàng)建驗(yàn)證nonce
它會(huì)輸出類(lèi)似于：
<![CDATA[
var aad_vars = {"aad_nonce":"5c18514d34"};
]]>
之類(lèi)的被注釋掉的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的響應(yīng)
/*
處理ajax的返回?cái)?shù)據(jù)
*/
function aad_process_ajax() {
/*用nonce進(jìn)行權(quán)限驗(yàn)證，以保證安全*/
if( !isset( $_POST['aad_nonce'] ) || !wp_verify_nonce($_POST['aad_nonce'], 'aad-nonce') )
die('Permissions check failed');
/*
輸出一些查詢數(shù)據(jù)
*/
$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!
javascript文件
jQuery(document).ready(function($) {
$('#aad-form').submit(function() {
/*提交過(guò)程*/
/*讓loading圖標(biāo)顯示*/
$('#aad_loading').show();
/*讓提交按鈕不可用*/
$('#aad_submit').attr('disabled', true);
/*響應(yīng)數(shù)據(jù)的準(zhǔn)備*/
data = {
action: 'aad_get_results',
aad_nonce: aad_vars.aad_nonce
};
/*返回相應(yīng)數(shù)據(jù)*/
$.post(ajaxurl, data, function (response) {
/*把返回?cái)?shù)據(jù)顯示在指定ID的節(jié)點(diǎn)*/
$('#aad_results').html(response);
/*隱藏loading圖標(biāo)*/
$('#aad_loading').hide();
/*讓提交按鈕可用*/
$('#aad_submit').attr('disabled', false);
});
return false;
});
});
下載完整的示例
http://pan.baidu.com/s/1qWFaKva 或下載本站備份
聲明：本站所有文章，如無(wú)特殊說(shuō)明或標(biāo)注，均為本站原創(chuàng)發(fā)布。任何個(gè)人或組織，在未征得本站同意時(shí)，禁止復(fù)制、盜用、采集、發(fā)布本站內(nèi)容到任何網(wǎng)站、書(shū)籍等各類(lèi)媒體平臺(tái)。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。
ajax的提交的地址是全局變量ajaxurl，實(shí)際上是”/wp-admin/admin-ajax.php”，這是后臺(tái)通用的ajax請(qǐng)求地址，然后請(qǐng)求一個(gè)自定義的action參數(shù)，另外加上nounce防CSRF攻擊參數(shù)，如果自定義action為A，那么需要掛載到wp_ajax_A，如： add_action(‘wp_ajax_A’, ‘A_function’);然后在A_function里寫(xiě)ajax返回的內(nèi)容，里面用wp_die()或die()結(jié)束輸出。
總結(jié)下來(lái)這就是后臺(tái)的ajax處理，請(qǐng)問(wèn)前臺(tái)處理ajax一般是怎么處理的？
牛逼
收藏了，這個(gè)真棒！