Tout d'abord, c'est très limite dans le cadre de WPSE, c'est tout.
Mis à part le shortcode pour déclencher la sortie HTML initiale, c'est vraiment juste AJAX.
Quoi qu'il en soit, cela étant dit, voici comment cela se fait:
Le PHP
En supposant que l'extrait PHP ci-dessus que vous avez fourni soit fonctionnel, placez ce qui suit dans un fichier php pour l'appel ajax:
/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>';
?>
Pour référence future et afin de rendre cette réponse utile aux autres: Notez que cela wp-load.php
doit être inclus afin d'utiliser la fonctionnalité native de WordPress. Le cas le plus courant est probablement le besoin de WP_Query
ou $wpdb
.
La structure HTML
Dans un contenu de page, un widget ou un fichier 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>
Vous pouvez évidemment ajuster cela à votre guise, mais pour cet exemple, c'est ce que nous allons faire.
Nous générerons ce qui précède via un shortcode plus tard.
La 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;
});
L'assemblage dans functions.php
Sous votre extrait ci-dessus (que vous trouverez inclus modifié ci-dessous), collez ce qui suit:
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' );
Facultatif: le css pour l'écran de chargement
.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;
}
Ressources / Lecture
function random_quote ($path) { $ array = file ("$ path");
<br/> ...[randomquote file = "http://exampe.com/file.txt"]
<br/> Alors ça va marcher? Je ne connais pas trop la programmation.[randomquotes path="path/to/file.txt"]
, transmis au js et de là au script php.Vous pouvez enregistrer un script dans un shortcode. Il sera imprimé dans le pied de page, étant donné que le thème contient
wp_footer()
.Comment ça fonctionne:
add_shortcode()
.admin_url( 'admin-ajax.php' )
et récupérez de nouvelles données. Insérez les données retournées dans l'élément avec le shortcode.Voici un exemple de script faisant cela. Deux fichiers: une classe PHP et un fichier JavaScript. Les deux devraient par exemple se trouver dans le même répertoire
ajax-shortcode-demo
.ajax-shortcode-demo.php
jquery-ajax-demo.js
Résultat dans un article de blog:
la source
define('WP_DEBUG', true);
dans mon wp-config.php cette solution a généré une erreur:Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method Ajax_Shortcode_Demo::get_instance() should not be called statically in /var/www/.../public_html/wp-includes/plugin.php on line 496
. Est-ce critique? Je l'ai un peu changé: wordpress.stackexchange.com/q/196332/25187static
. J'ai fait une modification à mon message pour cela. Merci pour l'avis. Je n'écrirais plus le code comme ça. :)