如何在WordPress短代码中使用AJAX？

我有一个代码来显示一个随机的报价。 一个人写了一个函数来实现所有这些。 但由于某些原因通过AJAX更新数据不起作用。 当你按下“新报价”button，没有任何反应。 也许有人知道为什么？ 在下面的代码中需要解决什么问题，以便在单击“新报价”时加载新的报价？

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>'; ?>

HTML结构

在页面内容，小部件或模板文件中： 

 <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>

这显然可以适应你的喜好，但是为了这个例子，这就是我们要做的。
稍后我们将通过简码生成上述内容。

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; });

的functions.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' );

如何在WordPress中使用AJAX更新页面上的内容？

很好的问题！

但是，当你的代码从一个不好的做法开始 – require_once('wp-load.php'); – ，我决定select我的工作片段之一，并适应它。

观察 ：

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

/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://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 });

在这里插入示例作为问题的答案。 在前端使用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'); }); });

WordPress的短码相同的function，你给参数，

为了创build一个Ajax请求，你可以在你的头文件或者函数文件中使用jQuery.ajax或者xmlhttp和add_action wp_head钩子。

你应该在你的主题文件夹中创buildajax.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 }?>

触发器中使用的select器与buttonID不匹配。

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

Interesting Posts