つかいます AJAX ショートコードで
私は、ランダムな引用を表示するために、ショートコードに以下のコードを持っています。質問：ボタンに新しいランダム見積もりを表示させる方法は？つまり、ボタンを押すと新しい見積もりが表示されます（もちろんページは更新されません）。
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;
});
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' );
オプション：ロード画面の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_footer()が含まれている場合は、フッターに印刷されます。
使い方：
- ショートコードコールバックを
add_shortcode()で登録します。 - ショートコードコールバックで、スクリプトを登録してから出力を返します。
- スクリプトで更新ボタンを追加し、POSTリクエストを
admin_url( 'admin-ajax.php' )に送信して新しいデータを取得します。返されたデータをショートコード付きの要素に挿入します。
これを行うサンプルスクリプトがあります。 2つのファイル：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 );
});
ブログ投稿の結果：
