Elementor и Ajax Load More – загрузка записей во время скрола (infinite scroll for posts)
Всё началось с того что при реализации очередного проекта, необходимо было сделать ленивую подгрузку записей во время скролла страницы вниз. Но уникальность случая заключалась в том, что заказчику необходимо было сохранить внешний вид выводимых записей именно в том виде в котором была создана сетка вывода постов. Ну а сетка вывода постов была реализована при помощи конструктора страниц 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”:
Загрузить плагин можно по ссылке ниже:
https://wordpress.org/plugins/ajax-load-more/
Как добавить ленивую загрузку записей во время скролла в Elementor?
Судя по тому что Вы здесь, Вам необходимо сделать так чтобы во время скола страницы записи (или сетка записей) подгружались автоматически, давайте начнем реализацию задуманного.
Будем считать что Вы прочитали пост по ссылке выше и установили плагин “Ajax Load More”, дабы не останавливаться на деталях.
Стандартный шаблон вывода постов:
На всякий случай оставлю здесь стандартный шаблон вывода.
Шаблон вывода сетки для плагина “Ajax Load More” на основе сетки 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 )?>" src="" data-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
Как работать с созданием шорткода для ленивой загрузки уверен Вы разберетесь и без меня, обилие настроек для бесплатной версии плагина мягко говоря поражает. Я же приведу ниже полный код верстки (обертки шорткода) вместе с получившимся шорткодом:
В данном коде обратите внимание на эти классы:
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. Соответственно оставляя вывод нескольких постов в виджите мы будем уверены что элементор применит стили ранее Вами добавленные.
К сожалению при обновлении настроек вывода сетки записей данный класс необходимо будет переназначать снова.