如何在WordPress短代码中使用AJAX?
如何在WordPress短代码中使用AJAX?
我有一段代码可以展示一个随机的引用。一个人写了一个函数来实现所有这些。但是更新数据通过AJAX由于某种原因无法工作。当你按下“新引用”按钮时,没有任何反应。也许有人知道原因是什么?需要修复以下代码中的什么问题,才能在点击“新引用”时加载新的引用?
PHP
/wp-content/themes/%your_theme%/js/ajax-load-quote.php
HTML结构
在页面内容、小部件或模板文件中:
I would rather have my ignorance than another man’s knowledge, because I have so much more of it. -- Mark Twain, American author & Playwright
这当然可以根据你的喜好进行调整,但是为了这个例子的缘故,我们将使用这个。我们稍后将通过一个简码来生成上述内容。
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 = ' '; 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 = '' . '
' . $array[$r] . '
' . '' . 'New Quote'; /* 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更新页面内容?
这是一个用于回答问题的示例插件,前端使用ajaxurl。
so-random-quotes.php
plugin_dir_path( __FILE__ ).'quotes.txt', ), $atts ); // shortcode replacement $out = sprintf( '%sNew Quote', 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'); }); });
很好的问题!
但是,由于您的代码以不良习惯开始——require_once('wp-load.php');
——我决定选择我的一个工作片段并进行适应。
观察:
- 与您的代码不同,没有抓取外部
quotes.txt
文件,这里使用文章类型作为源(post
),在方法get_random_post
中 - 在给定页面中只能有一个实例的短代码,因为它基于特定的元素ID(
#newpost-shortcode
和#randomposts
) - 通常,最好为此创建一个插件。请遵循代码注释。
/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php
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( '%s ', $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 = ''; $( '#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 });