当前位置:首页>WordPress建站>WordPress开发>为自制WordPress主题/插件的后台设置页面添加ajax支持

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

WordPress 主题 CoreNext

这篇文章说下如何为自制的Wordpress主题/插件的设置后台添加ajax支持。

aad=Adding Ajax support in wordpress aDmin (总不能全是A吧)

PHP部分

安全第一

/*Exit if accessed directly:安全第一,如果是直接载入,就退出.*/
defined( 'ABSPATH' )  or exit;

定义一些用得上的常量

其实越少越好!

/*Define a(some) Constant(s):定义常量(没有复数的中文的优势显示出来了吧)*/
defined('AAD_PLUGIN_URL') or define('AAD_PLUGIN_URL', plugin_dir_url( __FILE__ ));

I18n=国际化支持

其实就是做个语言包,让使用者可以自行翻译语言包。

/*
    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' );

添加菜单项

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字体:

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结构

/*
开始处理页面输出
*/
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
}

载入ajax的js文件

/*
载入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的响应

/*
处理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!

javascript文件

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

下载完整的示例

http://pan.baidu.com/s/1qWFaKva下载本站备份

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

WordPress 用代码临时更换主题

2014-4-8 20:57:07

WordPress开发

无插件为你 WordPress 站点添加移动端样式

2014-4-25 9:39:24

3 条回复 A文章作者 M管理员
  1. ajax的提交的地址是全局变量ajaxurl,实际上是”/wp-admin/admin-ajax.php”,这是后台通用的ajax请求地址,然后请求一个自定义的action参数,另外加上nounce防CSRF攻击参数,如果自定义action为A,那么需要挂载到wp_ajax_A,如: add_action(‘wp_ajax_A’, ‘A_function’);然后在A_function里写ajax返回的内容,里面用wp_die()或die()结束输出。

    总结下来这就是后台的ajax处理,请问前台处理ajax一般是怎么处理的?

  2. 牛逼

  3. WP酷

    收藏了,这个真棒!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索