【WordPress】AJAX範例

範例來自於：WordPress AJAX for Beginners. 這個範例註冊一個短碼函式，在一個文章或頁面中，插入這個註冊的短碼來取得從前端傳來的資料。 從這個範例可以學到二件事：

• 如何撰寫、註冊、使用一個短碼函式。
• 如何使用AJAX將前端的資料傳送至後端。

短碼是WordPress裏的重要機制，可以在一個靜態的頁面或文章插入一個短碼，這個短碼會呼叫綁定的短碼函式，從短碼函式傳回結果。在頁面或文章中插入短碼的目的是要呼叫函式，透過函式的程式能力，經過計算取得所要的資料，就如同在程式呼叫函式一般。

wp-ajax-noob.php

<?php
/**
 * Plugin Name: WordPress AJAX Example for Beginners
 * Plugin URI: https://shellcreeper.com/wp-ajax-for-beginners/
 * Description: Example plugin from tutorial "WordPress AJAX for Beginners"
 * Version: 1.0.0
 * Author: David Chandra Purnama
 * Author URI: https://shellcreeper.com/
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain: wp-ajax-noob
 * Domain Path: /languages/
 *
 * @author David Chandra Purnama <david@genbumedia.com>
 * @copyright Copyright (c) 2016, Genbu Media
**/
if ( ! defined( 'WPINC' ) ) { die; }


/* 1. REGISTER SHORTCODE
------------------------------------------ */

/* Init Hook */
add_action( 'init', 'my_wp_ajax_noob_plugin_init', 10 );

/**
 * Init Hook to Register Shortcode.
 * @since 1.0.0
 */
function my_wp_ajax_noob_plugin_init(){

    /* Register Shortcode */
    add_shortcode( 'john-cena', 'my_wp_ajax_noob_john_cena_shortcode_callback' );

}

/**
 * Shortcode Callback
 * Just display empty div. The content will be added via AJAX.
 */
function my_wp_ajax_noob_john_cena_shortcode_callback(){

    /* Enqueue JS only if this shortcode loaded. */
    wp_enqueue_script( 'my-wp-ajax-noob-john-cena-script' );

    /* Output empty div. */
    return '<div id="john-cena"></div>';
}


/* 2. REGISTER SCRIPT
------------------------------------------ */

/* Enqueue Script */
add_action( 'wp_enqueue_scripts', 'my_wp_ajax_noob_scripts' );

/**
 * Scripts
 */
function my_wp_ajax_noob_scripts(){

    /* Plugin DIR URL */
    $url = trailingslashit( plugin_dir_url( __FILE__ ) );

    /* JS + Localize */
    wp_register_script( 'my-wp-ajax-noob-john-cena-script', $url . "assets/script.js", array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'my-wp-ajax-noob-john-cena-script', 'john_cena_ajax_url', admin_url( 'admin-ajax.php' ) );
}


/* 3. AJAX CALLBACK
------------------------------------------ */

/* AJAX action callback */
add_action( 'wp_ajax_john_cena', 'my_wp_ajax_noob_john_cena_ajax_callback' );
add_action( 'wp_ajax_nopriv_john_cena', 'my_wp_ajax_noob_john_cena_ajax_callback' );


/**
 * Ajax Callback
 */
function my_wp_ajax_noob_john_cena_ajax_callback(){
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    ?>
    <p>Hello. Your first name is <?php echo strip_tags( $first_name ); ?>.</p>
    <p>And your last name is <?php echo strip_tags( $last_name ); ?>.</p>
    <?php
    wp_die(); // required. to end AJAX request.
}

 

/assets/script.js

jQuery(document).ready(function($) {

    $.ajax({
        type: "POST",                 // use $_POST request to submit data
        url: john_cena_ajax_url,      // URL to "wp-admin/admin-ajax.php"
        data: {
            action     : 'john_cena', // wp_ajax_*, wp_ajax_nopriv_*
            first_name : 'John',      // PHP: $_POST['first_name']
            last_name  : 'Cena',      // PHP: $_POST['last_name']
        },
        success:function( data ) {
            $( '#john-cena' ).html( data );
        },
        error: function(){
            console.log(errorThrown); // error
        }
    });

});