Maison >développement back-end >tutoriel php >Comment afficher des citations aléatoires avec AJAX dans un shortcode WordPress ?

Comment afficher des citations aléatoires avec AJAX dans un shortcode WordPress ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-08 21:35:20393parcourir

How to Display Random Quotes with AJAX in a WordPress Shortcode?

Comment générer des citations aléatoires à l'aide d'AJAX dans un shortcode WordPress

Question :

Comment pouvons-nous mettre à jour le contenu de la page en utilisant AJAX dans WordPress ?

Réponse :

Voici une version améliorée du code fourni dans la question, qui implémente la fonctionnalité AJAX dans un shortcode WordPress pour afficher des citations aléatoires :

Code court (shortcode.php)

function random_quote_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt'
    ), $atts );

    $quotes = file( $atts['path'] );
    $random_quote = $quotes[array_rand($quotes)];

    $output = sprintf(
        '<div>

Gestionnaire AJAX (ajax-handler.php)

add_action( 'wp_ajax_load_random_quote', 'load_random_quote' );
add_action( 'wp_ajax_nopriv_load_random_quote', 'load_random_quote' );

function load_random_quote() {
    $quotes = file( $_POST['file_path'] );
    $random_quote = $quotes[array_rand($quotes)];

    echo $random_quote;
    wp_die();
}

Script jQuery (ajax-script .js)

jQuery(document).ready(function($) {
    $('#newquote').click(function(e) {
        e.preventDefault();

        $.ajax({
            url: ajaxurl,
            data: {
                action: 'load_random_quote',
                file_path: '<?php echo get_template_directory_uri() . '/quotes.txt'; ?>'
            },
            success: function(data) {
                $('#randomquote').html(data);
            }
        });
    });
});

Mettre les scripts en file d'attente et Localiser les données (functions.php)

function enqueue_ajax_scripts() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/ajax-script.js', array('jquery'), '1.0.0', true );
    wp_localize_script( 'ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_ajax_scripts' );

Explication :

  1. Le shortcode random_quote génère une citation aléatoire initiale et un bouton intitulé "Nouveau Quote."
  2. Lorsque le bouton "Nouveau devis" est cliqué, le jQuery gère l'AJAX request.
  3. La fonction de gestionnaire load_random_quote renvoie une nouvelle citation aléatoire, qui est ensuite affichée par jQuery à la place de la précédente.
  4. Pour éviter les problèmes de sécurité, les noms occasionnels AJAX ont été implémentés.

Remarque supplémentaire :

Si vous utilisez un thème personnalisé, remplacez get_template_directory_uri() par la fonction appropriée à votre thème.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn