0
254
2019-04-25

Elementor и Ajax Load More - загрузка записей во время скрола (infinite scroll for posts)

Данная инструкция ответит на вопрос как реализовать ленивую подгрузку записей выводимых при помощи виджета Elementor - “Записи” (Posts). Причем абсолютно бесплатно, плюс (при наличии определенных знаний) данное решения позволит реализовать ленивую загрузку любых типов записей и практически для любого шаблона сайта.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Всё началось с того что при реализации очередного проекта, необходимо было сделать ленивую подгрузку записей во время скролла страницы вниз. Но уникальность случая заключалась в том, что заказчику необходимо было сохранить внешний вид выводимых записей именно в том виде в котором была создана сетка вывода постов. Ну а сетка вывода постов была реализована при помощи конструктора страниц Elementor (если быть точнее при помощи виджета в Elementor “Записи”). Несмотря на то что на сайте был установлен Elementor-PRO версии, реализовать штатными средствами ленивую подгрузку мне так и не удалось. К сожалению плагин при создании страницы архива позволяет реализовать только постраничную пагинацию. На счастье через несколько минут “Google’ния” я наткнулся на вот этот замечательный пост, который познакомил меня с отличным плагином “Ajax Load More”:

https://www.wpbeginner.com/wp-themes/how-to-add-load-more-posts-button-in-wordpress/

Воспользуйтесь переводчиком страницы в Google Chrome, и прочтите данный пост до конца, в нем объяснены основы работы с плагином. В данном посте мы остановимся подробнее на реализации “infinite scroll” для записей в Elementor.

Полезные ссылки для работы с “Ajax Load More”:

Вид Ajax Load More на странице загрузки плагинов

Загрузить плагин можно по ссылке ниже:

https://wordpress.org/plugins/ajax-load-more/

Официальная страница плагина

Примеры вывода постов

Как добавить ленивую загрузку записей во время скролла в Elementor?

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

Будем считать что Вы прочитали пост по ссылке выше и установили плагин “Ajax Load More”, дабы не останавливаться на деталях.

Стандартный шаблон вывода постов:

На всякий случай оставлю здесь стандартный шаблон вывода.

<li <?php if (!has_post_thumbnail()) { ?> class="no-img"<?php } ?>>
   <?php if ( has_post_thumbnail() ) { the_post_thumbnail('alm-thumbnail'); }?>
   <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
   <p class="entry-meta"><?php the_time("F d, Y"); ?></p>
   <?php the_excerpt(); ?>
</li>

Шаблон вывода сетки для плагина “Ajax Load More” на основе сетки Elementor

В начале возьмем к примеру вывод сетки (с которой у меня и родился данный пост) как на скриншоте ниже:

Сетка вывода записей созданная при помощи плагина Elementor

Сори за размытости но так как сайт является не моим, и доступным в интернете естественно я не могу отобразить контент сетки. Уверен из увиденного Вам и так будет ясно что перед Вами сетка постов созданных в Elementor. Теперь нам необходимо внешний вид постов данной сетки перенести в шаблоны плагина Ajax Load More.

К счастью сетка созданная конструктором страниц очень качественна, и реализуется при помощи css. Поэтому при тщательном исследовании Вашего вывода сетки постов Вы обнаружите сходство Вашего HTML кода и шаблона предоставленного мной ниже. При создании шаблона необходимо правильно подготовить вывод для одного поста из сетки. Вот мой вариант вывода поста для сетки в две колонки:

<article class="elementor-post elementor-grid-item post-277 post type-post status-publish format-standard has-post-thumbnail hentry category-augmented-reality category-bim category-digitalisierung category-iot category-virtual-reality">
    <div class="elementor-post__card">
        <a class="elementor-post__thumbnail__link" href="<?php the_permalink(); ?>">
            <div class="elementor-post__thumbnail">
                <?php if (!has_post_thumbnail()) { ?> class="no-img"<?php } ?>
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail('alm-thumbnail'); }?>
            </div>
        </a>
        <div class="elementor-post__avatar">
            <img alt="<?php echo get_the_author_meta( 'display_name' );?>" src="<?php echo get_avatar_url( get_the_author_meta( 'ID' ), 96 )?>" srcset="<?php echo get_avatar_url( get_the_author_meta( 'ID' ), 96 );?>" class="avatar avatar-128 photo" height="128" width="128">
        </div>
        <div class="elementor-post__text">
            <h3 class="elementor-post__title">
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
            </h3>
            <div class="elementor-post__excerpt">
                <?php the_excerpt(); ?>
            </div>
            <a class="elementor-post__read-more" href="<?php the_permalink(); ?>">
                ZUM ARTIKEL »
            </a>
        </div>
        <div class="elementor-post__meta-data">
            <span class="elementor-post-author">
                <?php echo get_the_author_meta( 'display_name' );?>
            </span>
            <span class="elementor-post-date">
                <?php the_time("F d, Y"); ?>
            </span>
        </div>
    </div>
</article>

Все что Вам останется, это применить свои правки. Данный шаблон (с своими правками) необходимо применить на странице:

*/wp-admin/admin.php?page=ajax-load-more-repeaters

Вашего сайта.

Шорткод для вывода Ajax Load More

Переходим созданию шорт кода :

*/wp-admin/admin.php?page=ajax-load-more-shortcode-builder

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

<!-- ########################################################################################################### 
-->

<div data-id="6ba59dc" class="elementor-element elementor-element-6ba59dc elementor-grid-2 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-posts--show-avatar elementor-card-shadow-yes elementor-posts__hover-gradient elementor-widget elementor-widget-posts">

    [ajax_load_more id="2572192504" container_type="div" post_type="post" category="digitalisierung" scroll_container="elementor-grid-2" progress_bar="true" progress_bar_color="ed7070" images_loaded="true" nested="true" transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio" posts_per_page="4" offset="2"]

</div>

<!-- ########################################################################################################### 
-->

В данном коде обратите внимание на эти классы:

elementor-grid-2 elementor-grid-tablet-2 elementor-grid-mobile-1

Для вывода сетки неотличимой от двух колонок, Вам необходимо будет установить соответствующие цифры например для вывода сетки в три колонки, место elementor-grid-2 примените класс elementor-grid-3. Ну и т.д..

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

Теперь когда у Вас есть шаблон вывод и шорт код, Вам остается применить шорткод с оберткой (код выше) в виджете "Shortcode" вашей страницы созданной при помощи плагина Elementor.

Как сохранить CSS стили сетки?

Если Вы удалите виджет с сеткой записей (тот самый который был создан в элементоре), автоматически все стили примененные в редакторе Elementor исчезнут, для того чтобы не терять время на перенос стилей, я предлагаю сделать следующее. Для моего примера, я оставил в виджите записей две новости, чтобы стили сгенерированные элементором остались в теле страницы, а в шорткоде ленивой загрузки указал параметр offset="2" который позволяет сделать пропуск первых 2 постов.

Обратите внимание на класс Вашей обертки, в моем примере это класс elementor-element-6ba59dc именно данный класс отвечает за стили которые Вы применили к виджету "Записи". Он всегда будет уникальным вот его и нужно применить место моего elementor-element-6ba59dc. Соответственно оставляя вывод нескольких постов в виджите мы будем уверены что элементор применит стили ранее Вами добавленные.

К сожалению при обновлении настроек вывода сетки записей данный класс необходимо будет переназначать снова.