Ajax подгрузка статей в WordPress через кнопку показать еще (load more без плагина)

    12 комментариев 11358

ajax_load_more

Привет всем. В прошлой статье мы с вами делали живой поиск на WordPress и я надеюсь, что у вас получилось реализовать live search на своем сайте, ведь это не так сложно, как может показаться. Сейчас же мы займемся созданием Ajax подгрузки постов в WordPress без использования дополнительных плагинов, хоть и есть подобные готовые решения и если вы пришли сюда как раз за этим, то вот вам плагин с говорящим названием — Ajax Load More, который не требует специфических знаний, интуитивно понятен и разобраться сможет даже тот, кто с программированием на ВЫ. Сам лично использовал его в некоторых проектах в том случае, когда необходимо было сделать Ajax подгрузку статей быстро.

Телеграм-канал serblog.ru

plugin_ajax_load_more

Но пишу я это специально для тех, кто хочет научиться делать все самостоятельно и более детально вникнуть в работу WordPress. Как я уже писал ранее, в WP Ajax уже есть и он активно применяется в админке. Но чтобы он стал работать на фронтенде, мы напишем немного кода. А потом создадим сам Ajax запрос, который можно поместить как в сам footer.php, так и через файл functions.php.Вот, что у вас должно получиться:

Демо

Покажу на примере своего блога и создам отдельную страницу для вывода записей из определенной категории. Пускай это будет PHP. ля этого я напишу следующий код:

1
2
3
4
5
6
7
query_posts('cat=30&posts_per_page=5');
while (have_posts()) : the_post(); ?>
    <div class="col-md-12">
        <h2><a href="<?php echo esc_url(the_permalink()); ?>">< ?php the_title(); ?></a></h2>
        < ?php //the_excerpt(); // если нужно ?>
    </div>
< ?php endwhile;

Таким образом мы выводим 5 кликабельных заголовков и короткое описание, если нужно, из указанной категории. Теперь внизу разместим ссылку-кнопку, по нажатию на которую будем подгружать данные через Ajax.

1
2
3
4
5
6
7
8
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$max_pages = $wp_query->max_num_pages;
if ($paged < $max_pages) {
    echo '<div id="loadmore" style="text-align:center;">
<a href="#" data-max-pages="' . $max_pages . '" data-paged="' . $paged . '" class="btn btn-warning mt-3">Загрузить ещё</a>
';
}
wp_reset_query();

Разберем этот кусок более детально:

1 Получаем текущую страницу пагинации
2 Количество страниц пагинации
3-7 Проверка. Если paged меньше max_pages, то выводим кнопку
8 Сброс данных произвольного цикла

В файле functions.php размещаем этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_action('wp_ajax_loadmore', 'true_loadmore');
add_action('wp_ajax_nopriv_loadmore', 'true_loadmore');
function true_loadmore()
{
    $paged = !empty($_POST['paged']) ? $_POST['paged'] : 1;
    $paged++;
    $args = array('posts_per_page' => 10, 'paged' => $paged, 'cat' => 30);
    query_posts($args);
 
    while (have_posts()) : the_post();
        ?>
        <div class="col-md-12">
            <h2><a href="<?php echo esc_url(the_permalink()); ?>">< ?php the_title(); ?></a></h2>
        </div>
 
    < ?php
    endwhile;
    die;
}

И самое главное, без чего подгрузка постов в WordPress не будет работать, это непосредственно сам Ajax запрос:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
        var button = $('#loadmore a'),
            paged = button.attr("data-paged"),
            maxPages = button.attr("data-max-pages"),
            loadmore = $('#loadmore');
 
        button.click(function (event) {
            event.preventDefault(); 
            $.ajax({
                type: 'POST',
                url: '< ?php echo admin_url('admin-ajax.php'); ?>
                data: {
                    paged: paged, 
                    action: 'loadmore'
                },
                beforeSend: function (xhr) {
                    button.addClass('border_none');
                    button.html('<img src="ссылка на gif загрузчик"/>');
                },
                success: function (data) {
                    button.removeClass('border_none');
                    paged++;
                    button.parent().before(data);
                    button.text('Загрузить ещё');
                    if (paged == maxPages) {
                        button.remove();
                    }
                }
            });
        });
</script>

Прошу обратить внимание, что мой редактор ставит пробел между символами < и ? из-за чего код перестает быть рабочим. Поэтому от пробелов необходимо избавиться.

После того, как будут выведены все записи, кнопка «Загрузить еще» будет скрыта. Это произойдет только в том случае, когда начальное количество статей будет совпадать с выводимыми. То есть если при загрузке страницы выведено 5 записей, то при клике на кнопку тоже должно выводится пять. Как вы уже, наверное, догадались, можно сделать автоматическую подгрузку статей при скроллинге. Для этого нужно немного изменить JS. Здесь есть пример кода. Ну а мне остается вас поздравить, вы научились писать Ajax запросы в WordPress. А если по какой-то причине у вас что-то не получилось, то пишите свои вопросы в комментариях, будем разбираться вместе.

Любая сумма на развитие сайта

12 комментариев
  1. casinox зеркало рабочее:

    Спасибо большое за подробную информацию.

  2. Денис:

    Не получается, не понятно код кнопки куда разместить? надо добавлять все в один или каждый код отдельно ? может есть готовый код полностью ?

    • Александр Маврин:

      Откройте исходный код демо страницы и там все есть. PHP код написан здесь. Что именно не получается?

  3. А как-то кэшировать подгруженные посты можно? А то, если их очень много в рубрике, то долго грузится все.

    • Александр Маврин:

      Использовать плагины кэширования. Непонятно чему там долго грузиться, вы же делаете ограничение на вывод и достаете посты «порционно». Точно так же, как постраничная навигация.

      • Плагины кэширования не будут же кэшировать подгружаемые через аякс посты.
        Не знаю, у меня долго грузятся, можете не сайте посмотреть

        • Александр Маврин:

          Ограничьте вывод 10-15 записями.

          • Вряд ли это зависит от количества подгружаемых публикаций. В разделах, где в принципе немного постов, все подгружается довольно быстро, в тех же Концертах, например. А вот на главной или в Мероприятиях, где очень много постов, там грузится относительно долго.

  4. Фархад:

    Здравствуйте Александр! Как сделать если на странице нужно два запроса? Кликаю на первую кнопку открывается контент во втором блоке, где вторая кнопка.

  5. Фархад:

    У меня есть две кнопки на одной странице «показать еще», при клике добавляются новые посты, задал им разные id. При клике на вторую кнопку просто крутится «прилоудер» а при клике на первую кнопку, открываются новые посты как положено, но во втором блоке. Просто я ещё только учусь всему.

    • Александр Маврин:

      Очень непонятное объяснение. И совершенно непонятно как именно должно быть и что работает не так, как надо. Тем более не видя код, что-то посоветовать в этом случае сложно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *