Компьютер

Бесконечная прокрутка Супер плагин WordPress. Постраничная навигация с асинхронной подгрузкой постов в WordPress

Ajax Load More is the ultimate WordPress infinite scroll plugin for lazy loading posts, single posts, pages, comments and more with Ajax powered queries.

Build complex custom WordPress queries with the Ajax Load More shortcode builder then add the generated shortcode to your page via the content editor or directly into your template files.

Ajax Load More is compatible for endless scrolling with popular eCommerce plugins such as WooCommerce and Easy Digital Downloads.

Особенности
  • Shortcode Builder — Create your own custom Ajax Load More shortcode by adjusting the various WordPress query parameters in our easy-to-use shortcode builder (see Shortcode Parameters).
  • Query Parameters — Ajax Load More allows you to query WordPress by many different content types. Query by Post Type, Post Format, Date, Category, Tags, Custom Taxonomies, Search Term, Authors and more!
  • Repeater Templates — Edit and extend the functionality of Ajax Load More by creating your own repeater template to match the look and feel of your website (see screenshots).
  • Multiple Instances — You can include multiple instances of Ajax Load More on a single page, post or template.
  • Ajax Filtering — The Ajax Load More custom filtering method will allow you to filter and update your Ajax query results.
  • Multisite Compatibility — Manage repeater templates across all sites in your network.
  • Setting Panel — Customize your version of Ajax Load More by updating various plugin settings.
  • repeater — Choose a repeater template (Add-on available). Default = ‘default’
  • post_type — Comma separated list of post types. Default = ‘post’
  • sticky_posts — Preserve sticky post ordering in Ajax listing. Default = false
  • post_format — Query by post format. Default = null
  • category — A comma separated list of categories to include by slug. Default = null
  • category__and — A comma separated list of categories to include by ID. Default = null
  • category__not_in — A comma separated list of categories to exclude by ID. Default = null
  • tag — A comma separated list of tags to include by slug. Default = null
  • tag__and — A comma separated list of tags to include by ID. Default = null
  • tag__not_in — A comma separated list of tags to exclude by ID. Default = null
  • taxonomy — Query by custom taxonomy name. Default = null
  • taxonomy_terms — Comma separated list of custom taxonomy terms(slug). Default = null
  • taxonomy_operator
  • taxonomy_relation — The logical relationship between each taxonomy when there is more than one. (AND/OR). Default = ‘AND’
  • day — Day of the week. Default = null
  • month — Month of the year. Default = null
  • year — Year of post. Default = null
  • taxonomy_operator — Operator to compare Taxonomy Terms against (IN/NOT IN). Default = ‘IN’
  • meta_key — Custom field key(name). Default = null
  • meta_value — Custom field value. Default = null
  • meta_compare — Operator to compare meta_key and meta_value against. Default = ‘IN’
  • meta_type — Custom field type. Default = ‘CHAR’
  • meta_relation — Used with multiple custom field entries (AND/OR). Default = ‘AND’
  • author — Comma separated list of authors by id. Default = null
  • post__in — Comma separated list of post ID’s to include in query. Default = null
  • post__not_in — Comma separated list of post ID’s to exclude from query. Default = null
  • search — Query search term (‘s’). Default = null
  • custom_args — A semicolon separated list of value:pair arguments. e.g. tag_slug__and:design,development; event_display:upcoming. Default = null
  • post_status — Select status of the post. Default = ‘publish’
  • order — Display posts in ASC(ascending) or DESC(descending) order. Default = ‘DESC’
  • orderby — Order posts by date, title, name, menu order, author, post ID or comment count. Default = ‘date’
  • offset — Offset the initial query (number). Default = ’0′
  • posts_per_page — Number of posts to load with each Ajax request. Default = ’5′
  • scroll — Load more posts as the user scrolls the page (true/false). Default = ‘true’
  • scroll_distance — The distance from the bottom of the screen to trigger the loading of posts while scrolling. Default = ‘150’
  • scroll_container — Constrain Ajax Load More infinite scrolling to a parent container. Default = null
  • max_pages — Maximum number of pages to load while user is scrolling (activated on when scroll = true). Default = ‘0’
  • pause_override — Allow scrolling to override the Pause parameter and trigger the loading of posts on scroll. Default = null
  • pause — Do not load posts until user clicks the Load More button (true/false). Default = ‘false’
  • transition — Choose a posts reveal transition (fade/masonry/none). Default = ‘fade’
  • transition_container — Display the Ajax Load More (.alm-reveal) loading container. Default = ‘true’
  • transition_container_classes — Add classes to the .alm-reveal transition div.
  • masonry_selector — The target classname of each masonry item. Default = null
  • masonry_animation — Select a loading transition type for Masonry items. (default/zoom-out/slide-up/slide-down/none). Default = default
  • masonry_horizontalorder — Maintain horizontal order. Default = true
  • images_loaded — Wait for all images to load before displaying ajax loaded content (true/false). Default = ‘false’
  • destroy_after — Remove ajax load more functionality after ‘n’ number of pages have been loaded. Default = null
  • progress_bar — Display progress bar indicator at the top of the window while loading Ajax content. Default = ‘false’
  • progress_bar_color — Enter the hex color of the progress bar. Default = ‘ed7070’
  • button_label — The label text for Load More button. Default = ‘Older Posts’
    • — Update the text of the Load More button while content is loading. Default = null
  • container_type — Override the global Container Type that was set on ALM Settings page. Default = null
  • css_classes — Add custom CSS classes to the Ajax Load More container. Default = null
  • id — A unique ID for the Ajax Load More instance.
  • nested — Is this a nested Ajax Load More instance. Default = false
Example Ajax Load More Shortcode Example Demos
  • Default — Out of the box functionality and styling.
  • Advanced Custom Fields — Infinite scroll Advanced Custom Fields data with Ajax Load More.
  • Attachments — Endless scroll post attachments.
  • Destroy After — Remove Ajax Load More functionality after ‘n’ number of pages.
  • Event Listing — Ordering and listing events by custom field date.
  • Filtering — Reset and filter an Ajax Load More instance.
  • Flexbox — Creating a responsive Ajax Load More grid with Flexbox.
  • Infinite Scroll — A look at the new loading functionality and styles.
  • Images Loaded — Download images before displaying ajax loaded content.
  • Masonry — Creating a flexible grid layout with Masonry JS.
  • Multiple Instances — Include multiple Ajax Load More’ on a single page.
  • Paging URLs — Generate unique paging URLs for every Ajax Load More query with the SEO add-on.
  • — Posts will not load until initiated by the user.
  • Preloaded Posts — Easily preload an initial set of posts before completing any Ajax requests to the server.
  • Progress Bar — Display a progress bar load indicator with each Ajax request.
  • Search Results — Returning results based on search terms.
  • Scroll Container — Constrain Ajax Load More to a parent container.
  • SEO & Paging — Combine these two add-ons to create one powerful navigation system.
  • Slideshow Gallery — Create a gallery of posts with Ajax Load More and the Paging add-on.
  • Table Layout — Ajax Load More will display query results in a table format.

Модные тенденции на веб-дизайн изменяются не реже, чем на одежду. И постоянно что-то новое оказывается в тренде. Одним из актуальных на сегодня приёмов веб-дизайна – это бесконечная прокрутка. Рассмотрим, как реализовать вывод записей WordPress бесконечным списком.

Бесконечная прокрутка используется на многих сайта, например, в Google в поиске по картинкам. Также большинство имеют уже встроенную такую важность. Сейчас мы вам расскажем, как сделать вывод записей WordPress бесконечным списком, даже если установленный шаблон не поддерживает это.

Easy Load More

Вывод записей WordPress бесконечным списком может быть реализован двумя вариантами: автоматический – когда новые записи подгружаются самостоятельно; и с кнопкой – когда новые записи будут подгружаться только после нажатия на соответствующею кнопку. Плагин Easy Load More способен реализовать второй вариант бесконечно прокрутки.

Скачиваем, устанавливаем и активируем плагин, потом переходим в его настройки в пункте «Настройки» и подпункте «Easy Load More». Здесь две вкладки, и первая из них «Standart», в которой содержатся основные настройки:

  • Post List Wrap Selector. Здесь нужно указать класс, с помощью которого осуществляется вывод записей WordPress. Для каждого шаблона он может быть разный.
  • Buttaon text . Текст, который будет написан на кнопке для подгрузки следующих записей. Например, «Загрузить ещё», «Показать ещё» и т.п.
    • animation. 9 эффектов анимации. Выбирать необходимо одну из радиокнопок. Они обозначенный буквами английского алфавита. А ниже можно взглянуть, как та или иная анимация будет выглядеть.
  • Button text color. Опция определяется цвет текста на кнопке для загрузки следующих записей. Цвет той надписи, которую написали в «Button text».

Следующая вкладка «Advanced», в которой собраны дополнительные настройки:

  • Disable Plugin Styles. Можно отключить CSS стили плагин, и оформить кнопку для вывода записей WordPress по собственному желанию, использую собственные стили.
  • Disable Plugin Javascript. Отключает у плагина использование Java script.

Когда все настройки определены, можно посмотреть, как работает вывод записей WordPress бесконечным списком, и подправить что-то, если необходимо.

Надо заметить, что не всем пользователям будет удобен такой вывод записей WordPress. Так, например, если кто-то изучает ваш сайт, и читает статьи, то он, скорее всего, будет запоминать, на какой странице остановился, чтобы в другой раз продолжить оттуда. А если список записей будет бесконечным, то и страниц там не будет. В данном случае такой способ не подойдёт и лучше использовать стандартную пагинацию, например, как .

Есть вопросы? Напиши комментарий!

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте бесконечную прокрутку любых типов записей. Вы сможете сделать бесконечную прокрутку для страниц, записей, медиафайлов, изображений, чата, аудиозаписей, ссылок, галерей, видео и т.д.

Вы сможете добавить бесконечную прокрутку на любую страницу с помощью простого шорткода. Создать шорткод можно прямо из меню визуального редактора WordPress.

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

Установить Супер плагин Ajax Load More – Infinite Scroll вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Для начала нужно настроить основные параметры:

– Container Type, здесь можно изменить тип контейнера, но не обязательно.

– Disable CSS, можно отключить CSS стили плагина, чтобы использовать свои стили. Не обязательно.

– здесь вам нужно выбрать стиль загрузки контента. У вас на выбор два варианта – кнопка или бесконечная прокрутка. Нажмите по полю “Chasing Arrows”, чтобы выбрать подходящий для вас вариант.

– Button Classes, можно добавить классы для кнопки. Не обязательно.

– Ajax Security, защита URL адресов от злоупотребления Ajax запросов. Рекомендуется включить.

– Top of Page, на начальной странице загрузки, переместить окно браузера пользователя в верхнюю часть экрана. Это может помочь предотвратить загрузку ненужных сообщений.

– Dynamic Content, отключить динамическое население категорий, тегов и авторов в шорткод Builder. Рекомендуется, если у вас есть необыкновенное количество категорий, тегов и / или авторов.

– Editor Button, можно скрыть кнопку для создания шорткодов из визуального редактора WordPress, на странице редактирования записи или страницы.

– Error Notices, уведомления об ошибках. Рекомендуется включить.

– Сохраните настройки .

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

Что в первом, что и во втором варианте, настройки абсолютно одинаковые, сейчас мы их разберём:

– Template, шаблон оставьте по умолчанию, ничего менять здесь не надо.

– ID, если вы собираетесь добавлять бесконечную прокрутку на несколько страниц, с разными типами вывода записей, то вам нужно указать здесь уникальный идентификатор, чтобы шорткоды отличались. Нажмите под полем на вкладку – Generate Unique ID, чтобы добавить уникальный ID.

– Container Type, можно указать тип контейнера. Не обязательно.

– Container Classes, можно добавить классы для контейнера, не обязательно.

– 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), можно выводить определённые пользовательские поля, указав здесь их данные. Не обязательно! Оставьте без изменений!

– Search Term, здесь можно указать слово или слова, по которым будут выводиться записи. То есть, если в записи есть такое слово, значит запись будет показана. Не обязательно!

– Post Parameters, здесь можно включить или исключить определённые записи, указав их ID. Можно выбрать статус записи, например, опубликованные или нет.

– Ordering, здесь можно выбрать, по каким параметрам сортировать записи при выводе их в бесконечной прокрутке. Можно оставить по умолчанию.

– Offset, здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.

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

Шорткод необходимо добавить на страницу, где будет бесконечная прокрутка. Если в шорткоде вы выбрали тип записей post, то в бесконечной прокрутке будут выводится последние записи и т.д. Всё очень просто! Плагин лично проверял, всё работает!

Обновлено: Апрель 11, 2019 автором: Илья Журавлёв

Что с помощью технологии AJAX в целях поисковой оптимизации скрыл часть содержимого сайта от поисковых систем (что, кстати, не является клоакингом).

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

AJAX по сути — это динамическая загрузка части содержимого страницы с помощью JavaScript. Т.е. вроде бы на сайте эта часть контента отображается, но, если заглянуть в исходный код страницы, то там его нет. Или, если отключить в браузере поддержку JavaScript, то этого контента также не будет видно.

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

Итак, переходим к практике. Расскажу, как это сделать на WordPress на примере помесячного списка архивов, который выводится обычно в сайдбаре.

Предлагаю 2 варианта решения. Второй — наиболее простой.

Первый вариант

ajax_archives.php ) со следующим содержимым:

Зайдите в админку WordPress и создайте новую страницу. Назовите ее как угодно, например «Список архивов». Справа в блоке «Атрибуты страницы » выберите шаблон «AJAX список архивов».

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

В том месте файла sidebar.php

AJAX мы реализуем с помощью jQuery, поэтому, если он еще не подключен на вашем сайте, в файл header.php перед кодом добавьте следующий код:

Теперь осталось добавить на сайт малюсенький скриптик, который будет загружать нужный контент. Создайте js-файл (например, scripts.js

(function($) { $(function() { $("#archives").load("http://ВАШ_ДОМЕН/ajax_archives/"); }) })(jQuery)

Вместо http://ВАШ_ДОМЕН/ajax_archives/ подставьте адрес выше созданной страницы.

header.php :

Месяцы - Рубрики

get_header(); и get_footer(); получают шапку и подвал шаблона соответственно. get_sidebar(); я вырезал намеренно, чтобы он не мешался в понимании кода. Остальная часть кода выводит выпадающие списки Месяцев и Рубрик.

Пустой блок - это контейнер куда будут выводится результаты запроса, т.е. записи.

2. Оформим выпадающие списки через CSS, для этого добавим такой код сразу после вызова шапки ():

#archive_browser >

На этом этапе у меня получилось следующее:


3. Добавим JavaScript код , который будет выполнять запрос к серверу и выводить его в блок archive_pot (код добавляем после css стилей):