Главная/WordPress Fullstack/Блупринты/Кастомные темы/Бесконечная лента (Infinite Scroll) и кнопка «Загрузить еще» с сохранением истории URL
К карточкам раздела «Кастомные темы»
Кастомные темы(ТЗ 24 из 54)
ТЗ: Бесконечная лента (Infinite Scroll) и кнопка «Загрузить еще» с сохранением истории URL
Кастомные темы5 шагов • +25 XP

ТЗ: Бесконечная лента (Infinite Scroll) и кнопка «Загрузить еще» с сохранением истории URL

Бесшовная подгрузка постов в архивах и блоге: связка IntersectionObserver и кнопки Load More, отдача фрагментов через get_template_part(), обновление адресной строки (History API pushState) и SEO-фоллбек.

~8 ч работыУровень: MiddlePHP 8.3IntersectionObserver APIHistory API (pushState / replaceState)paginate_links()get_template_part()WP REST API / wp_ajax
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

ТЗ заказчика (исходный бриф):

«На странице блога и новостей стандартная постраничная навигация выглядит устаревшей. Нужна кнопка «Загрузить еще» с возможностью включения бесконечной прокрутки, при этом при подгрузке новых постов URL в строке браузера должен корректно обновляться (/page/2/, /page/3/), чтобы при перезагрузке пользователь оставался на том же месте, а поисковики видели стандартные ссылки.»
Ключевые требования:
  • •Кнопка «Показать еще» с индикатором загрузки и оставшимся количеством материалов
  • •Автоматическая подгрузка при скролле (IntersectionObserver) с возможностью остановки
  • •Синхронизация URL в адресной строке (/page/N/) без перезагрузки страницы
  • •Сохранение стандартных ссылок пагинации в HTML для поисковых краулеров (SEO-фоллбек)
  • •Переиспользование готового шаблона карточки через get_template_part("template-parts/card")
Ограничения проекта:
  • •0 дублирования верстки карточки между PHP и JavaScript
  • •Корректная работа кнопки «Назад» в браузере (сохранение скролла)
  • •Работа без тяжелых jQuery-плагинов
Критерии приёмки (KPI):
  • Время отдачи фрагмента страницы < 70 мс
  • 100% индексация всех страниц пагинации краулерами Google и Yandex
  • Плавная CSS-анимация появления новых карточек

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Подготовка базовой разметки архива и SEO-фоллбека

~30 минЛегкий

Практическое руководство:

В файле index.php или archive.php темы выведите сетку постов. Внизу выведите стандартные ссылки пагинации через paginate_links(). Добавьте контейнеру data-атрибуты с текущей страницей и максимальным числом страниц ($wp_query->max_num_pages).

План и контрольные точки реализации:
1Вывести сетку постов через get_template_part("template-parts/content-card")
2Добавить data-max-pages и data-current-page к контейнеру
3Вывести серверную пагинацию paginate_links() как фоллбек
Важные технические нюансы и подводные камни:

Не удаляйте серверную пагинацию — добавьте ей класс .no-js-pagination, который JS скроет при инициализации.

Ожидаемый артефакт этапа:

Семантическая разметка архива, полностью готовая к SEO-индексации.

2
Этап 2 из 5

Создание AJAX/REST обработчика для рендеринга карточек

~40 минСредний
3
Этап 3 из 5

Клиентский JavaScript: обработка кнопки «Загрузить еще»

~35 минЛегкий
4
Этап 4 из 5

Автоматизация скролла через IntersectionObserver API

~40 минСредний
5
Этап 5 из 5

Синхронизация URL страницы через History API

~25 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами