Как использовать AJAX в WordPress Shortcode?

Хороший вопрос!

Но, поскольку ваш код начинается с плохой практики – require_once('wp-load.php'); – Я решил выбрать один из моих рабочих фрагментов и адаптировать его.

Наблюдения :

• В отличие от вашего кода , внешний quotes.txt не захватывается, здесь тип Post используется как источник ( post ), в методе get_random_post
• В данной странице может быть только один экземпляр #newpost-shortcode , поскольку он основан на определенных идентификаторах элементов ( #newpost-shortcode #randomposts и #randomposts )
• Как обычно, для этого лучше создать плагин . Следуйте комментариям кодов.

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.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://img.ruphp.com/php/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-shortcode/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 }); 

Здесь пример плагина как ответ на вопрос. Использование ajaxurl во фронте.

так случайный quotes.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)]; } } 

цитата-loader.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'); }); }); в 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'); }); }); 

WordPress shortcode такой же, как функция, где вы указываете параметры,

для создания запроса ajax вы можете использовать jQuery.ajax или xmlhttp в своем заголовочном или функциональном файле с помощью add_action wp_head hook.

вы должны создать ajax.php в своей папке темы и в верхней части файла вы должны включить wp-load.php. и поместите все ваши функции ajax надлежащим образом.

Добавьте эту функцию в 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 }?> 

Селектор, используемый в триггере, не соответствует идентификатору кнопки.

Измените jQuery('#newquotes') на jQuery('#newquote')