web-dev-qa-db-fra.com

Charger plus de messages Ajax Button in WordPress

J'ai parcouru les anciennes questions et essayé plusieurs des méthodes qui semblent être utilisées pour le faire. Le plus proche de mon travail est celui-ci ici: Comment implémenter une pagination sur un WP_Query Ajax personnalisé

J'ai tout essayé et ça ne marche pas. Absolument rien ne change sur la page. Si vous inspectez le bouton Charger plus et cliquez dessus, la requête se charge d'effectuer l'action Charger plus de bouton lorsqu'elle passe de <a id="more_posts">Load More</a> à <a id="more_posts" disables="disabled">Load More</a> qui même cela ne me semble pas juste de toute façon. Il ne s'agit pas d'ajouter des messages, je pense qu'il me manque quelque chose de simple, mais pour le reste de ma vie, je ne peux pas y arriver.

Le code dans mon fichier de modèle est:

<div id="ajax-posts" class="row">
    <?php 
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="small-12 large-4 columns">
            <h1><?php the_title(); ?></h1>
            <p><?php the_content(); ?></p>
        </div>
        <?php
    endwhile; 

    echo '<a id="more_posts">Load More</a>';

    wp_reset_postdata(); 
    ?>
</div>

Le code dans mon fichier de fonctions est:

function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) { $loop->the_post(); 
        the_content();
    }
    exit; 
}

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

Et mon JQuery dans le pied de page est:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // What page we are on.
        var page = 5; 
        // Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() {
            // When btn is pressed.
            $("#more_posts").attr("disabled",true);

            // Disable the button, temp.
            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                // CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            });
        });
    });
</script>

Quelqu'un peut-il voir quelque chose me manque ou capable d'aider?

javascriptphpjqueryajaxwordpress
29
Addzy

MISE À JOUR 24.04.2016.

J'ai créé un tutoriel sur ma page https://madebydenis.com/ajax-load-posts-on-wordpress/ à propos de la mise en œuvre de ce thème sur le thème Twenty Sixteen, alors n'hésitez pas à le consulter :)

MODIFIER

J'ai testé cela sur Twenty Fifteen et ça marche, alors ça devrait marcher pour vous.

Dans index.php (en supposant que vous souhaitiez afficher les articles sur la page principale, mais cela devrait fonctionner même si vous le mettez dans un modèle de page) Je mets:

    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
                    'cat' => 8
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Cela affichera 3 messages de la catégorie 8 (j'avais des messages dans cette catégorie, donc je l'ai utilisée, vous pouvez utiliser ce que vous voulez). Vous pouvez même interroger la catégorie dans laquelle vous vous trouvez

$cat_id = get_query_var('cat');

Cela vous donnera l'identifiant de la catégorie à utiliser dans votre requête. Vous pouvez mettre ceci dans votre chargeur (charger plus de div), et tirer avec jQuery comme

<div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>

Et tirez la catégorie avec

var cat = $('#more_posts').data('category');

Mais pour l'instant, vous pouvez laisser cela de côté.

Suivant dans functions.php j'ai ajouté

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

Juste après le wp_localize_script Existant. Cela va charger WordPress propre admin-ajax.php afin que nous puissions l’utiliser quand nous l’appelons dans notre appel ajax.

À la fin du fichier functions.php, j'ai ajouté la fonction qui chargera vos messages:

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' => 8,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

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

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

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

Ici, j'ai ajouté une clé paginée dans le tableau, afin que la boucle puisse garder une trace de la page où vous vous trouvez lorsque vous chargez vos articles.

Si vous avez ajouté votre catégorie dans le chargeur, vous ajouteriez:

$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

Et au lieu de 8, vous mettriez $cat. Ce sera dans le tableau $_POST, Et vous pourrez l'utiliser en ajax.

La dernière partie est l'ajax lui-même. Dans functions.js , je mets à l'intérieur du $(document).ready(); enviroment

var ppp = 3; // Post per page
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(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

Sauvegardé, testé et ça marche :)

Les images comme preuve (ne vous occupez pas du style de mauvaise qualité, cela a été fait rapidement). Également le contenu du message est charabia xD

enter image description here

enter image description here

enter image description here

[~ # ~] met à jour [~ # ~]

Pour 'charge infinie' au lieu de l'événement click sur le bouton (rendez-le invisible, avec visibility: hidden;), Vous pouvez essayer avec

$(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});

Cela devrait exécuter la fonction load_posts() lorsque vous êtes à 100 pixels du bas de la page. Dans le cas du tutoriel sur mon site, vous pouvez ajouter un contrôle pour voir si les messages sont en train de se charger (pour éviter de tirer deux fois le jax), et vous pouvez le lancer lorsque le parchemin atteint le haut du pied de page.

$(window).on('scroll', function(){
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                load_posts();
        }
    }
});

Désormais, le seul inconvénient dans ces cas est que vous ne pouvez jamais accéder à la valeur de $(document).height() - 100 ou $('footer').offset().top pour une raison quelconque. Si cela se produit, augmentez simplement le nombre auquel le parchemin se rend.

Vous pouvez facilement le vérifier en mettant console.log Dans votre code et de voir dans l'inspecteur ce qu'ils jettent.

$(window).on('scroll', function () {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});

Et ajustez en conséquence;)

J'espère que cela vous aidera :) Si vous avez des questions, n'hésitez pas.

62
dingo_d