Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте бесконечную прокрутку любых типов записей. Вы сможете сделать бесконечную прокрутку для страниц, записей, медиафайлов, изображений, чата, аудиозаписей, ссылок, галерей, видео и т.д.
Вы сможете добавить бесконечную прокрутку на любую страницу с помощью простого шорткода. Создать шорткод можно прямо из меню визуального редактора WordPress.
Бесконечная прокрутка записей плагин WordPress
Установить Супер плагин Ajax Load More – Infinite Scroll вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите на страницу: Ajax Load More – Settings. Здесь вы сможете настроить основные параметры плагина.
Для начала нужно настроить основные параметры:
– Container Type, здесь можно изменить тип контейнера, но не обязательно.
– Container Classes, можно добавить классы для контейнера, не обязательно.
– Disable CSS, можно отключить CSS стили плагина, чтобы использовать свои стили. Не обязательно.
– Button/Loading Style, здесь вам нужно выбрать стиль загрузки контента. У вас на выбор два варианта – кнопка или бесконечная прокрутка. Нажмите по полю “Chasing Arrows”, чтобы выбрать подходящий для вас вариант.
– Button Classes, можно добавить классы для кнопки. Не обязательно.
– Ajax Security, защита URL адресов от злоупотребления Ajax запросов. Рекомендуется включить.
– Top of Page, на начальной странице загрузки, переместить окно браузера пользователя в верхнюю часть экрана. Это может помочь предотвратить загрузку ненужных сообщений.
– Dynamic Content, отключить динамическое население категорий, тегов и авторов в шорткод Builder. Рекомендуется , если у вас есть необыкновенное количество категорий, тегов и / или авторов.
– Editor Button, можно скрыть кнопку для создания шорткодов из визуального редактора WordPress, на странице редактирования записи или страницы.
– Error Notices, уведомления об ошибках. Рекомендуется включить.
– Сохраните настройки.
Далее, мы будем создавать шорткод для добавления на сайт бесконечной прокрутки. Вы можете создать шорткод на странице – Shortcode Builder.
Если вы хотите добавить бесконечную прокрутку сразу в запись или на страницу, то можно создать шорткод прямо из визуального редактора WordPress, с помощью специальной кнопки.
Что в первом, что и во втором варианте, настройки абсолютно одинаковые, сейчас мы их разберём:
– Template, шаблон оставьте по умолчанию, ничего менять здесь не надо.
– ID, если вы собираетесь добавлять бесконечную прокрутку на несколько страниц, с разными типами вывода записей, то вам нужно указать здесь уникальный идентификатор, чтобы шорткоды отличались. Нажмите под полем на вкладку – Generate Unique ID, чтобы добавить уникальный ID.
– Container Type, можно указать тип контейнера. Не обязательно.
– Container Classes, можно добавить классы для контейнера, не обязательно.
– Label, можно добавить свою надпись на кнопку, если в основных настройках вы выбрали кнопку. Если вы выбрали бесконечную прокрутку, здесь можно ничего не менять.
– Loading Label, здесь можно указать надпись, которая отображается на кнопке во время загрузки контента.
– Images Loaded, загружать изображения перед загрузкой основного содержимого. Не обязательно включать данную функцию.
– Pause, не загружать сообщения пока пользователь не нажмёт на кнопку.
– Enable Scrolling, включите данный параметр, чтобы включить бесконечную прокрутку. При прокрутки страницы записи будут автоматически подгружаться, то есть на кнопку жать не надо.
– Scroll Distance, расстояние от нижней части экрана, чтобы вызвать загрузку сообщений. (По умолчанию = 150)
– Maximum Pages, максимальное количество страниц для загрузки во время прокрутки. (0 = без ограничений)
– Pause Override, разрешить прокрутку, чтобы переопределить параметр Pause и запустить загрузку сообщений при прокрутке.
– Transition Type, можно выбрать стиль загрузки перехода.
– Transition Speed, скорость перехода в миллисекундах.
– Transition Container, удалить контейнер загрузки, не рекомендуется!
– Destroy After, удалить ajax загрузку после загрузки определённого количества страниц (укажите количество в поле). Не обязательно!
– Posts Per Page, укажите здесь сколько будет загружаться записей или страниц за один раз.
– Post Type, выберите здесь, какие типы записей вы хотите добавить в бесконечную прокрутку.
– Post Format, можно выбрать формат сообщений. Выберите стандартный формат, для вывода значений по умолчанию.
– Category, можно включить или исключить определённые категории. Ничего не выбирайте, тогда будут использоваться все категории.
– Date, можно указать дату, для запроса по дате архива, чтобы выводились записи из определённого архива. Не обязательно.
– Custom Fields (Meta_Query), можно выводить определённые пользовательские поля, указав здесь их данные. Не обязательно! Оставьте без изменений!
– Author, можно выбрать автора, чтобы выводились только его записи. Не обязательно!
– Search Term, здесь можно указать слово или слова, по которым будут выводиться записи. То есть, если в записи есть такое слово, значит запись будет показана. Не обязательно!
– Post Parameters, здесь можно включить или исключить определённые записи, указав их ID. Можно выбрать статус записи, например, опубликованные или нет.
– Ordering, здесь можно выбрать, по каким параметрам сортировать записи при выводе их в бесконечной прокрутке. Можно оставить по умолчанию.
– Offset, здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.
– Custom Arguments, через точку с запятой список разделенных пользовательских значений. Могут быть использованы для запроса по параметрам, не доступных в шорткоде. Не обязательно!
Далее, после создания шорткода, скопируйте готовый шорткод.
Шорткод необходимо добавить на страницу, где будет бесконечная прокрутка. Если в шорткоде вы выбрали тип записей post, то в бесконечной прокрутке будут выводится последние записи и т.д. Всё очень просто! Плагин лично проверял, всё работает!
Кстати, забыл рассказать, на вкладке “Repeater Templates” отображается код шаблона записей, которые будут отображаться в бесконечной прокрутке. Доступен только один шаблон, можно заказать дополнительные темы, но уже платно. Если вы разбираетесь в коде, то вы можете его изменить под себя.
Остались вопросы? Напиши комментарий! Удачи!
Привет! А как сделать, чтобы кнопка скрывалась, когда уже выведены все записи, и больше загружать нечего?
Привет, можно текст указать для кнопки когда записей больше нет, а чтобы скрыть, вроде такого нет в настройках.
Я уже разобралась, в настройках ничего такого не нашла, но когда выведены все записи, кнопке автоматом добавляется класс .done, я просто указала классу .done{display: none} и тогда она скрывается.
Отлично, молодец !
Добрый день. Так куда шорткод вставлять? При создании новой страницы иконки оранжевой нет. А по остальному я туп))
Здравствуйте. Шорткод можно ставить на любую страницу, где будет бесконечная загрузка записей.
Добрый день, у меня выводится 10 постов, при нажатии на Load more подгружаются остальные посты, но среди них есть дубликаты из первой 10-ки, как этого избежать?
Здравствуйте. Внимательно читайте настройки. Я писал об этом. Параметры Post Parameters и Offset.
Добрый день! А как поисковики к этому относятся, проблем с индексацией и выдачей не будет?
Здравствуйте. Не будет. XML карту сделайте и всё нормально будет.
Ок. Спасибо за совет, поэкспериментирую!
Добрый день, подскажите, как сделать вывод постов по дате, т.е первый пост – последняя публикация, последний пост – первая публикация?
Здравствуйте. В настройках создания шорткода смотрите параметр Ordering, там можно выбрать тип сортировки.
В том, то и дело, выводятся посты как то странно, сегодняшний пост, затем тот, что был опубликован месяц назад, затем опять предпоследний опубликованный и там далее
Как у вас записи сортируются, в настройках Ordering что указано?
Настройка указана Desc и в настройках и в шорткоде
Выгляните пожалуйста и вы поймете о чем я.
В основных настройках отключите параметр Dynamic Content.
День добрый, а есть возможность прикрутить бесконечную прокрутку к уже опубликованным постам, что бы в каждом из них не вставлять шорткод?
Здравствуйте. В файл single.php ставьте код, тогда во всех записях будет.
Скажите, а в PHP файл добавлять простой шорткод (например [ajax_load_more])?
Сам спросил, сам ответил… совсем из головы вылетело))
Разве там нет php кода или только шорткод?
Этим плагином нельзя сделать подгрузку следущей записи?
Если вы имеете ввиду целую запись, нет нельзя. Но, можно изменить шаблон записи.
Как тоже самое работает для Woocommerce что только не делал не работает ваш плагин для товаров
Только что проверял, всё работает. В настройках Shortcode Builder – Post Type, нужно выбрать Товар.
Подскажите как решить эту проблему?
Выбирал товар, всеравно не отображается
Значит что-то не так делаете.
Здравствуйте.
Мобильное отображение ужас, слева картинка, а справа тонкий текст (((
Подскажите плиз что нужно поправить в “коде шаблона” что бы стало так:
-Заголовок-
-Картинка-
-Начало текста-
Добрый день. Да, такой шаблон у плагина по умолчанию. Там есть платные шаблоны. По коду ничего не могу сказать.
Всем привет! Думаю актуальный вопрос. Как убрать эффект паралакс для мобильных, а то крайне прыгает на мобильных. Тема Shop ilse.Буду признателен за помощь.
Привет! Очень просто, с помощью CSS, здесь показывал.
Здравствуйте .Есть вариант сделать прокрутку по горизонтали ?
Спасибо…
Здравствуйте. Смотря чего. Можно сделать горизонтальную прокрутку в виде слайдера для записей, есть такой плагин. Чтобы можно было колесом мыши прокручивать по горизонтали, такого не видал. Хотя, надо посмотреть, может есть такой плагин.
Есть подобный плагин – Horizontal scrolling announcement
Вспомнил, есть такая функция у плагина: Master Slider — Responsive Touch Slider
Здравствуйте. Так и непонял, куда нужно его вставлять (шорткод)? Нужно на главной странице сделать бесконечный вывод записей.
Добрый день. Шорткод нужно добавить на главную страницу, в то место, где будут выводится записи.
Здравствуйте! Подскажите пожалуйста как убрать вывод изображений? Чтобы был только текст
Здравствуйте. Посмотрите настройки Template – можно шаблон изменить., Post Format – можно выбрать формат сообщений. Если не поможет, можно попробовать скрыть изображения с помощью CSS стилей. Может помочь плагин SiteOrigin CSS.
Вставил свой шаблон записи в repeater template, но после этого перестал работать вывод контента из плагина Advanced Custom Fields, который выводился в записи. Вывод проходил через ID, ‘название поля’, true ) ?>
Здравствуйте. Значит плагины конфликтуют. Надо выяснить из-за чего. В основных настройках плагина Ajax Load More включите параметр Error Notices. Также посмотрите в плагине, который перестал работать, можно ли включить отладку. Если не поможет, зайдите в корневой каталог сайта на хостинге, где все файлы WordPress, типа wp-content, wp-includes. Там должен быть файл error_log, откройте его, нужно найти описание ошибки, её причину и путь к файлу, в котором она воспроизводится.
Добрый день! Как настроить плагин для страницы archives.php?
Здравствуйте. Очень просто. Вставьте в файл php код, в то место, где должна отображаться бесконечная прокрутка.
Спасибо за ответ! Хочу дополнить, для тех кто наткнётся еще на это connekthq.com/plugins/ajax-load-more/docs/code-samples/category-archives/
Всегда хорошие статье на сайте, спасибо. Когда вижу в выдаче этот ресурс по интересующему вопросу, то всегда его выбираю, даже если ниже конкурентов, так как знаю, что найду адекватный ответ на свой вопрос!
Спасибо за статью, но немного не поняла за параметр Offset: -” здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.”
что такое “смещение”, и зачем пропускать записи?
Заранее, спасибо за ответ.
Например, если вы не хотите, чтобы первые 2 или 3 записи из блога отображались в бесконечной ленте. Можно сказать исключение, а не смещение.
Спасибо за ответ, попробую реализовать. Подскажи пожалуйста, у Вас есть статьи, как интегрировать слайдер инстаграмма на сайт? (не Вордпресс, для WP я нашла отличные плагины). Может есть у Вас решение для обычного сайта?
Не, я только по WP.
как сделать просто кнопку, в настройках не даёт поставить, хотя есть
Что значит просто кнопку?
А как реализовать функцию Scroll_container, чтобы бесконечная прокрутка была в пределах указанного контейнера ? вставил css –
div.my_container{
width: 100% ;
height: 600px ;
padding: 5px 10px 20px 30px;
border: 2px solid #999;
background: ##EFF8F8;
}
в генераторе шорт кода в параметре scroll_container указал my_container. И не работает :(
Заработало, добавил в css параметр overflow-y: auto;. И вот новая напасть, почему то изображения не отображаются 0_о.
С чем это может быть связано?
Добрый день. Видимо какая-то несовместимость. Разбираться надо.
Кстати, а длину выводимого анонса как то можно в настройках изменить, или нужно в код лезть ?
Не нашёл такого параметра. Наверно в платной версии есть.