Comment intégrer les fonctionnalités AJAX dans un shortcode WordPress ?

Comment utiliser AJAX dans un shortcode WordPress ?

Implémenter AJAX avec un shortcode

PHP :

Le code PHP du shortcode doit inclure le suivant :

function random_quote( $atts ) {
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt' // Default path
    ), $atts ) );

    // Retrieve quotes from file
    $array = file( $path );
    $r = rand( 0, count($array) - 1 );

    // Render shortcode output
    $output = '<div>

jQuery :

Gérez le clic sur le bouton et effectuez la requête AJAX :

jQuery('#newquote').click( function() {
    // Send AJAX request to retrieve a new quote
    $.ajax({
        type: 'POST',
        url: ajaxParams.themeURI+'js/ajax-load-quote.php',
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,'#randomquotes');
        },
        success: function(data) {
            // Replace old quote with new one
            jQuery('#randomquotes').find('p').remove();
            jQuery('#randomquotes').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,'#randomquotes');
        }
    });
    return false;
});

Comment utiliser AJAX dans WordPress Shortcodes

1. Créer un fichier PHP :Établir une communication point entre JS et PHP (par exemple, ajax-load-quote.php).
2. Configurer le shortcode : Écrivez le shortcode pour générer les intégrations HTML et JS/AJAX nécessaires.
3. Charger les scripts nécessaires : Mettez en file d'attente le fichier JS requis dans Functions.php (par exemple, wp_enqueue_script).
4. Appel AJAX en JavaScript : Utilisez jQuery, XHR ou similaire pour envoyer des requêtes AJAX depuis JS.
5. Traitez la requête AJAX en PHP : Gérez les données, effectuez les opérations nécessaires et renvoyez les données modifiées contenu.
6. Mettre à jour la vue dans JS : Mettez à jour le code HTML en fonction de la réponse de la requête AJAX côté serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!