¿Cómo utilizar AJAX en un código corto de WordPress?
Tengo un código para mostrar una cotización aleatoria. Una persona escribió una función para implementar todo esto. Pero la actualización de datos a través de AJAX por alguna razón no funciona. Cuando presionas el botón "Nueva Cotización", no sucede nada. ¿Quizás alguien sepa por qué? ¿Qué se debe corregir en el siguiente código para que cuando haga clic en "Nueva cotización" se cargue una nueva cotización?
El PHP
/wp-content/themes/%your_theme%/js/ajax-load-quote.php
<?php
/* uncomment the below, if you want to use native WP functions in this file */
// require_once('../../../../wp-load.php');
$array = file( $_POST['file_path'] ); // file path in $_POST, as from the js
$r = rand( 0, count($array) - 1 );
return '<p>' . $array[$r] . '</p>';
?>
La estructura HTML
En el contenido de una página, un widget o un archivo de plantilla:
<div id="randomquotes">
<p>I would rather have my ignorance than another man’s knowledge,
because I have so much more of it.<br />
-- Mark Twain, American author & Playwright</p>
</div>
<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>
Obviamente puedes ajustar esto a tu gusto, pero por el bien de este ejemplo, esto es lo que vamos a hacer.
Generaremos lo anterior a través de un código corto más adelante.
El jQuery
/wp-content/themes/%your_theme%/js/ajax-load-quote.js
function ajaxQuote() {
var theQuote = jQuery.ajax({
type: 'POST',
url: ajaxParams.themeURI+'js/ajax-load-quote.php',
/* supplying the file path to the ajax loaded php as a $_POST variable */
data: { file_path: ajaxParams.filePath },
beforeSend: function() {
ajaxLoadingScreen(true,'#randomquotes');
},
success: function(data) {
jQuery('#randomquotes').find('p').remove();
jQuery('#randomquotes').prepend(data);
},
complete: function() {
ajaxLoadingScreen(false,'#randomquotes');
}
});
return theQuote;
}
/* Loading screen to be displayed during the process, optional */
function ajaxLoadingScreen(switchOn,element) {
/* show loading screen */
if (switchOn) {
jQuery(''+element).css({
'position': 'relative'
});
var appendHTML = '<div class="ajax-loading-screen appended">
<img src="'+ajaxParams.themeURI+'images/ajax-loader.gif"
alt="Loading ..." width="16" height="16" /></div>';
if( jQuery(''+element).children('.ajax-loading-screen').length === 0 ) {
jQuery(''+element).append(appendHTML);
}
jQuery(''+element).children('.ajax-loading-screen').first().css({
'display': 'block',
'visibility': 'visible',
'filter': 'alpha(opacity=100)',
'-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"',
'opacity': '1'
});
} else {
/* hide the loading screen */
jQuery(''+element).children('.ajax-loading-screen').css({
'display': '',
'visibility': '',
'filter': '',
'-ms-filter': '',
'opacity': ''
});
jQuery(''+element).css({
'position': ''
});
}
}
/* triggering the above via the click event */
jQuery('#newquotes').click( function() {
var theQuote = ajaxQuote();
return false;
});
funciones.php
/wp-content/themes/%your_theme%/functions.php
function random_quote( $atts ) {
/* extracts the value of shortcode argument path */
extract( shortcode_atts( array(
'path' => get_template_directory_uri() . '/quotes.txt' // default, if not set
), $atts ) );
$array = file( $path );
$r = rand( 0, count($array) - 1 );
$output = '<div id="randomquotes">' .
'<p>' . $array[$r] . '</p>' .
'</div>' .
'<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>';
/* enqueue the below registered script, if needed */
wp_enqueue_script( 'ajax-quote' );
/* supplying the file path to the script */
wp_localize_script(
'ajax-quote',
'ajaxParams',
array(
'filePath' => $path,
'themeURI' => get_template_directory_uri() . '/'
)
);
return $output;
}
add_shortcode( 'randomquotes', 'random_quote');
/* register the js */
function wpse72974_load_scripts() {
if ( ! is_admin() ) {
wp_register_script(
'ajax-quote',
get_template_directory_uri() . '/js/ajax-load-quote.js',
array( 'jquery' ),
'1.0',
true
);
}
}
add_action ( 'init', 'wpse72974_load_scripts' );
¿Cómo se puede actualizar el contenido de la página usando AJAX en WordPress?
Aceptado
¡Buena pregunta!
Pero, como su código comienza con una mala práctica require_once('wp-load.php');, decidí elegir uno de mis fragmentos de trabajo y adaptarlo.
Observaciones :
- A diferencia de su código , no
quotes.txtse captura ningún externo, aquí se usa un tipo de publicación como fuente (post), en el métodoget_random_post - Solo puede haber una instancia del shortcode en una página determinada, ya que se basa en ID de elementos específicos (
#newpost-shortcodey#randomposts). - Como siempre, es mejor crear un complemento para esto. Siga los comentarios del código.
/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' => 'https://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-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
});
Aquí un complemento de muestra como respuesta a la pregunta. Usando ajaxurl en la interfaz.
citas-tan-aleatorias.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)];
}
}
cargador-de-comillas.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');
});
});
