Разное

Ajax load more настройка – Бесконечная прокрутка Супер плагин WordPress – info-effect.ru

26.11.2017

Содержание

Бесконечная прокрутка Супер плагин WordPress – info-effect.ru


Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта 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, уведомления об ошибках. Рекомендуется включить.

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

 

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

info-effect.ru

Бесконечная прокрутка на WordPress с помощью плагина Ajax Load More

Ничего так не затягивает, как лента новостей на Facebook. Даже сейчас, сидя в попытках написать пост, эта штука не дает мне покоя! Это (частично) потому, что Facebook использует бесконечную Ajax прокрутку для своей новостной ленты. Вместо того, чтобы нажать на Читать дальше или кнопку Далее, страница просто продолжает загружаться.

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

Смотрите также:

В этом посте мы расскажем о плюсах и минусах бесконечной прокрутки, а затем покажем, как настроить её на WordPress, используя плагин под названием Ajax Load More.

Преимущества бесконечной прокрутки на WordPress

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

  • Больше просмотров страниц — NBC News обнаружили, что с помощью бесконечной прокрутки ленты ПК-пользователи посмотрели на 20% больше страниц за одно посещение. Точно так же установил сайт газеты Time, что 21% пользователей посмотрел вторую часть содержания с помощью бесконечной прокрутки.
  • Показатель «ненужных просмотров» — газета Time также снизила показатель отказов на 15%, когда они применили бесконечную прокрутку.
  • Преимущества для пользователей. Не все могут с этим согласиться. Но, некоторые эксперты заявили, что бесконечная прокрутка повышает UX, предлагая пользователям больше соприкосновения с материалами, требуя при этом меньше нажатий.

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

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

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

Недостатки бесконечной прокрутки на WordPress

Есть, безусловно, и некоторые потенциальные недостатки:

  • Отсутствие футера — при переходе к бесконечной прокрутке вы не можете прокрутить страницу вниз к футеру. Конечно, ничего страшного здесь нет, но надо принять это во внимание, если вы используете футер вашего сайта для получения важной информации. Например, если вы используете сноски для вставки информации, вам нужно будет найти новый способ для ее отображения.
  • Дерганная полоса прокрутки – то, что больше всего не любят пользователи. Поскольку сайт постоянно загружается, полоса прокрутки в браузере будет двигаться взад и вперед. У некоторых может возникнуть чувство обмана и это приведет к негативному впечатлению.
  • Нет ощущения «завершения». Исследователи компании Nielsen обнаружили, что пользователям на самом деле нравится чувство «завершения», когда они достигают конца страницы. Бесконечная прокрутка делает это ощущение невозможным.

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

Если ваши посты в блоге имеют различный смысл (например, путеводители на 2000 слов или просто короткое сообщения на 300 слов), то бесконечная прокрутка, вероятно, не является хорошей идеей для вашего сайта.

Как добавить бесконечную прокрутку на WordPress

Чтобы добавить бесконечную прокрутку на WordPress, вы можете использовать бесплатный плагин Ajax Load More. Плагин имеет множество дополнений, которые могут повысить его функциональность, но для того, чтобы добавить простую бесконечную прокрутку на ваш сайт, достаточно и обычной версии.

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

Настройки плагина

Установите и активируйте Ajax Load More, как и любой другой плагин.

После того, как он активируется, вы увидите новый раздел меню на боковой панели. Перейдите к Ajax Load More → Repeater Template для создания своего шаблона.

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

Важно отметить то, что стандартный шаблон будет показывать только фрагменты постов, а не полные сообщения. Если вы хотите отобразить полные сообщения, вам нужно заменить the_excerpt() на the_content()

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

Создайте шорткод для отображения постов в бесконечной прокрутке

Далее, вам нужно создать шорткод, который вы будете использовать для отображения бесконечной прокрутки. Перейдите к Ajax Load More → Shortcode Builder:

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

  • Типы постов — стандартный шаблон будет содержать только Записи. Но вы также можете включать Страницы или другие типы кастомных постов.
  • Категории — вы можете включать и исключать только определенные категории.
  • Автор — интересная особенность: вы можете добавить бесконечную прокрутку для конкретного автора.
  • Количество постов на странице — установите, сколько сообщений Ajax Load More должно загружаться каждый раз при обновлении.
  • Пауза — это, безусловно, важная особенность. Для правильной бесконечной прокрутки сделайте значение False. Если пометить его как True, пользователи должны будут щелкнуть кнопку «Load More», чтобы получить больше сообщений.
  • Прокрутка — вы включаете эту функцию, и сообщения автоматически загружаются, когда читатели прокручивают их вниз.

Осмотрите все настройки. Как минимум, убедитесь, что вы настроили все вышесказанное. После того, как вы все установите, скопируйте шорткод с правой стороны страницы:

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

При публикации этой страницы, вы должны увидеть бесконечную прокрутку на WordPress!

Итоги

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

Ajax Load More — самый простой способ добавить бесконечную прокрутку в WordPress. Вам не нужно никаких дополнительных настроек, если вы просто используете плагин для стандартной бесконечной прокрутки. Нет ничего сложного и в установке: 15 минут — и ваш сайт на WordPress заработает с бесконечной прокруткой.

Источник: wplift.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Отправить рейтинг

Средний рейтинг: 4.9 / 5. Количество голосов: 9

Смотрите также:

hostenko.com

Бесконечная прокрутка Супер плагин 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» отображается код шаблона записей, которые будут отображаться в бесконечной прокрутке. Доступен только один шаблон, можно заказать дополнительные темы, но уже платно. Если вы разбираетесь в коде, то вы можете его изменить под себя.

 

 

wdfiles.ru

Ajax Load More — WordPress infinite scroll — Плагин для WordPress

Ajax Load More is the best wordpress infinite scroll plugin to list wordpress posts, blogs and woocommerce products as admin selected categories and supports custom posts using ajax load more pagination, next-previous links or numeric pages. It has fully customizable and responsive templates and allows to hide/show certain categories posts.

This plugin supports unlimited shortcodes and widget for the home and sub-pages content blocks and sidebar using advanced shortcode generation forms from the wordpress admin panel. It allows to build unlimited views of ajax category posts list and grid using the shortcode functionality with various ajax pagination options. You can create shortcode of the ajax load more pagination/infinite scroll for posts, blog, products and custom post type content. After the plugin installation and activation, you will see the APLM menu into left side amdin menu from where you can create unlimited shortcodes by easy and rich shortcode UI.

You can also create a page to show recent posts by specific category selection or display posts from category shortcode in wordpress. There are many different animation style of the image hover and beautiful and attractive templates.

Easy to Create Shortcode

[richpostslistandgrid]

[richpostslistandgrid post_type='post' category_type='category' ]

[richpostslistandgrid rplg_image_height='150' rplg_image_content_width='220' post_type='post' category_type='category' ]

You can get full arguments list and details of the shortcode at Ajax Load More plugin page. This plugin has also advanced shorcode creation tool in admin panel by which you can select the required settions and gets the shortcode. It can be used in any pages or posts in your site to show the list of category posts.

It auto scale and resize image as per specified size in pixels like
[richpostslistandgrid post_type=’post’ rplg_image_height=’180′ rplg_image_content_width=’240′ category_type=’category’ ]

Buy or Read Full Documentation
Premium Version Demo
Free Version Features
  • Infinite scroll shortcode creation functionality.
  • Supports ajax load more posts.
  • Responsive view.
  • Various modern and attractive listing posts templates.
  • Customizable text and background color for the widget heading.
  • Supports posts grid view with post image.
  • Ajax Load More with ajax pagination.
Features of Pro Ajax Load More
  • Custom settings available to hide or show post title, content, search box, post image, pagination, post short content and read more link.
  • Infinite scroll button
  • Dynamic admin configuration to change maximum width and height of images.
  • There are three type of ajax pagination available like load more products, next-previous links and simple numeric pagination.
  • Allows to configure custom post types like blog, news, articles and more.
  • 40+ beautiful posts mousehover animation effects.
  • Allows to short/order ascending or descending posts/custom posts by post id and title.
  • Allows to configure unlimited shortcodes.
  • Allows to configure search text field to search the posts.
  • Supports posts list and grid view and hide the post image.
  • Allows view or hide post count.
  • View or hide certain categories posts.
  • It supports the RTL view.
  • Advanced shortcode generation functionality.
  • Allows to change space between posts items in pixels.
  • Allows to hide/show posts author name and image.
  • View or hide posted date and comments count with posts.
  • Allows to view into any page content or body.
  • Allows to resize image and content block.
  • Admin settings of category wise display posts, custom posts, blog and products by shortcode.
  • Sorting by ascending or descending of the posts ID or Date.
  • Category selection to show posts from specific category wordpress.
Support Details
Other Recommended Amazing WordPress Tabs and Accordion Plugins

You might like following recommended paid and free tabs plugins that supports wordress and woocommerce tab widget and shortcode creation using an amazing ajax load more functionality for the sidebar and content area.

Category Tabs Plugins
Category Accordion Plugins
Products list and grid view with Ajax pagination
Want to create new language translation for your site?
  1. Upload and extract the zip file downloaded to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Navigate to ‘APLM’ page from dashboard and create new shortcode to add into any page content
  4. Configure widgets from Appearance > Widgets and assign «Rich Posts List & Grid View» into page sidebar.

You can get frequently asked questions of our category posts list wordpress plugin.

Can we override or change designing templates and style of posts list?

Yes, There is dynamic text and background color selection from admin panel. It has also lots of more features to edit elements of the our plugin.

Can I use multiple widgets on the same page?

Yes, Supports multiple widgets to display category wise posts and products on same or any pages sidebar. We have also added many new features in widget configuration like hide and show various elements, change color of posts title text, ajax pagination style selection and various Ajax Load More templates.

Can I use multiple wordpress posts listing shortcode on the any pages?

Yes, Our plugin supports multiple shortcode creation of the category posts listing, There two ways to create shortcode like directly create shortcode as above method [richpostslistandgrid] and specify required arguments from Ajax Load More and other way is to create shortcode from ‘APLM’ from admin sidebar menu where you just need to select the required settings and get the shortcode.

Is it supports to display category wise product in woocommerce?

Yes, it allowed to change custom posts to woocommerce and to show category wise product in woocommerce. You can also use with more features for the wordpress listing product — wordpress product listing

Can we get paid developer support?

We are happy to help you and give you supports of Ajax Load More — Infinite Scroll Plugin. please create support ticket on ikhodal.com

How can I create shortcode?

There is a menu called ‘APLM’ into admin sidebar after the plugin activation where you can create unlimited shortcodes of category wise posts listing.

«Ajax Load More — WordPress infinite scroll» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники
2.1.0
  • Added new templates and animations.
  • Bug fixes and WordPress 5.1 testing.
  • Changed all features of the plugin.
  • List category wise posts, products and any custom posts like blog, news, story etc.
  • Advanced shortcode creation functionality.
  • Supports woocommerce products.
  • Recent posts by specific category wordpress.
  • Allows to create custom widget
  • Requires PHP 5.6+
1.0.0
  • lists posts Plugin released.
  • category filter by ids
  • WordPress 1.9 testing.
  • Changed demo url.

ru.wordpress.org

Бесконечная прокрутка и постраничная навигация на WordPress

Пагинация – это постраничная навигация. В современном веб-дизайне она может быть оформлена по-разному. Из распространённых методов создания пагинации следует отметить следующее:

  • Стандартную постраничную навигацию – когда внизу каждой страницы выводятся нумерованные ссылки на другие страницы или просто кнопки «Назад» и «Вперёд».
  • Бесконечная автоматическая навигация – когда записи и следующие страницы автоматически подгружаются по мере прокрутки скролла.
  • Бесконечная ручная навигация – когда записи со следующих страниц подгружаются после нажатия пользователем специальной кнопки.

В этой статье мы расскажем вам, как реализовать пагинацию всех трёх типов с помощью одного плагина.

Постраничная навигация плагином Ajax Pagination and Infinite Scroll

Вот такое длинное и говорящее само за себя название плагина, который реализует бесконечную и постраничную навигацию. Надо заметить, что он достаточно лёгкий, не нагружает сайт слишком сильно, так что не повлияет на продвижение негативно. Скачайте, установите и активируйте плагин, потом перейдите в его опции, которые находятся в пункте консоли «Настройки» и подпункте «Ajax Pagination settings». Здесь имеются следующие опции:

  • Theme Defaults. Выбирается шаблон, к которому будет применена бесконечная или постраничная навигация. В выпадающем списке имеются все загруженные шаблоны. Также надо заметить, что этот плагин поддерживает и шаблоны, написанные под плагин WooCommerse. О нём мы рассказывали здесь.
  • Posts Selector, Navigation Selector и Next Selector. Эти поля должны заполняться автоматически при выборе того или иного шаблона, к которому будет применяться бесконечная или постраничная навигация. Это CSS селекторы из таблицы стилей, которые оформляют тот иной элемент сайта. Так как можно ввести любые данные, можно оформить какие-то элементы по собственному дизайну, создав свой селектор в CSS.
  • Paging Type. Выбирается тип пагинации. Всего их три: Infinite Scroll – бесконечная автоматическая загрузка, Load More Button – бесконечная ручная и Pagination – постраничная навигация.
  • Infinite Scroll Buffer. Если выбрана автоматическая бесконечная прокрутка, то этот параметр показывает, за сколько пикселей до конца страницы начнут подгружаться записи со следующей страницы навигации.
  • Load More Button Text. Если выбрана бесконечная ручная навигация, то здесь вписывается текст, который будет отображаться на кнопке для загрузки следующих постов, например «Загрузить ещё».

В плагине бесконечной и постраничной навигации есть ещё настройки, но мы их не рассмотрели, так как они не очень влиятельные. После сохранения всех изменений можно посмотреть, как работает этот плагин.

Загрузка…

Также по этой теме:

wpuroki.ru

Подгрузка постов на AJAX в WordPress. Бесконечный скроллинг.

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

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

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

Что мы попробуем сделать в этом посту?

  • Загрузку постов при нажатии на кнопку Загрузить ещё.
  • Бесконечную загрузку, т е посты и комментарии будут подгружаться автоматически при прокрутке страницы (да, как во вконтакте).
  • Сделаем так, чтобы подгрузка постов работала для любых архивов таксономий.

Шаг 1. Добавление кнопки «Загрузить ещё» 

Для начала нам надо найти файл, в котором добавляется постраничная навигация. В TwentySeventeen этот файл — прямо index.php. Если вы не понимаете, в каком файле надо искать в вашей теме, рекомендую взглянуть на этот туториал.

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

Найдите соответствующее место в шаблоне за пределами цикла while, то есть после того, как заканчивается вывод постов (в TwentySeventeen это место практически сразу после endwhile) и вставляем туда код:

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<script>
	var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
	var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
	var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
	var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
	</script>
	<div>Загрузить ещё</div>
<?php endif; ?>
ajaxurl
Это обработчик AJAX-запросов в WordPress.
true_posts
Сериализованный массив, содержащий все необходимые параметры запроса, является свойством класса WP_Query.
current_page
Номер текущей страницы.

А теперь немного стилей, которые мы добавим на нашу кнопку, чтобы она круто выглядела (стили можно вставить в стандартный style.css в папке с темой).

#true_loadmore{
	background-color: #ddd; /* сервый фон */
    	border-radius: 2px; /* закругление углов */
    	display: block; /* блочный элемент, на случай, если захотите использовать <a> */
    	text-align: center; /* выравнивание текста по центру */
    	font-size: 14px; font-size: 0.875rem; /* размер шрифта */
    	font-weight: 800; /* начертание */
    	letter-spacing: 1px; /* межбуквенный интервал */
    	cursor: pointer; /* курсор мыши при наведении такой же, как при наведении на ссылку */
    	text-transform: uppercase;
    	padding: 10px 0; /* внутренние отступы сверху и снизу у кнопки */
    	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; /* CSS-анимация*/
}
#true_loadmore:hover{
	background-color: #767676;
	color: #fff;
}

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

Самый легкий шаг позади.

Шаг 2. Подключение скриптов jQuery 

Документация функций wp_enqueue_script() и get_stylesheet_directory_uri() в помощь. Про подключение скриптов я писал часто и подробно, поэтому сейчас на этом останавливаться не будем, если есть проблемы — смотрите документацию. А этот код — в functions.php.

function true_loadmore_scripts() {
	wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
 	wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );

Шаг 3. Скрипт асинхронной загрузки 

Вы ещё не создали файл loadmore.js в папке с темой? Давайте создадим его и добавим туда следующий код:

jQuery(function($){
	$('#true_loadmore').click(function(){
		$(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					$('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Я постарался сделать этот код максимально простым, дополнительными переменными усложнять его не стал. Если вы хотя бы немного разбираетесь в jQuery, то у вас не возникнет с ним никаких проблем. Даже если не разбираетесь, но сделаете всё по инструкции, то всё тоже будет ок.

Шаг 4. Обработчик PHP, вывод постов 

Этот код также отправляется в файл functions.php. Если он вам непонятен, читайте подробнее про WP_Query и query_posts().

<?php
function true_load_posts(){
 
	$args = unserialize( stripslashes( $_POST['query'] ) );
	$args['paged'] = $_POST['page'] + 1; // следующая страница
	$args['post_status'] = 'publish';
 
	// обычно лучше использовать WP_Query, но не здесь
	query_posts( $args );
	// если посты есть
	if( have_posts() ) :
 
		// запускаем цикл
		while( have_posts() ): the_post();
 
			get_template_part( 'template-parts/post/content', get_post_format() );
 
		endwhile;
 
	endif;
	die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Бесконечная загрузка постов при прокрутке страницы. 

Суть в том, что вы просто скроллите страницу вниз, а новые посты подгружаются по мере её прокрутки. Насколько я помню, впервые такая штука появилась у твиттера (могу ошибаться, поправьте, если я не прав), а потом уже все стянули её оттуда.

Скажу честно — заразная вещь. Те, кто сидят на сайте вконтакте, понимают это прекрасно. Так что, если у вас новостной сайт, тогда этот способ загрузки постов просто «must have».

Если вы сделали все предыдущие шаги из поста и дошли до этого момента — тогда отлично, добавим некоторые изменения для шагов 1 и 3.

Во-первых, кнопка Загрузить ещё нам больше не понадобится, поэтому немного изменим HTML-код:

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<script>
	var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
	var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
	var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
	</script>
<?php endif; ?>

Во-вторых, стили CSS нам тоже больше не нужны, если вы их добавляли, можете напрочь удалить.

В-третьих, содержимое файла loadmore.js изменится и будет следующим:

jQuery(function($){
	$(window).scroll(function(){
		var bottomOffset = 2000; // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		if( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')){
			$.ajax({
				url:ajaxurl,
				data:data,
				type:'POST',
				beforeSend: function( xhr){
					$('body').addClass('loading');
				},
				success:function(data){
					if( data ) { 
						$('#true_loadmore').before(data);
						$('body').removeClass('loading');
						current_page++;
					}
				}
			});
		}
	});
});

Файл functions.php (это шаги 2 и 4) мы оставляем без изменений.

Надеюсь, что не запутал вас. Если возникнут трудности или какие-то вопросы, вот вам видео:

А чуть ниже можете почитать комментарии.

Миша

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

misha.blog

Lazy Load на сайте WordPress: этап ускорить загрузку сайта

Вступление

В своих экспериментах по ускорению сайта WordPress, наткнулся на интересный прием, под названием Lazy Load. Дословный перевод «ленивая нагрузка», ничего не говорит. А вот разумный перевод «отложенная загрузка» начинает прояснять суть приёма lazy load.

Что такое Lazy Load

Метод Lazy Load позволяет браузеру не загружать сразу всю страницу сайта, а открывать её по мере её прокручивания пользователем до появления на экране.

Общий метод Lazy Load, позволяет откладывать загрузку текстов, картинок, фреймов, видео, в общем всего. Применительно к сайтам WordPress, плагины, которые можно объединить тегом Lazy Load, откладывают загрузку картинок, миниатюр, фреймов, аватарок.

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

Возможные недостатки Lazy Load

Дело в том, что команда «отложить загрузку», может работать  не только для браузеров, но и для поисковых ботов, которых сотня.

Вполне возможно, что такое «отложение» может восприняться ботами, как команда на запрет обхода. Например, роботы поисковика Яндекс, YandexMedia и YandexImages  или робот Google Image Search, могут (в теории) перестать видеть картинки и медиафайлы.

В теории, потому что всё зависит от выбранной реализации Lazy Load на WordPress, а проще говоря, от плагина из группы «Lazy Load».

Проверка

Прежде чем остановиться на плагинах Lazy Load, напомню, как проверять сайты на видимость поисковых систем. В одной из прошлых статей, я рассказывал, как Яндекс выкинул все сайты из индекса из-за прокола HTTP/2, Lazy Load может быть из той же серии.

Проверить, как поисковые роботы видят ваш сайт, можно (и нужно) на специальных вкладках в инструментах для веб-мастеров:

Яндекс. Вкладка Инструменты>> Проверка ответа сервера. Выбираете робота и смотрите ответ сервера. Не ограничиваете результат ответом «200 OK», этого мало. Спуститесь вниз и откройте ссылку «Содержание страницы».

Google. Search Console, инструмент Fetch as Google (Просмотреть как Google). Вкладка: Сканирование>>Посмотреть как Googlebot.

Плагины Lazy Load на сайте WordPress

Не буду утомлять длинными списками плагинов Lazy Load, тем более их не много. Приведу, несколько актуальных плагина. Актуальными называю обновляемые плагины. На данный момент обновленными для версии WP 4.8.2.

BJ Lazy Load

BJ Lazy Load

Этот плагин заменяет все ваши почтовые изображения, миниатюры сообщений, изображения gravatar и контентные iframes с помощью заполнителя и загружает контент по мере приближения к окну браузера, когда посетитель прокручивает страницу. Также работает с текстовыми виджетами. Поскольку он работает с iframe, он также охватывает встроенные видеоролики с YouTube, Vimeo и т. д.

 

От автора WP Media

Lazy Load by WP Rocket

Lazy Load отображает изображения и / или iframes на странице только тогда, когда они видны пользователю. Это уменьшает количество механизмов запросов HTTP и улучшает время загрузки.

Этот плагин работает с эскизами, всеми изображениями в сообщении или в виде виджета, аватарах, смайлах и iFrames. Нет библиотеки JavaScript, такой как jQuery, и вес скрипта меньше 10 КБ.

WordPress Infinite Scroll — Ajax Load More

WordPress Infinite Scroll — Ajax Load More

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

Lazy Loading Responsive Images

Lazy Loading Responsive Images

Плагин не работает с фоновыми изображениями CSS и не работает для изображений на страницах вложений (wp_get_attachment_image).

Lazy Load

Lazy Load на сайте WordPress

Lazy Load

Этот плагин не обновлялся более года, но имеет 90 тысяч пользователей и создан WordPress.org. Плагин простой, понятный в настройках (да-нет), ботам не мешает, я проверял.

Выводы

  • Не вижу причин, почему не использовать плагины «Lazy Load» для картинок, видео и комментариев.
  • Сомневаюсь, что отложенная загрузка текстов по типу бесконечная прокрутка «понравится» поисковым роботам.
  • Обязательно проверьте сайт на видимость у поисковиков после установки и активации плагина Lazy Load на сайте WordPress.

©www.wordpress-abc.ru

Еще статьи

Похожие посты:

www.wordpress-abc.ru

Добавить комментарий

Ваш адрес email не будет опубликован.