Comment Utiliser AJAX dans un Shortcode WordPress?
J'ai un code pour afficher une citation aléatoire. Une personne a écrit une fonction pour mettre en œuvre tout cela. Mais la mise à jour des données via AJAX pour une raison quelconque ne fonctionne pas. Lorsque vous appuyez sur le bouton "Devis", rien ne se passe. Peut-être que quelqu'un sait pourquoi? Ce qui doit être fixé dans le code suivant, de sorte que lorsque vous cliquez sur "devis" un nouveau devis est chargé?
Le 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>';
?>
La Structure HTML
Dans une page de contenu, un widget ou un fichier de modèle:
<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>
Cela, vous pouvez évidemment adapter à votre goût, mais pour les besoins de cet exemple, c'est ce que nous allons avec la.
Nous allons générer la ci-dessus, via un shortcode plus tard.
Le 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' );
Comment vous pouvez mettre à jour le contenu de la page à l'aide d'AJAX dans WordPress?
Vous devez vous connecter pour publier un commentaire.
Belle question!
Mais, comme votre code commence avec une mauvaise pratique -
require_once('wp-load.php');
-, j'ai décidé de reprendre un de mes extraits de code et de l'adapter.Observations:
quotes.txt
est attrapée, ici un Type de message est utilisé comme source (post
), dans la méthodeget_random_post
#newpost-shortcode
et#randomposts
)/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php
/wp-content/plugins/so-ajax-shortcode/ajax.js
admin-ajax.php
, mais vous ne pouvez pas afficher ce fichier ci-dessus. Comment allez-vous vérifier le nonce sur cette page?admin-ajax.php
est l'un des principaux WP fichier, nous n'avons pas besoin de la toucher.wp_localize_script
dit JS les paramètres dont il a besoin et le nonce est vérifié aveccheck_ajax_referer
à l'intérieur de la fonction PHP appelé par Ajax.Ici exemple de plug-in comme réponse à la question. À l'aide de ajaxurl au frontend.
so-random-quotes.php
quote-loader.js
Shortcode WordPress même comme une fonction où vous donnez des paramètres,
pour la création d'une requête ajax, vous pouvez utiliser jQuery.xmlhttp ajax ou dans votre en-tête ou un fichier de fonction avec
add_action wp_head
crochet.vous devez créer ajax.php dans votre dossier de thème et sur le dessus de fichier, vous devez inclure wp-load.php. et place l'ensemble de vos fonctions ajax de manière adéquate.
Le sélecteur utilisé dans le déclencheur ne correspond pas au bouton ID.
Changement
jQuery('#newquotes')
àjQuery('#newquote')
Ajouter cette fonction dans function.php: