Кнопка показать еще wordpress. Технология Ajax для WordPress: плагины и их назначение. AJAX-технология: обновление данных страницы без перезагрузки

Здравствуйте, друзья! С каждым годом мы, пользователи сети, становимся все более требовательны к такому показателю веб-ресурсов, как интерактивность. Согласитесь, гораздо удобнее, отправив форму с контактными данными или нажав кнопку «Подписаться», продолжить изучение интересной нам информации на страницах сайта, а не ожидать их перезагрузки. По этой же причине широкую популярность приобрела и бесконечная прокрутка, как во Вконтакте или на Фейсбуке, когда новости подгружаются «на лету» и нет необходимости переходить по ссылкам постраничной навигации.

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

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

AJAX-технология: обновление данных страницы без перезагрузки

Прежде чем мы познакомимся со способами интеграции и использования Ajax в WordPress, давайте разберемся, что скрывается за этим понятием.

AJAX (аббревиатура от Asynchronous JavaScript And XML) – это подход к осуществлению обмена данными между браузером и сервером без перезагрузки страницы. Ajax по сути не является отдельным языком программирования или технологией. Это – способ взаимодействия JavaScript, XML, HTML, CSS с базой данных асинхронно, в фоновом режиме, с помощью которого генерируется какой-то конкретный участок обновленного контента, а не вся страница целиком.

Чтобы лучше понять, чем отличается Ajax-технология взаимодействия пользователя с веб-ресурсом, рассмотрим вначале, как работает стандартная схема обработки пользовательских данных и формирования HTML-страницы:

Например: мы вводим некоторые данные в форму

Браузер формирует HTTP-запрос и передает его серверу. В это время управление страницей блокируется

Сервер обрабатывает его и отправляет данные PHP-скриптам (или другим серверным языкам программирования)

Скрипты совершают требуемые операции с данными (в нашем случае — вносят их в базу данных), генерируют обновленную страницу и возвращают ее серверу

Сервер передает ее браузеру в формате HTTP-ответа

Браузер интерпретирует полученную информацию и отображает в формате HTML-разметки, которую мы и можем видеть. Управление страницей снова становится доступно. При этом все скрипты и стили, подключенные к странице, тоже будут получены повторно.

Это – основа работы интернет-ресурсов. При таком сценарии после каждого обращения к серверу происходит полная перезагрузка страницы.

А как будут выглядеть на блоге WordPress Ajax-запросы?

Для работы с AJAX в WordPress существуют некоторые специальные функции, обработчики и хуки. Но для самостоятельной реализации техники асинхронных запросов требуются знания в JavaScript/jQuery, HTML и PHP. К счастью, движок ВП располагает широким выбором плагинов, которые помогут нам реализовать самые востребованные на Вордпресс-блогах приемы Ajax.

Всегда ли уместно использование Ajax?

Теперь мы с вами знаем, что технология AJAX дает возможность разработчику веб-сайта отбросить классическую схему взаимодействия сервера и браузера, когда последний «замирает» на некоторое время в ожидании ответа на отправленный запрос. Очевидно, что динамическое изменение контента на странице без полной ее перезагрузки улучшает такой показатель, как скорость реакции на совершенное пользователем действие. Это, в свою очередь, отражается наилучшим образом на .

Еще одним аргументом в пользу интеграции Ajax в WordPress-блог можно по праву считать значительную экономию web-трафика. При каждом запросе, поступающем от браузера, сервер не генерирует целую страницу и не передает все относящиеся к ней скрипты и стили.

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

Но при очевидных плюсах AJAX у seo-оптимизаторов существуют основания с осторожностью относиться к данной технологии. Давайте теперь обозначим самые существенные недостатки асинхронных запросов:

• контент, загружаемый динамически, не может быть проиндексирован поисковыми системами. Поисковые роботы не умеют осуществлять переход по JavaScript-ссылкам. Чтобы содержимое вашего ресурса, отвечающее запросу пользователей, не осталось незамеченным, требуются альтернативные способы обеспечения доступа к нему. Один из самых простых – создать страницу карты сайта;
• счетчики статистики (например, ), размещенные на страницах с использованием Ajax, отображают данные некорректно. Это закономерное следствие того, что такие страницы недоступны ботам;
• поскольку содержимое Ajax-страницы формируется «на лету», кнопка «Назад» теряет свою актуальность. Это достаточно неудобно для пользователя, потому что данный способ перемещения по ресурсу – второй по популярности способ навигации после непосредственно перехода по ссылкам;
• загруженную динамически страницу нельзя добавить в «Избранное». У каждой такой группы страниц на AJAX будет адрес самой первой из них;
• большое количество Ajax-запросов при некачественно написанном коде может не ускорить загрузку контента, а наоборот, сделать работу блога медленнее.

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

А мы переходим к практической части нашего знакомства с асинхронными запросами. Далее будут рассмотрены некоторые Ajax-плагины WordPress для реализации самых популярных задач данной технологии.

Плагин бесконечного скроллинга на AJAX

Наверняка вы замечали, что большинство соцсетей использует на своих сайтах эффект бесконечной прокрутки, когда следующие посты/новости/твиты подгружаются автоматически по мере того, как мы скроллим страницу. И отсутствие необходимости отрываться от просмотра информации на переходы по ссылкам пагинации в значительной мере способствует тому, что мы дольше остаемся на таком веб-ресурсе. Очередной пост, появляющийся еще до того, как мы успели прочесть предыдущий, сразу же перехватывает наше внимание. Приходится признать: это затягивает!

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

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

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

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

Если вы все же решили отказаться от привычной пагинации, то одним из самых простых способов реализации Ajax-подгрузки постов на WordPress является использование плагина Ajax Pagination and Infinite Scroll . Функционал плагина позволяет работать с записями, страницами, пользовательскими типами записей и c WooCommerce.

• Theme Defaults . В этом поле необходимо выбрать тему, по отношению к которой мы будем применять технику подгрузки постов на Ajax в WordPress. В выпадающем списке можно увидеть только самые популярные шаблоны, в основном те, которые идут в базовом пакете CMS. Если вы находите подходящий вам вариант, то все последующие поля блока «Wrapper Settings», заполняются автоматически. В том случае, когда вы используете стороннюю тему, потребуется заполнить их вручную;
• Posts Selector . Здесь указывается селектор того блока html-разметки, в который заключены все посты или список продуктов. Если вам приходится прописывать его самостоятельно, воспользуйтесь или другой панелью инструментов разработчика. Ею оснащены и Гугл Хром, и Опера, и все имеют идентичный принцип работы.

Для тестирования Ajax Pagination мною была установлена новая базовая тема ВП «Twenty Seventeen», еще не вошедшая на момент написания статьи в список «Theme Defaults». На скриншоте видно, как выглядит div с соответствующим классом в моем случае.

Проверяем, правильно ли выбраны все необходимые селекторы. Если вы прописывали их вручную, обратите внимание, чтобы перед классами стояла точка. И переходим к следующим опциям.

Настройки блока «Pagination Type Settings» отвечают за то, какой вид Ajax-пагинации WordPress мы применим на нашем веб-ресурсе.

В поле «Paging Type» плагин позволяет нам выбрать один из трех вариантов: Infinite Scroll (бесконечная прокрутка), Load More Button (кнопка «Загрузить еще») и Pagination (привычная пагинация).

Параметр «Infinite Scroll Buffer» устанавливается только в том случае, если был выбран бесконечный скроллинг. Он измеряется в пикселях и означает расстояние от нижней части окна браузера до нижней границы записи. Когда при прокрутке страницы это расстояние будет равно указанному числовому значению, будут динамически загружаться следующие посты. Другими словами, чем выше значение, тем раньше исполняется функция AJAX.

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

В следующем разделе «Loader Settings» мы можем загрузить свой прелоадер в формате gif, если нам не подходит предлагаемый плагином AJAX Loader. Прелоадер – это предзагрузчик, который информирует, что происходит загрузка и необходимо подождать.

Следующий раздел нам понадобиться, если мы выбрали в качестве Ajax-пагиннации для WordPress-блога кнопку «Загрузить еще».

«Load More Button Text»: пропишите текст кнопки загрузки записей.

«Loading More Posts Text»: укажите текст для кнопки, отображающийся во время загрузки. Это по сути аналог предзагрузчика для данного варианта Ajax-пагинации.

Блок с названием «Callback Settings» относится к более продвинутым опциям и нам не понадобится.

Сохраняем изменения и получаем готовый работающий механизм пагинации на AJAX.

Хочется еще отметить, что Ajax Pagination and Infinite Scroll позволяет производить множественные настройки. Например, если на вашем сайте размещена и витрина WooCommerce, и блог, то вам потребуется несколько селекторов на каждый параметр для реализации Ajax-технологии на обеих страницах. Это осуществляется очень просто. Жмем кнопку «Add New» возле заголовка «Ajax Pagination Settings» и проделываем те же шаги. В результате формируется еще одна страница настроек. Для удаления такой страницы воспользуйтесь кнопкой «Delete» размещенной в нижем левом углу. Кнопка появляется только в том случае, если создано более одной страниц настроек.

Фильтры товаров на WooCommerce

Для любого современно интернет-магазина возможность осуществлять фильтрацию по различным категориям без перезагрузки страницы – это своеобразный маст-хэв. Если вы уже произвели основные своего проекта и создали атрибуты товаров, то пришло время позаботиться об интеграции в свой магазин на WordPress Ajax-фильтров продуктов. Как это делается, узнаем на примере плагина YITH WooCommerce Ajax Product Filter .

После установки и активации плагина в админ-панели CMS появляется новый пункт меню «YITH Plugins», с двумя подпунктами: «Ajax Product Filter» и «How to install premium version». Маловероятно, что они нам понадобятся. На странице Ajax Product Filter во вкладке «Front End» необходимо указать селекторы определенных блоков по аналогии с «Wrapper Settings» плагина Ajax Pagination And Infinite Scroll, рассмотренного нами ранее. Но делать это самостоятельно нужно только в том случае, если вы создали интернет-магазин не на основе шаблона WooCommerce.

Открыв таб «Custom Style», вы можете вручную ввести свой кастомный код css-стилей, чтобы изменить оформление тех или иных элементов плагина.

Вкладка «Premium Version» предоставляет информацию о преимуществах премиум-версии шаблона. А подпункт меню «How to install premium version» — о том, как инсталлировать платный вариант YITH WooCommerce Ajax Product Filter. Одним из явных преимуществ премиальной версии является возможность фильтрации по ценовому диапазону.

Помимо пунктов меню, плагин создает в разделе «Внешний вид» — «Виджеты» 2 новых виджета: «YITH WooCommerce Ajax Product Filter» и «YITH WooCommerce Ajax Reset Filter». Разместим их в сайдбаре страницы магазина.

«YITH WooCommerce Ajax Product Filter» предполагает следующие настройки:

Допускается неограниченное количество расположенных в сайдбаре блога WordPress Ajax-фильтров.

В виджете «YITH WooCommerce Ajax Reset Filter», который отвечает за сброс всех фильтров, от нас требуется только название («Title») и текст, отображающийся на кнопке («Button Label»).

Вот так может выглядеть Ajax-фильтр, созданный с помощью данного плагина:

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

Если после установки и произведения настроек плагина фильтр Ajax для wordPress не работает, проверьте, добавлены ли товарам атрибуты и относится ли используемая вами тема к стандартным шаблонам WooCommerce.

WP Ajaxify Comments: комментарии с помощью технологии AJAX

После отправки комментария на Вордпресс-блоге по умолчанию происходит перезагрузка страницы, чтобы мы могли увидеть новое добавленное посетителем сообщение. В случае возникновения ошибки, например, если была отправлена пустая форма комментариев, открывается страница с сообщением о некорректном действии. Пользователь вынужден возвращаться к нужной ему записи по ссылке «Назад». Это достаточно неудобно.

На сегодняшний день разработано достаточное количество плагинов, позволяющих реализовать на WordPress комментарии по Ajax-технологии. Одно из популярных решений – WP Ajaxify Comments . Данный плагин не создает свою систему комментирования, а просто добавляет уже существующей в шаблоне функциональность асинхронных запросов.

Устанавливаем, активируем и переходим в настройки по адресу в консоли «Настройки» — «WP Ajaxify Comments». Если вы используете одну из стандартных тем движка, достаточно поставить галочку напротив поля «Enable Plugin» и сохраниться. Тем самым вы активируете работу плагина. Дело в том, что для работы ему необходим доступ к некоторым элементам разметки, обозначенным тем или иным селектором. В базовых настройках уже прописаны значения этих селекторов, используемых в стандартных шаблонах WP («Twenty Seventeen», «Twenty Sixteen» и т.д). Если вам нужно назначить кастомные классы или id элементов, чтобы найти их в структуре страницы, воспользуйтесь способом, о котором мы говорили ранее в контексте создания бесконечного сроллинга.

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

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

Вот для наглядности видео по установке и настройке плагина WP Ajaxify:

Это все, что я хотела вам рассказать сегодня о способах применения Ajax в WordPress. Теперь мы знаем, что данная технология может сделать пользовательский интерфейс еще более удобным и быстрым. А помочь в вопросе ее интеграции в Вордпресс могут такие плагины, как: Ajax Pagination and Infinite Scroll, YITH WooCommerce Ajax Product Filter, WP Ajaxify Comments.

Подгрузка контента (кнопка показать еще) wordpress(ajax)

Один из заказчиков попросил меня сделать на сайте динамическую подгрузку контента(постов, записей) или под другому «кнопка показать еще». Дизайн с таким решением становится очень популярным. Подобный прием можно увидеть в твиттере, вконтакте. Для wordpressa к сожалению плагинов способных решить эту задачу очень мало, я нашел только один плагин , но он мне не очень понравился поэтому я продолжил искать решение. И наткнулся на тему sight, там для создания динамической подгрузки постов используется библиотека jquery.

Для создания динамической подгрузки контента нам понадобится два файла: ,

Файлы jquery.cookie , script надо будет загрузить в папку js которая находится в папке с вашим шаблоном если такой папки нет, то ее нужно создать. Далее необходимо в файле header.php прописать пути к скриптам.

//поместить между тегами

После того как вы прописали пути к скриптам надо не много подправить файл index.php или любой другой файл, где вы планируете сделать динамическую подгрузку постов. Необходимо добавить id = «loop» в контейнере постов,class = «post» в блоке вывода поста, id = «pagination» в том месте где вы хотите разместить кнопку «Показать еще». Код должен выглядеть примерно вот так:

**** ****

Результат работы:

Для работы скрипта необходима библиотека jquery библиотеку можно подключить так

Шаблон для тестирования подгрузки контента

Для того чтобы протестировать подгрузку нужно скачать шаблон закачать в папку wordpress с шаблонами затем выбрать в панели администратора шаблон с названием test

Если вам нравится мой ресурс и вы хотите поддержать меня финансово, то вы можете перечислить сумму используя следующие реквизиты:

• Яндекс кошелек - 410014625168542
• Webmoney - R429373694729

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

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта 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 автором: Илья Журавлёв

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

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

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

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

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

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

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

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

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

var ajaxurl = " "; var current_page = ; var max_pages = " "; Загрузить ещё

Ajaxurl Это в WordPress. true_posts Сериализованный массив, содержащий все необходимые параметры запроса, является . current_page Номер .

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

#true_loadmore { background-color : #ddd ; /* сервый фон */ border-radius : 2px; /* закругление углов */ display : block ; /* блочный элемент, на случай, если захотите использовать */ 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

var ajaxurl = " /wp-admin/admin-ajax.php"; var true_posts = " "; var current_page = ;

Во-вторых, стили 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" ) ) { $.ajax ({ url: ajaxurl, data: data, type: "POST" , beforeSend: function ( xhr) { $("body" ) ; } , success: function (data) { if ( data ) { $("#true_loadmore" ) .before (data) ; $("body" ) ; current_page++; } } } ) ; } } ) ; } ) ;

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