Загрузить еще сообщения Ajax Button в Wordpress

17

Я просмотрел старые вопросы и попробовал многие из разных методов, которые, похоже, делают это. Самое близкое, что мне нужно для работы, это здесь: Как реализовать разбиение на страницы на пользовательский WP_Query Ajax

Я пробовал все, и он просто не работает. На странице ничего не меняется. Если вы проверите кнопку "Загрузить еще" и щелкните по ней, jquery делает действие "Загрузка большего количества", поскольку оно изменяется от <a id="more_posts">Load More</a> до <a id="more_posts" disables="disabled">Load More</a>, которое даже не кажется мне правильным. Это не добавление сообщений, я думаю, что мне не хватает чего-то простого, но для жизни я не могу это решить.

Код в моем файле шаблона:

<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>

Код в моем файле функций:

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');

И мой JQuery в нижнем колонтитуле:

<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>

Кто-нибудь может увидеть что-то, чего я не могу или не могу помочь?

  • 0
    Большое спасибо за усилия, которые вы приложили, чтобы помочь мне, но я все еще не могу заставить его работать. Моя кнопка «Загрузить еще» не активируется? ты знаешь, почему это может быть?
  • 0
    Не знаю, видели ли вы мой комментарий ниже, но если вы поместите свой ajax-код в custom.js, то этот код должен выглядеть следующим образом: wp_enqueue_script ('custom_js', get_template_directory_uri (). '/ Assets / js / custom .js ', array (' jquery '),' ', true); wp_localize_script ('custom_js', 'ajax_posts', array ('ajaxurl' => admin_url ('admin-ajax.php'), 'noposts' => __ ('Не найдено более старых сообщений', 'fireproduct'),));

1 ответ

44
Лучший ответ

ОБНОВЛЕНИЕ 24.04.2016.

Я создал учебное пособие на своей странице https://madebydenis.com/ajax-load-posts-on-wordpress/ об осуществлении этой темы на Twenty Sixteen, поэтому не стесняйтесь проверить это:)

ИЗМЕНИТЬ

Я тестировал это в Twenty 15 и работал, поэтому он должен работать для вас.

В index.php (при условии, что вы хотите показывать сообщения на главной странице, но это должно работать, даже если вы поместите его в шаблон страницы) Я положил:

    <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>

Это приведет к выходу 3 сообщений из категории 8 (у меня были сообщения в этой категории, поэтому я использовал их, вы можете использовать все, что захотите). Вы даже можете запросить категорию, в которой вы находитесь,

$cat_id = get_query_var('cat');

Это даст вам идентификатор категории, который будет использоваться в вашем запросе. Вы можете поместить это в свой загрузчик (загрузите больше div) и потяните с помощью jQuery, например

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

И вытащите категорию с помощью

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

Но пока вы можете оставить это.

Далее в functions.php Я добавил

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

Сразу после существующего wp_localize_script. Это позволит загрузить wordpress собственный admin-ajax.php, чтобы мы могли использовать его, когда мы вызываем его в нашем вызове 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' => 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');

Здесь я добавил выложенный ключ в массиве, так что цикл может отслеживать, на какой странице вы загружаете свои сообщения.

Если вы добавили свою категорию в загрузчик, добавьте:

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

И вместо 8 вы поместите $cat. Это будет в массиве $_POST, и вы сможете использовать его в ajax.

Последняя часть - сама ajax. В functions.js я помещаю в среду $(document).ready();

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();
});

Сохранено, проверено, и оно работает:)

Изображения как доказательство (не против дрянной стилизации, это было сделано быстро). Также опубликовать контент - это тарабарщина xD

Изображение 3454

Изображение 3455

Изображение 3456

UPDATE

Вместо "бесконечной нагрузки" вместо нажатия кнопки на кнопке (просто сделайте ее невидимой, visibility: hidden;), вы можете попробовать

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

Это должно запускать функцию load_posts(), когда вы находитесь на 100px в нижней части страницы. В случае учебника на моем сайте вы можете добавить чек, чтобы узнать, загружаются ли записи (чтобы предотвратить стрельбу ajax дважды), и вы можете запустить его, когда свиток достигнет верхней части нижнего колонтитула

$(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();
        }
    }
});

Теперь единственный недостаток в этих случаях состоит в том, что по какой-то причине вы никогда не можете прокрутить до значения $(document).height() - 100 или $('footer').offset().top. Если это произойдет, просто увеличьте число, в которое прокрутка идет.

Вы можете легко проверить это, поместив console.log в свой код и увидев в инспекторе, что они выбрасывают

$(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();
    }
});

И просто отрегулируйте соответственно;)

Надеюсь, что это поможет:) Если у вас есть вопросы, просто спросите.

  • 0
    Спасибо за ответ, что-то в разделе functions.php ломает весь сайт, я не знаю, что это может быть, если посмотреть на него, но если я уберу функцию, сайт снова заработает.
  • 0
    Если я уберу эти строки из функции, то сайт снова будет работать, поэтому я предполагаю, что здесь есть ошибка Энн: 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;
Показать ещё 20 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню