Как использовать AJAX в шорткодах (shortcodes) в Wordpress

На стеке попался такой бородаты вопрос http://stackoverflow.com/questions/13498959/how-to-use-ajax-in-a-wordpress-shortcode Как использовать ajax в шорткодах вордпресса. В свое время я активно использовал и то и другое, на давно перестал. Стало любопытно как быстро у меня получится оформить ответ на этот вопрос в виде простенького плагина. Получился так себе результат — около 40 минут кодинга без использования сниппетов + 26 минут на собственно понимание вопроса. Но пусть это будет здесь.

Получился плагин из 3х файлов. Скачать архив можно по so-random-quotes.

Текстовка котировок. Ну тут входных данных задано не было. Поэтому просто от фонаря.
JS, который подгружается при обрабоке шорткода и обрабатывает ивент клика по кнопке Дайте новую Котировку
Ну и собственно код плагина. Подробности в комментах в коде.

so-random-quotes.php

<?php
/*
Plugin Name: SO Random Quotes
Plugin URI: https://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: https://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)];
	}

}

<?php

Plugin Name: SO Random Quotes

Plugin URI: https://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: https://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)];

}

quote-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');

});

Похожие статьи