Comment implémenter un bouton « Charger plus de publications » avec Ajax dans WordPress ?

Bouton Ajax Charger plus de publications dans WordPress

Charger plus de publications via Ajax est un besoin courant pour les sites Web avec un grand volume de contenu. Cela permet aux utilisateurs de parcourir plusieurs pages de contenu sans actualiser la page entière. Dans cet article, nous explorerons les étapes impliquées dans la mise en œuvre d'un bouton « Charger plus de publications » à l'aide d'Ajax dans WordPress.

Création du code du modèle

Commencez par créer un fichier modèle dans lequel vous souhaitez que le bouton « Charger plus de publications » apparaisse. Dans cet exemple, nous utiliserons index.php. Ajoutez le code suivant à votre modèle :

<div>

Fonction pour charger plus de messages

Ensuite, créez une fonction dans votre fichier function.php pour gérer l'appel Ajax pour charger plus de messages. Cette fonction interrogera la prochaine série de publications en fonction de la page actuelle et du nombre de publications par page.

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax Script

Dans votre pied de page, inclure le script jQuery suivant pour gérer la fonctionnalité du bouton Ajax :

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

Personnalisation du Fonction

Le code fourni est un exemple de base. Vous pouvez le personnaliser pour qu'il corresponde à vos besoins spécifiques, tels que :

• Paramètres de requête : Ajoutez des paramètres supplémentaires aux arguments de requête pour filtrer les publications en fonction de critères spécifiques (par exemple, catégorie, tags).
• Pagination : Ajoutez des liens de pagination pour naviguer entre les pages de publications.
• Défilement infini : Utilisez l'événement scroll pour charger automatiquement plus de publications à mesure que l'utilisateur fait défiler la page.

En suivant ces étapes, vous pouvez implémentez un bouton fonctionnel « Charger plus de publications » dans WordPress à l'aide d'Ajax, améliorant ainsi l'expérience utilisateur de vos visiteurs parcourant de grands ensembles de contenu.

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!