Плагин Ajax Load More • WP Best

Бесконечная прокрутка записей

Да, времена статической и полной перезагрузки страниц прошли. Приложения становятся более сложными, а пользователи более ленивыми. Оно и к лучшему!

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

Поэтому и я задался поисками готового решения для плавной подгрузки записей на главную страницу. И нашел его, в виде отличного плагина Ajax Load More

Возможности плагина Ajax Load More

Что ж, давайте посмотрим на сайте разработчика, что он нам предлагает.

  • шаблон — сниппет кода, который будет запускаться снова и снова в цикле вывода записей;

  • параметры в шорткоде — query параметры, которые передаются WordPress;

  • конструктор шорткода — многофункциональный конструктор, который поможет быстро создать пользовательский шорткод с нужными параметрами, включая тип записей, таксономии, настройки кнопки и прочее;

  • фильтрация — позволяет создать пользовательскую ajax навигацию с заданными параметрами;

  • REST API — доступ к сайту в JSON формате через REST API;

  • Кэширование — создает в кэше статические HTML страницы, уменьшая время загрузки;

И многие другие интересные вещи, включая функционал через дополнительные расширения.

Настройка плагина Infinite Scroll — Ajax Load More

Плагин устанавливается обычным способом. Он активно развивается и совместим с последней версией WordPress.

Шаблон вывода

По умолчанию, в пункте Repeater Templates нас ждет единственный дефолтный темплейт. К счастью, он абсолютно свободно редактируется, к тому же в редакторе с подсветкой синтаксиса.

Ниже нам сообщается, что мы можем доустановить специальное расширение Custom repeaters (платное), с помощью которого мы можем увеличить количество этих самых шаблонов.
Но нам это сейчас ни к чему.

Конструктор шорткода

Интересная страница с возможностями на все случаи жизни.
Примечательно, что все они опциональны, и никто не принуждает предварительно обходить все настройки.

Производим нужные настройки, копируем шорткод и вставляем на страницу.

Shortcode Builder ‹ wp best — WordPress

Проверяем работу. Убеждаемся в том, что всё работает как положено.

Изменение шаблона по умолчанию

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

Один минус, для дополнительных шаблонов нужно докупить дополнение.

На своём сайте я использую стили Bootstrap, поэтому легко смог сделать простой вид Masonry c помощью класса Card. Загрузив следующий код в шаблон по умолчанию.

<div class="card" style="width: 20rem;">
  <div class="card-block">
    <h4 class="card-title"><?php the_title(); ?></h4>
    <p class="card-text"><?php the_excerpt(); ?></p>
  </div>
</div>

Всё работает. Но опять же, хочется добавить фильтрацию по рубрикам.

Добавление фильтрации по рубрикам

Вот пример в официальной документации — Advanced Filtering.

Необходимо скопировать JS код с вкладки Code и загрузить данный скрипт себе на сайт.

А вот моя HTML разметка. Снова я использую элемент Card из Bootstrap для вывода фильтра категорий.

<div class="container">
	<div class="card">
	  <h3 class="card-header">Статьи на сайте</h3>
		<div class="card-block advanced-filter-wrap">
			<ul class="list-unstyled advanced-filter-menu" data-type="checkbox" data-parameter="category">
				<li>
					<input id="cat-null" name="checkbox-group" value="" type="checkbox">&nbsp;<label for="cat-null">Все категории</label>
				</li>
				<li>
					<input id="cat-bootstrap" name="checkbox-group" value="bootstrap" type="checkbox">&nbsp;<label for="cat-bootstrap">Bootstrap</label>
				</li>
				<li>
					<input id="cat-admin" name="checkbox-group" value="admin" type="checkbox">&nbsp;<label for="cat-admin">Администрирование</label>
				</li>
				<li>
					<input id="cat-bezopasnost" name="checkbox-group" value="bezopasnost" type="checkbox">&nbsp;<label for="cat-bezopasnost">Безопасность</label>
				</li>
				<li>
					<input id="cat-blogovedenie" name="checkbox-group" value="blogovedenie" type="checkbox">&nbsp;<label for="cat-blogovedenie">Блоговедение</label>
				</li>
				<li>
					<input id="cat-customize" name="checkbox-group" value="customize" type="checkbox">&nbsp;<label for="cat-customize">Настройка</label>
				</li>
				<li>
					<input id="cat-seo" name="checkbox-group" value="seo" type="checkbox">&nbsp;<label for="cat-seo">Продвижение</label>
				</li>
				<li>
					<input id="cat-devel" name="checkbox-group" value="devel" type="checkbox">&nbsp;<label for="cat-devel">Разработка</label>
				</li>
				<li>
					<input id="cat-speed" name="checkbox-group" value="speed" type="checkbox"><label for="cat-speed">Скорость загрузки</label>
				</li>
			</ul>
		</div>
		<div class="card-footer">
			<button type="button" class="btn btn-primary submit" id="apply-filters"><i class="fa fa-check" style="opacity: 0.6; margin: 0 4px 0 0;"></i> Применить фильтр</button>
		</div>
	</div>
	<div class="advanced-filter-alm">
		<div class="card-columns">
			[ajax_load_more post_type="post" posts_per_page="6" label="Загрузка записей"]
		</div>
	</div>
</div>

Кстати, если вставлять код в редактор WordPress, желательно предварительно его минифицировать. Чтобы редактор не вставил лишние теги параграфа и переноса строк.

Категории я выровнял в три колонки с помощью свойства flexbox.

ul.advanced-filter-menu {
    display: flex;
    flex-wrap: wrap;
}
ul.advanced-filter-menu li {
    flex-grow: 1;
    width: 33%;
}

Вот и всё. Конечно, дизайн не фонтан. Но мы уже получили плавную прокрутку и создали простую фильтрацию по категориям.

Надеюсь, в будущем мне удастся посмотреть и другие возможности данного плагина.

Подписаться
Уведомление о
guest
1 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
aliprofi
3 лет назад

Очень жалко, что там расширения все остальные платные и стоят не хило.

1
0
Оставьте комментарий.x
()
x
Пролистать наверх