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
Libérer: 2024-12-08 21:35:20
original
423 Les gens l'ont consulté

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>
Copier après la connexion

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();
}
Copier après la connexion

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);
            }
        });
    });
});
Copier après la connexion

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' );
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal