Эта статья не о том, является ли «Загрузить больше» хорошей идеей (я лично так не думаю), а о различных решениях.
Мой стек Wordpress
Я не собираюсь рассказывать вам, как запустить свой стек Wordpress, но в качестве контекста для этой статьи я подумал, что это может быть полезно:
Timber - рефераты Wordpress, позволяющие создавать шаблоны из веток и сверхбыструю разработку. (Я использую 1.0, думаю, проблема с более поздней версией в пантеоне, для целей этого руководства моя версия не должна иметь никакого влияния на манипуляции с API.)
Расширенные настраиваемые поля - Если ваш Wordpress сайт не использует этот плагин, значит, вы, вероятно, делаете что-то не так. ;)
Pantheon - хостинг в стиле Heroku на базе Git
Параметры API Wordpress
Я использую два конкретных API, оба отлично работают с ACF. Однако способ, которым они обрабатывают категоризацию, отличается, и у меня есть свои предостережения по поводу них обоих, поэтому я предлагаю два варианта:
WP Rest API - после перехода на V2 это, вероятно, предпочтительное решение для большинства, я видел, как оно использовалось в ряде реализаций внешнего интерфейса backbone / response, и я даже использовал его для приложения Meteor + React. В качестве полезного примечания, значение страниц фактически передается в заголовке HTTP, поэтому вам нужно получить его вместо того, чтобы напрямую возвращать в ответе JSON.
JSON API - Альтернативный API, I нравится, как он обрабатывает запросы с разбивкой на страницы, но, похоже, у него есть проблемы с запросами категорий. Выбранная реализация для этого конкретного примера.
Загрузить больше реализации
Хорошо, давайте погрузимся в это, я предполагаю, что у вас есть страница с ~ 10 сообщениями или любым количеством сообщений, которое вы хотите обслуживать по умолчанию, и кнопка "Загрузить больше", которая появляется только в том случае, если у вас более 10 сообщений. Если вы используете Timber, это можно сделать следующим образом:
В качестве наилучшей практики я также добавляю js- перед всем своим Javascript в моем коде. Итак, у нас есть кнопка, а теперь давайте займемся JS. Если вы читали другие мои сообщения, то знаете, что я большой любитель npm / vanilla, поэтому в этом примере я не буду использовать jquery.ajax; если вы предпочитаете этот метод, синтаксис не должен сильно отличаться. Я буду использовать пакет reqwest, чтобы делать запросы к API. Поскольку мы не используем jQuery, нам также нужен элегантный способ стилизации наших возвращаемых данных, для чего я использовал макет, просто как предлог, чтобы узнать что-то новое. Вы можете использовать vue.js, react, mithril, yo-yo, с любым вкусом.
Теперь давайте загрузим больше через плагин JSON API, который опубликован выше, а затем загрузим содержимое на страницу:
Импорт
Первое, что мы делаем, это импортируем библиотеки, которые мы используем, так как я уже говорил, что реализация, которую вы выберете, зависит от вас. Я также добавил момент, чтобы стилизовать ответ даты от API.
DOM и состояние
Я кэширую сетку и дополнительную загрузку, а затем также устанавливаю начальное состояние URL-адреса, чтобы мы могли манипулировать им позже, когда мы загрузим больше данных.
Запрос данных
Запрос довольно простой, JSON API имеет довольно простую структуру, использование WP-API почти такое же. Вы можете увидеть пример запрошенного ответа с данными в этой сути, которую я создал (не хочу вставлять ее, потому что она довольно большая).
Затем мы анализируем ответ JSON и просматриваем все сообщения. Также есть немного, где мы проверяем наличие дополнительных страниц и удаляем кнопку «Загрузить еще», если после загрузки текущей страницы больше нет доступных сообщений.
Состояние URL
И последнее, но не менее важное, и, возможно, самое важное - мы запускаем обновление URL-адреса, это необходимо для обеспечения индексации или жесткого обновления во время нахождения на сайте. Некоторый рефакторинг необходим для фактического индивидуального постраничного ответа, если бы вы были на странице / 2 и нажали кнопку «Загрузить», что бы произошло? Я оставляю на ваше усмотрение, как вы справитесь с этим.
Я создал небольшое репо для всех, кто использует Timber или хочет показать пример реализации:
