問題描述
我有以下程式碼到短碼顯示隨機報價。問題：如何讓按鈕顯示一個新的隨機報價？我的意思是，這將按鈕，並顯示一個新的報價 (不重新整理頁面當然) 。
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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。