问题描述
我有以下代码到短码显示随机报价。问题：如何让按钮显示一个新的随机报价？我的意思是，这将按钮，并显示一个新的报价 (不刷新页面当然) 。
function random_quote() {
// quotes file
$array = file("/path to txt file");
// generate a random number between 0 and the total count of $array minus 1
// we minus 1 from the total quotes because array indices start at 0 rather than 1 by default
$r = rand(0,count($array)-1);
// return the quote in the array with an indices of $r - our random number
return $array[rand(0,count($array)-1)];
}
add_shortcode( 'randomquotes', 'random_quote');
我对如何使用 WordPress 中的 ajax 更新页面上的内容感兴趣？在我的情况下，因为其实就是这样。
对不起，我的英语不好。我希望你能理解我。谢谢！
最佳解决方法
首先，这在 WPSE 的范围内是非常接近的，它在所有。除了引发初始 HTML 输出的短码之外，这只是 AJAX 。
无论如何，就这样说，这是如何做的：
PHP
假设您提供的上述 PHP 代码段是有效的，请将以下内容放在用于 ajax 调用的 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>';
?>
以供将来参考，以使此答案对其他人有用：请注意，为了使用本机 WordPress 功能，必须包含 wp-load.php 。最常见的情况可能是需要 WP_Query 或 $wpdb 。
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;
});
把它放在一起 function.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' );
可选：加载屏幕的 css
.ajax-loading-screen {
display: none;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff; /* the background of your site or the container of the quote */
filter: alpha(opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: opacity .1s;
-moz-transition: opacity .1s;
-ms-transition: opacity .1s;
-o-transition: opacity .1s;
transition: opacity .1s;
z-index: 9999;
}
.ajax-loading-screen img {
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}
资源/阅读
-
wp_localize_script()– codex -
jQuery.ajax– jQuery API 文档
次佳解决方法
您可以在短码中注册脚本。它将被打印到页脚中，给定主题包含 wp_footer()。
怎么运行的：
-
使用
add_shortcode()注册短码回调。 -
在短码回调中，注册脚本，然后返回输出。
-
在脚本中添加更新按钮，向
admin_url( 'admin-ajax.php' )发送 POST 请求并获取新数据。将返回的数据插入到具有短代码的元素中。
这是一个示例脚本。两个文件：一个 PHP 类和一个 JavaScript 文件。两者都应该位于同一目录下，例如 ajax-shortcode-demo 。
ajax-shortcode-demo.php
<?php
/**
* Plugin Name: AJAX Shortcode Demo
* Description: How to use AJAX from a shortcode handler named <code>[ajaxdemo]</code>.
*/
add_action( 'wp_loaded', array ( 'Ajax_Shortcode_Demo', 'get_instance' ) );
class Ajax_Shortcode_Demo
{
/**
* Current plugin instance
*
* @type NULL|object
*/
protected static $instance = NULL;
/**
* Unique action name to trigger our callback
*
* @type string
*/
protected $ajax_action = 'load_demo_data';
/**
* CSS class for the shortcode, reused as JavaScript handle.
*
* Must be unique too.
*
* @type string
*/
protected $shortcode_class = 'ajaxdemo';
/**
* Remeber if we had regsitered a script on a page already.
*
* @type boolean
*/
protected $script_registered = FALSE;
/**
* Create a new instance.
*
* @wp-hook wp_loaded
* @return object $this
*/
public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Constructor. Register shortcode and AJAX callback handlers.
*/
public function __construct()
{
add_shortcode( 'ajaxdemo', array ( $this, 'shortcode_handler' ) );
// register the AJAX callback
$callback = array ( $this, 'ajax_callback' );
// user who are logged in
add_action( "wp_ajax_$this->ajax_action", $callback );
// anonymous users
add_action( "wp_ajax_nopriv_$this->ajax_action", $callback );
}
/**
* Render the shortcode.
*/
public function shortcode_handler()
{
$this->register_scripts();
return sprintf(
'<div class="%1$s"><b>%2$s</b></div>',
$this->shortcode_class,
$this->get_rand()
);
}
/**
* Return AJAX result.
*
* Must 'echo' and 'die'.
*
* @wp-hook wp_ajax_$this->ajax_action
* @wp-hook wp_ajax_nopriv_$this->ajax_action
* @return int
*/
public function ajax_callback()
{
echo $this->get_rand();
exit;
}
/**
* Random number.
*
* @return int
*/
protected function get_rand()
{
return rand( 1, 1000 );
}
/**
* Register script and global data object.
*
* The data will be printent before the linked script.
*/
protected function register_scripts()
{
if ( $this->script_registered )
return;
$this->script_registered = TRUE;
wp_register_script(
// unique handle
$this->shortcode_class,
// script URL
plugin_dir_url( __FILE__ ) . '/jquery-ajax-demo.js',
// dependencies
array ( 'jquery'),
// version
'v1',
// print in footer
TRUE
);
wp_enqueue_script( $this->shortcode_class );
$data = array (
// URL address for AJAX request
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
// action to trigger our callback
'action' => $this->ajax_action,
// selector for jQuery
'democlass' => $this->shortcode_class
);
wp_localize_script( $this->shortcode_class, 'AjaxDemo', $data );
}
}
jquery-ajax-demo.js
jQuery( function( $ ) {
var buttonClass = AjaxDemo.democlass + 'Button',
// insert AJAX result into the shortcode element
updateDemo = function( response ){
$( '.' + AjaxDemo.democlass ).find( 'b' ).html( response );
},
// fetch AJAX data
loadDemo = function() {
$.post( AjaxDemo.ajaxUrl, { action: AjaxDemo.action }, updateDemo );
};
// add an update button
$( '.' + AjaxDemo.democlass )
.append( ' <button class="' + buttonClass + '">New</button>' );
// assign the clock handler to the button
$( '.' + buttonClass ).click( loadDemo );
});
导致博客文章：
参考文献
注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。