如何在 WordPress 短码中使用 AJAX？

问得好！

但是，由于您的代码以一个不好的实践 require_once('wp-load.php');开始，我决定选择一个工作代码片段并对其进行改写。

观察结果 :

• 与您的代码 不同，在方法 get_random_post中，没有抓取外部 quotes.txt，这里使用 Post Type 作为源(post)
• 在给定的页面中只能有一个短代码实例 ，因为它基于特定的元素 ID (#newpost-shortcode和 #randomposts)
• 像往常一样，最好创建一个插件为此。

/wp-content/plugins/so-ajax-short code/so-ajax-short code. php

<?php
/**
* Plugin Name: (SO) Ajax Shortcode
* Description: Demonstration of WordPress Ajax working as a shortcode.
* Plugin URI:  http://stackoverflow.com/a/13614297/1287812
* Version:     2013.10.25
* Author:      Rodolfo Buaiz
* Author URI:  https://wordpress.stackexchange.com/users/12615/brasofilo
* License:     GPLv3
*/


add_action(
'plugins_loaded',
array ( B5F_SO_13498959::get_instance(), 'plugin_setup' )
);


class B5F_SO_13498959
{
private $cpt = 'post'; # Adjust the CPT
protected static $instance = NULL;
public $plugin_url = '';
public function __construct() {}


public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}


/**
* Regular plugin work
*/
public function plugin_setup()
{
$this->plugin_url = plugins_url( '/', __FILE__ );
add_shortcode( 'randomposts', array( $this, 'shortcode') );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_action( 'wp_ajax_query_rand_post', array( $this, 'query_rand_post' ) );
add_action( 'wp_ajax_nopriv_query_rand_post', array( $this, 'query_rand_post' ) );
}


/**
* SHORTCODE output
*/
public function shortcode( $atts )
{
# First post
if( ! $random_post = $this->get_random_post() )
$random_post = __( 'Could not retrieve a post.' );
# Prepare output
$output = sprintf(
'<div id="randomposts">%s</div>
<button id="newpost-shortcode" type="button" title="%s">%s</button>',
$random_post,
__( 'Gimme a new one!' ),
__( 'New random post' )
);
return $output;
}


/**
* ACTION Enqueue scripts
*/
public function enqueue()
{
# jQuery will be loaded as a dependency
## DO NOT use other version than the one bundled with WP
### Things will BREAK if you do so
wp_enqueue_script(
'ajax-random-post',
"{$this->plugin_url}ajax.js",
array( 'jquery' )
);
# Here we send PHP values to JS
wp_localize_script(
'ajax-random-post',
'wp_ajax',
array(
'ajaxurl'      => admin_url( 'admin-ajax.php' ),
'ajaxnonce'   => wp_create_nonce( 'ajax_post_validation' ),
'loading'    => 'http://i.stack.imgur.com/drgpu.gif'
)
);
}


/**
* AJAX query random post
*
* Check for security and send proper responses back
*/
public function query_rand_post()
{
check_ajax_referer( 'ajax_post_validation', 'security' );
$random_post = $this->get_random_post();
if( !isset( $random_post ) )
wp_send_json_error( array( 'error' => __( 'Could not retrieve a post.' ) ) );
else
wp_send_json_success( $random_post );
}


/**
* AUX FUNCTION
* Search a random Post Type and return the post_content
*/
public function get_random_post()
{
$array = get_posts(
array(
'post_type' => $this->cpt,
'numberposts' => -1
)
);
if( empty( $array ) )
return false;


# Select a random post index number from the current array
$r = rand( 0, count($array) - 1 );
return $array[$r]->post_content;
}
}

/wp-content/plugins/so-ajax-short code/ajax.js

/*
* @plugin SO Ajax Shortcode
*/


jQuery( document ).ready( function( $ )
{
var data = {
action: 'query_rand_post',
security: wp_ajax.ajaxnonce
};
var image = '<img src="' + wp_ajax.loading + '" alt="Loading ..." width="16" height="16" />';


$( '#newpost-shortcode' ).click( function(e)
{
e.preventDefault();
$( '#randomposts' ).html( image );
$.post(
wp_ajax.ajaxurl,
data,
function( response )
{
// ERROR HANDLING
if( !response.success )
{
// No data came back, maybe a security error
if( !response.data )
$( '#randomposts' ).html( 'AJAX ERROR: no response' );
else
$( '#randomposts' ).html( response.data.error );
}
else
$( '#randomposts' ).html( response.data );
}
);
}); // end click
});

Wordpress 的短代码和给参数的函数一样,

为了创建 ajax 请求，可以使用 jQuery.ajax 或 xmlhttp 在头文件或函数文件中使用 add_action wp_head挂钩。

您应该在主题文件夹中创建 ajax.php，并在文件的顶部包含 wp-load.php。把你所有的 ajax 函数放在合适的位置。

这里的例子插件作为答案的问题。使用 ajaxurl 在前端。

所以-随机-引用.php

<?php
/*
Plugin Name: SO Random Quotes
Plugin URI: http://azzrael.ru
Description: Reference to http://stackoverflow.com/questions/13498959/how-to-use-ajax-in-a-wordpress-shortcode
Version: 1.0.0
Author: Azzrael
Author URI: http://azzrael.ru
*/


new SoRandomQuotes();


/**
* Class SoRandomQuotes
*/
class SoRandomQuotes{


const SHORTCODE_KEY = 'randomquotes'; // usage [randomquotes path='/path/to/file/another.quotes.csv']
const AJAX_ACTION = 'so_getnewquote'; // ajax action
const DOM_TARGET =  'randomquotes'; // dom element to put the quotes


/**
* SoRandomQuotes constructor.
* init actions
*/
function __construct() {
// adding shortcode
add_shortcode('randomquotes', array($this, 'addShortcode'));


// adding ajax callbacks
add_action( 'wp_ajax_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // admin
add_action( 'wp_ajax_nopriv_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // front
}


/**
* Shortcode callback
* @param $atts
* @return string
*/
public function addShortcode($atts){


// getting path value from shortcode atts
$got =shortcode_atts( array(
'path'    => plugin_dir_path( __FILE__ ).'quotes.txt',
), $atts );


// shortcode replacement
$out = sprintf(
'<div id="%s">%s</div><a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>',
self::DOM_TARGET,
$this->getQuote($got['path'])
);


// loading js
// jquery depends
wp_enqueue_script('sorandquo-js', plugin_dir_url( __FILE__ ).'quote-loader.js', array('jquery'));
// passing to js needed vars
wp_localize_script( 'sorandquo-js', 'ajaxParams',
array(
'path'      => $got['path'], // path to qoutes file
'targetDom' => '#'.self::DOM_TARGET, // dom path to put resulting qoute
'ajaxurl'   => admin_url( 'admin-ajax.php'), // for frontend ( not admin )
'action'    => self::AJAX_ACTION, //
)
);


// render shortcode replacement
return $out;
}


/**
* Ajax Callback
*/
public function getQuoteAjax(){
echo $this->getQuote($_POST['path']);
die();
}


/**
* Getting random Qoute from the file
* @param $path
* @return mixed
*/
public function getQuote($path){
$quotesFile = is_file($path) ? file_get_contents($path):"File {$path} not found";
$quotesArr = $quotesFile ? explode("\n", $quotesFile):['Quotes File is empty'];
return $quotesArr[array_rand($quotesArr)];
}


}

引用加载程序 js

jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click', '#newquote', function (e) {
e.preventDefault();


$.post(ajaxParams.ajaxurl, {
'action':ajaxParams.action,
'path'  :ajaxParams.path
}, function (ret) {
$(ajaxParams.targetDom).html(ret);
}, 'html');
});
});

在 function. php 中添加这个函数:

    <?php
add_action('wp_head','ajaxurl');
function ajaxurl()
{
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}?>

触发器中使用的选择器与按钮 ID 不匹配。

将 jQuery('#newquotes')改为 jQuery('#newquote')