Pourquoi mon bouton WordPress « Charger plus de publications » ne fonctionne-t-il pas avec AJAX ?

Implémentation de Charger plus de publications avec AJAX dans WordPress

Introduction :

Le chargement dynamique de publications via AJAX est une solution couramment recherchée. après fonctionnalité dans le développement WordPress. Il permet aux utilisateurs d'explorer plus de contenu sans recharger la page entière, améliorant ainsi l'expérience utilisateur. Cet article aborde un problème courant rencontré par beaucoup lors de la mise en œuvre du chargement de plus de publications avec AJAX.

Énoncé du problème :

L'utilisateur a tenté d'implémenter la pagination à l'aide d'AJAX mais a rencontré des difficultés, n'entraînant aucun changement visible sur la page et le dysfonctionnement du bouton Charger plus. Malgré l'inspection de l'élément et l'observation du comportement attendu dans jQuery, les publications n'étaient pas ajoutées à la page.

Solution :

Après analyse des extraits de code fournis, quelques problèmes potentiels sont apparus :

1. jQuery : La propriété offset dans l'appel $.post utilise (page * ppp) 1 à la place de (page - 1) * ppp. Cette formule doit être ajustée à (page - 1) * ppp pour calculer correctement le décalage pour la prochaine série de publications.
2. Fonction AJAX : Dans la fonction more_post_ajax dans function.php, le La propriété offset doit être utilisée conjointement avec la propriété paged. Cela garantit que WP_Query récupère la page de publications appropriée.
3. php : Il pourrait y avoir une balise PHP de fermeture manquante quelque part dans le code, ce qui briserait le code.
4. Localisation du script WordPress : La fonction more_post_ajax doit être localisée en tant que script WordPress. La localisation du script doit être placée avant de charger les scripts dans Functions.js. Cela permet à l'objet ajax_posts d'être utilisé dans le code JavaScript.

Code révisé :**

Fichier modèle (index.php) :

// Calculate the offset for page 2 onwards
$offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0;

$args = [
    'post_type'             => 'post',
    'posts_per_page'        => $postsPerPage,
    'cat'                   => 1,
    'offset'                => $offset,
];

Fonction AJAX (functions.php) :

function more_post_ajax(){
    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters'     => true,
        'post_type'             => 'post',
        'posts_per_page'        => $ppp,
        'cat'                   => 1,
        'paged'                 => $page + 1, // Increase the page by 1 since offset is already calculated in the template file
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        // Generate HTML for the post
        $out .= '<div class="small-12 large-4 columns">';
        $out .= '<h1>'.get_the_title().'</h1>';
        $out .= '<p>'.get_the_content().'</p>';
        $out .= '</div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

// Localize the 'more_post_ajax' script
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'noposts'   => __('No older posts found', 'twentyfifteen'),
));

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

ajax.js :

$(document).ready(function() {
    var ppp = 3;
    var cat = 8;
    var pageNumber = 1;

    function load_posts(){
        pageNumber++;
        var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
        $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: str,
            success: function(data){
                var $data = $(data);
                if($data.length){
                    $("#ajax-posts").append($data);
                    $("#more_posts").attr("disabled",false);
                } else {
                    $("#more_posts").attr("disabled",true);
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
        return false;
    }

    $("#more_posts").on("click",function(){
        $("#more_posts").attr("disabled",true);
        load_posts();
    });
});

Conclusion :

En abordant attentivement ces problèmes , la fonctionnalité de chargement de plus de publications avec AJAX peut être implémentée avec succès. La formule de décalage et la localisation du script WordPress jouent un rôle crucial pour garantir une pagination et un accès appropriés aux variables WordPress dans le code JavaScript. Ces corrections devraient aboutir à un bouton Charger plus entièrement fonctionnel qui charge dynamiquement des publications supplémentaires sur la page.

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!