Плагин Ajax Load More
Опубликовано: 01.09.2018
Бесконечная прокрутка записей
Да, времена статической и полной перезагрузки страниц прошли. Приложения становятся более сложными, а пользователи более ленивыми. Оно и к лучшему!
Надо уважать время пользователей и предоставлять им максимально быстро свеженький контент при переходе по страницам. Белый экран или значок перезагрузки уже никого не радует, даже если это время совсем малое.
Поэтому и я задался поисками готового решения для плавной подгрузки записей на главную страницу. И нашел его, в виде отличного плагина Ajax Load More
к содержанию ↑
Возможности плагина Ajax Load More
Что ж, давайте посмотрим на сайте разработчика , что он нам предлагает.
шаблон — сниппет кода, который будет запускаться снова и снова в цикле вывода записей;параметры в шорткоде — query параметры, которые передаются WordPress;
конструктор шорткода — многофункциональный конструктор, который поможет быстро создать пользовательский шорткод с нужными параметрами, включая тип записей, таксономии, настройки кнопки и прочее;
фильтрация — позволяет создать пользовательскую ajax навигацию с заданными параметрами;
REST API — доступ к сайту в JSON формате через REST API;
Кэширование — создает в кэше статические HTML страницы, уменьшая время загрузки;
И многие другие интересные вещи, включая функционал через дополнительные расширения.
к содержанию ↑
Плагин устанавливается обычным способом. Он активно развивается и совместим с последней версией WordPress.
Шаблон вывода
По умолчанию, в пункте Repeater Templates нас ждет единственный дефолтный темплейт. К счастью, он абсолютно свободно редактируется, к тому же в редакторе с подсветкой синтаксиса.
Ниже нам сообщается, что мы можем доустановить специальное расширение Custom repeaters (платное), с помощью которого мы можем увеличить количество этих самых шаблонов.
Но нам это сейчас ни к чему.Конструктор шорткода
Интересная страница с возможностями на все случаи жизни.
Примечательно, что все они опциональны, и никто не принуждает предварительно обходить все настройки.Производим нужные настройки, копируем шорткод и вставляем на страницу.
Проверяем работу. Убеждаемся в том, что всё работает как положено.
к содержанию ↑
Изменение шаблона по умолчанию
На сайте разработчика много интересных шаблонов, некоторые из которых могут показаться гораздо более веселыми, чем стандартный.
Один минус, для дополнительных шаблонов нужно докупить дополнение.
На своём сайте я использую стили 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"> <label for="cat-null">Все категории</label> </li> <li> <input id="cat-bootstrap" name="checkbox-group" value="bootstrap" type="checkbox"> <label for="cat-bootstrap">Bootstrap</label> </li> <li> <input id="cat-admin" name="checkbox-group" value="admin" type="checkbox"> <label for="cat-admin">Администрирование</label> </li> <li> <input id="cat-bezopasnost" name="checkbox-group" value="bezopasnost" type="checkbox"> <label for="cat-bezopasnost">Безопасность</label> </li> <li> <input id="cat-blogovedenie" name="checkbox-group" value="blogovedenie" type="checkbox"> <label for="cat-blogovedenie">Блоговедение</label> </li> <li> <input id="cat-customize" name="checkbox-group" value="customize" type="checkbox"> <label for="cat-customize">Настройка</label> </li> <li> <input id="cat-seo" name="checkbox-group" value="seo" type="checkbox"> <label for="cat-seo">Продвижение</label> </li> <li> <input id="cat-devel" name="checkbox-group" value="devel" type="checkbox"> <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%; }Вот и всё. Конечно, дизайн не фонтан. Но мы уже получили плавную прокрутку и создали простую фильтрацию по категориям.
Надеюсь, в будущем мне удастся посмотреть и другие возможности данного плагина.