最近小編在開發一款自適應的 WordPress 部落格主題,該 WordPress 主題大量資料展示與提交都用到了 ajax 技術,所以小編特意寫一篇教程記錄下,方便其他 WordPress 開發者做 WordPress ajax 應用開發的時候做參考。如果有些小夥伴還不知道什麼是 ajax,請自行百度腦補~~,閒話就不多說了,教程開始。

不少開發者在寫外掛時喜歡用以下方式實現 ajax:

require_once( '../../../../wp-config.php' );

就連百度站長平臺官方開發的 WordPress 結構化資料提交外掛也是如此實現 ajax 的,這是一種極其不合理的寫法,因為一旦使用者設定的目錄不同, 相對路徑就會失效. 並且, 如果你在你的外掛中使用的是物件導向的寫法, 你將無法直接使用一些變數和私有方法. 最大的壞處就是會導致整個 WordPress 的框架額外重新載入一遍,嚴重的影響了網站的執行效率。

其實,WordPress 為了方便開發者開發帶有 ajax 功能的外掛主題已經預定義好了 ajax 方法,我們只需按照官方預留的方法去使用就好了。在開發 WordPress ajax 你要先了解的是,不管是後臺還是前臺任何的 Ajax 請求都是在 admin-ajax.php 處理的,向 admin-ajax.php 傳送請求的時候, 有一個必須的引數是 $_REQUEST['action'], 因為 admin-ajax.php 需要根據使用者是否登陸了來觸發不同的 hooks 。

if ( is_user_logged_in() ) {
    /**
     * Fires authenticated AJAX actions for logged-in users.
     *
     * The dynamic portion of the hook name, `$_REQUEST['action']`,
     * refers to the name of the AJAX action callback being fired.
     *
     * @since 2.1.0
     */
    do_action( 'wp_ajax_' . $_REQUEST['action'] );
} else {
    /**
     * Fires non-authenticated AJAX actions for logged-out users.
     *
     * The dynamic portion of the hook name, `$_REQUEST['action']`,
     * refers to the name of the AJAX action callback being fired.
     *
     * @since 2.8.0
     */
    do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );
}

以上程式碼取自 WordPress 系統檔案 admin-ajax.php,從以上程式碼我們可以看出我們要發起一個請求首先要知道這個請求是否在登入狀態下發起的?不同狀態觸發的 hook 也不一樣,下面是個在主題利用 jquery 實現 ajax 的示例程式碼:

add_action( 'wp_head', 'v7v3AjaxScript');
function v7v3AjaxScript(){
    print '<script>var wxd_ajaxurl = "'. admin_url( 'admin-ajax.php' ) . '"' . ";</script>
";
    print "<script>
    $(docunment).ready(function(){
        $.ajax( {
            url: wxd_ajaxurl,
            data:{
                action : 'is_login'
            },
            type:'post',
            cache:false,
            success:function(data) {
                alert(data);
            }
        });
    });
    </scrip>";
}

add_action( 'wp_ajax_nopriv_is_login', 'wxd_ajax_not_login' );
add_action( 'wp_ajax_is_login', 'wxd_ajax_is_login' );

function wxd_ajax_is_login(){
    global $current_user;
    get_currentuserinfo();
    printf( '登入使用者您好 : %s!', $current_user->display_name );
    //函式結束前的 die 或 exit 很重要,一定要加。
    die;
}

function wxd_ajax_not_login(){
    print '尊敬的訪客您好!';
    //函式結束前的 die 或 exit 很重要,一定要加。
    die;
}

在開發 WordPress ajax 應用中最重要的一點就是函式結束之前一定要加 die 或者 exit,如果不加的話會把整個 WordPress 框架都重新載入一遍。