首先,这在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>\';
?>
供将来参考,并使此答案对其他人有用:请注意
wp-load.php
必须包含才能使用本机WordPress功能。最常见的情况可能是
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;
});
将其放在函数中。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()
- codexjQuery.ajax
- jQuery API Docsajaxload.info - loading gif generator