सबसे पहले, यह डब्ल्यूपीएसई के दायरे में बहुत ही सीमावर्ती है, यह बिल्कुल।
प्रारंभिक 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मूल वर्डप्रेस कार्यक्षमता का उपयोग करने के लिए इसे शामिल किया जाना चाहिए। सबसे commom मामले की संभावना या तो के लिए की जरूरत किया जा रहा है 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 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' );
वैकल्पिक: लोडिंग स्क्रीन के लिए सीएसएस
.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;
}
संसाधन / पढ़ना
