Ich habe einen Code, um ein zufälliges Zitat anzuzeigen. Eine Person hat eine Funktion geschrieben, um all dies zu implementieren. Aber die Update-Daten über AJAX funktionieren aus irgendeinem Grund nicht. Wenn Sie die Taste "Neues Angebot" drücken, passiert nichts. Vielleicht weiß jemand warum? Was muss im folgenden Code behoben werden, damit beim Klicken auf "Neues Angebot" ein neues Angebot geladen wird?
Das 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>';
?>
Die HTML-Struktur
In einem Seiteninhalt, einem Widget oder einer Vorlagendatei:
<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>
Dies können Sie natürlich nach Ihren Wünschen anpassen, aber für dieses Beispiel gehen wir so vor.
Wir werden das oben genannte später über einen Shortcode generieren.
Die 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
/wp-content/themes/%your_theme%/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' );
Wie können Sie den Inhalt der Seite mit AJAX in WordPress aktualisieren?
admin-ajax.php
, wird diese Datei oben jedoch nicht angezeigt . Wie gehen Sie vor, um das Nonce auf dieser Seite zu überprüfen ?admin-ajax.php
ist eine Kern-WP-Datei, das müssen wir nicht anfassen.wp_localize_script
teilt JS die Parameter mit, die es benötigt, und das Nonce wirdcheck_ajax_referer
innerhalb der von Ajax aufgerufenen PHP-Funktion überprüft .Hier Beispiel-Plugin als Antwort auf die Frage. Mit Ajaxurl am Frontend.
so-random-quote.php
<?php /* Plugin Name: SO Random Quotes Plugin URI: http://azzrael.ru Description: Reference to http://stackoverflow.com/questions/13498959/how-to-use-ajax-in-a-wordpress-shortcode Version: 1.0.0 Author: Azzrael Author URI: http://azzrael.ru */ new SoRandomQuotes(); /** * Class SoRandomQuotes */ class SoRandomQuotes{ const SHORTCODE_KEY = 'randomquotes'; // usage [randomquotes path='/path/to/file/another.quotes.csv'] const AJAX_ACTION = 'so_getnewquote'; // ajax action const DOM_TARGET = 'randomquotes'; // dom element to put the quotes /** * SoRandomQuotes constructor. * init actions */ function __construct() { // adding shortcode add_shortcode('randomquotes', array($this, 'addShortcode')); // adding ajax callbacks add_action( 'wp_ajax_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // admin add_action( 'wp_ajax_nopriv_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // front } /** * Shortcode callback * @param $atts * @return string */ public function addShortcode($atts){ // getting path value from shortcode atts $got =shortcode_atts( array( 'path' => plugin_dir_path( __FILE__ ).'quotes.txt', ), $atts ); // shortcode replacement $out = sprintf( '<div id="%s">%s</div><a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>', self::DOM_TARGET, $this->getQuote($got['path']) ); // loading js // jquery depends wp_enqueue_script('sorandquo-js', plugin_dir_url( __FILE__ ).'quote-loader.js', array('jquery')); // passing to js needed vars wp_localize_script( 'sorandquo-js', 'ajaxParams', array( 'path' => $got['path'], // path to qoutes file 'targetDom' => '#'.self::DOM_TARGET, // dom path to put resulting qoute 'ajaxurl' => admin_url( 'admin-ajax.php'), // for frontend ( not admin ) 'action' => self::AJAX_ACTION, // ) ); // render shortcode replacement return $out; } /** * Ajax Callback */ public function getQuoteAjax(){ echo $this->getQuote($_POST['path']); die(); } /** * Getting random Qoute from the file * @param $path * @return mixed */ public function getQuote($path){ $quotesFile = is_file($path) ? file_get_contents($path):"File {$path} not found"; $quotesArr = $quotesFile ? explode("\n", $quotesFile):['Quotes File is empty']; return $quotesArr[array_rand($quotesArr)]; } }
quote-loader.js
jQuery.noConflict(); jQuery(document).ready(function($) { $(document).on('click', '#newquote', function (e) { e.preventDefault(); $.post(ajaxParams.ajaxurl, { 'action':ajaxParams.action, 'path' :ajaxParams.path }, function (ret) { $(ajaxParams.targetDom).html(ret); }, 'html'); }); });
quelle
Wordpress-Shortcode wie Funktion, bei der Sie Parameter angeben,
Zum Erstellen einer Ajax-Anfrage können Sie jQuery.ajax oder xmlhttp in Ihrem Header oder Ihrer Funktionsdatei mit
add_action wp_head
Hook verwenden.Sie sollten ajax.php in Ihrem Themenordner erstellen und oben in der Datei wp-load.php einfügen. und platzieren Sie alle Ihre Ajax-Funktionen in der richtigen Weise.
quelle
Der im Trigger verwendete Selektor stimmt nicht mit der Tasten-ID überein.
Wechseln Sie
jQuery('#newquotes')
zujQuery('#newquote')
quelle
Fügen Sie diese Funktion in function.php hinzu:
<?php add_action('wp_head','ajaxurl'); function ajaxurl() { ?> <script type="text/javascript"> var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; </script> <?php }?>
quelle