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

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

Но пишу я это специально для тех, кто хочет научиться делать все самостоятельно и более детально вникнуть в работу 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();

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

В файле 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. А если по какой-то причине у вас что-то не получилось, то пишите свои вопросы в комментариях, будем разбираться вместе.