—»     —»   Включаем бесконечный скроллинг в Wordpress-шаблоне
  Раздел: Wordpress   Комментариев: 2  

Включаем бесконечный скроллинг в Wordpress-шаблоне



В веб-дизайне, бесконечный скроллинг подразумевает функционал, в рамках которого новый контент подгружается по мере того, как пользователь прокручивает страницу сайта вниз. Такой формат отображения контента можно видеть в Twitter и Facebook и многих других сайтах.

Включаем бесконечный скроллинг в Wordpress-шаблоне

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

Устанавливаем Jetpack

Несмотря на то, что сегодня существует множество разных плагинов, позволяющих реализовать функционал бесконечного скроллинга на сайте, мы предпочитаем использовать Jetpack. Это плагин, разработанный Automattic – командой разработчиков из Wordpress. Он содержит несколько удобных плагинов, которые позволят вам улучшить опыт взаимодействия сайта на Wordpress с пользователями.

Функция бесконечного скроллинга изначально была представлена в версии 2.0. Тем не менее, если вы не используете стандартные шаблоны Wordpress (TwentyTen, TwentyEleven и TwentyTwelve), этот эффект может не сработать. Так как у каждого шаблона своя уникальная структура страницы, Jetpack может потребоваться отдельная информация о шаблоне, чтобы все заработало.

Для начала, убедитесь, что вы установили Jetpack, и активировали функцию Infinite Scroll (Бесконечный скроллинг).

Включаем бесконечный скроллинг в Wordpress-шаблоне

Добавляем функцию бесконечного скроллинга

Как и миниатюра к записям, бесконечный скроллинг можно добавить при помощи функции add_theme_support(), и это одна из причин, почему мы предпочитаем использовать Jetpack, а не другие опции – этот набор интегрируется с ядром Wordpress.

В данном примере мы воспользуемся бесплатным Wordpress-шаблоном ThemeZilla, Launch.

Для начала нам нужно создать функцию для указания шаблона поста, которая будет использована Infinite Scroll для оформления контента. В данном случае, для данного шаблона мы запускаем content-post-standard.php.

function zilla_infinite_scroll_render() {
get_template_part( 'content-post', 'standard' );
}

Затем, мы можем активировать функцию Infinite Scroll следующим образом.

add_theme_support( 'infinite-scroll', array(
'container' => 'primary',
'render' => 'zilla_infinite_scroll_render',
));

Параметр content в вышеприведенном отрывке кода указывает id, который содержит нашу запись. В данном случае, шаблон Launch оборачивает записи в id=”primary”.

Включаем бесконечный скроллинг в Wordpress-шаблоне

Тем временем, параметр render указывает шаблон, при помощи которого контент должен быть оформлен. На данном этапе эффект уже должен быть заметен в ваших записях после перезагрузки страницы.

Включаем бесконечный скроллинг в Wordpress-шаблоне

Но, обратите внимание, что подвал перекрывает ваши записи.

Включаем бесконечный скроллинг в Wordpress-шаблоне

Если такой вариант не подходит вашему шаблону, вы можете установить параметр ‘type’ на ‘click’, и таким образом контент не будет отображаться до тех пор, пока пользователь не нажмет по специальной кнопке.

add_theme_support( 'infinite-scroll', array(
'type' => 'click',
'container' => 'primary',
'render' => 'zilla_infinite_scroll_render',
));

Jetpack предоставляет такую кнопку при желании.

Включаем бесконечный скроллинг в Wordpress-шаблоне

В завершение

Пожалуй, эта самый простой вариант реализации Infinite Scroll при помощи Jetpack. Но, если вам нужно что-то более продвинутое, вы можете посмотреть примеры на странице Jetpack.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Wordpress
Опубликовал Design FactoRy   Прочитано (раз): 11034   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 сентября 2014 @ 12:46
Написал: Maksimka — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Автор, пожалуйста помоги!! Помоги мне настроить на свое теме такие функции! Очень тебя прошу! Пожалуйста ответь мне)
Комментарий #2: 2 октября 2015 @ 12:07
Написал: Terry Cord — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо, помогло)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031