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

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

aad=Adding Ajax support in wordpress aDmin （总不能全是A吧）

defined( 'ABSPATH' )  or exit;

其实越少越好！

defined('AAD_PLUGIN_URL') or define('AAD_PLUGIN_URL', plugin_dir_url( __FILE__ ));

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

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() {
    
    global $aad_settings;
    
    //$aad_settings = add_options_page(__('Admin Ajax Demo', 'aad'), __('Admin Ajax', 'aad'), 'manage_options', 'admin-ajax-demo', 'aad_render_admin');
    
     
    //$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);
    
    $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');

下面的示例采用插件/主题自带图片的方案仅供参考，建议使用图标字体，下面使用了Wordpress自带的dashicons字体：

function aad_style(){
    
    
    //$output='<style>#toplevel_page_admin-ajax-demo .wp-menu-image img{width:20px;height:20px;}</style>';
    
    $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_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="https://www.wpdaxue.com/<?php echo admin_url('/images/wpspin_light.gif'); ?>" class="waiting" id="aad_loading" style=""/>
            </div>
        </form>
        <!-- 用于显示结果的自定义节点 -->
        <div id="aad_results"></div>
    </div>
    <?php
}

function aad_load_scripts($hook) {
    global $aad_settings;
    
    if( $hook != $aad_settings )
        return;
    
    wp_enqueue_script('aad-ajax', AAD_PLUGIN_URL . 'js/aad-ajax.js', array('jquery'));
    
    wp_localize_script('aad-ajax', 'aad_vars', array(
            'aad_nonce' => wp_create_nonce('aad-nonce')
        )
    );
}
add_action('admin_enqueue_scripts', 'aad_load_scripts');

function aad_process_ajax() {
    
    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="https://www.wpdaxue.com/' . 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!

jQuery(document).ready(function($) {
    $('#aad-form').submit(function() {
        
        
        $('#aad_loading').show();
        
        $('#aad_submit').attr('disabled', true);
        
      data = {
        action: 'aad_get_results',
        aad_nonce: aad_vars.aad_nonce
      };
        
        $.post(ajaxurl, data, function (response) {
            
            $('#aad_results').html(response);
            
            $('#aad_loading').hide();
            
            $('#aad_submit').attr('disabled', false);
        });
        return false;
    });
});