Principal/WordPress Fullstack/Blueprints/Temas personalizados/Desplazamiento infinito (Infinite Scroll) y botón 'Cargar más' con sincronización de History API
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 24 из 54)
Especificación: Desplazamiento infinito (Infinite Scroll) y botón 'Cargar más' con sincronización de History API
Temas personalizados5 шагов • +25 XP

Especificación: Desplazamiento infinito (Infinite Scroll) y botón 'Cargar más' con sincronización de History API

Carga fluida de publicaciones: botón híbrido 'Cargar más' y desplazamiento automático con IntersectionObserver, renderizado de tarjetas en servidor y actualización del número de página en la URL con History API.

~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)

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

La paginación numérica convencional en nuestro blog y noticias resulta anticuada. Queremos un desplazamiento infinito automático con opción de botón 'Cargar más', que actualice la URL en el navegador y conserve la posición al volver atrás.
Ключевые требования:
  • •Marcado semántico del archivo con atributos data-current-page y data-max-pages
  • •Endpoint AJAX / REST que devuelva el HTML de las tarjetas utilizando get_template_part()
  • •Modo híbrido: desplazamiento infinito automático en escritorio y botón manual 'Cargar más' en móviles
  • •Integración con IntersectionObserver API y esqueletos visuales durante la carga
  • •Sincronización de URL en el navegador mediante History API (pushState / replaceState) según la página visible
Ограничения проекта:
  • •Conservar enlaces de paginación estándar en el HTML para los motores de búsqueda
  • •Restablecer la posición de scroll al volver desde la vista detallada de una publicación
  • •Evitar publicaciones duplicadas cuando el usuario se desplace rápidamente
Критерии приёмки (KPI):
  • Tiempo de carga del lote de tarjetas < 250ms
  • 100% de indexación de archivos en los rastreos de Google Search Console
  • Cero desplazamiento acumulado del diseño (CLS = 0) al insertar nuevas tarjetas

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

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

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

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

1
Этап 1 из 5

Paso 1: Preparación del marcado del archivo y alternativa SEO

~30 минЛегкий

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

En index.php / archive.php, envuelva la cuadrícula de entradas en un contenedor con data-max-pages='<?php echo $wp_query->max_num_pages; ?>' y data-page='1'. Renderice the_posts_pagination() dentro de <noscript> o mediante CSS.

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

No elimine por completo el marcado de paginación nativo de WordPress, ya que los motores de búsqueda lo necesitan para rastrear el archivo.

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

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

2
Этап 2 из 5

Paso 2: Controlador AJAX/REST para el renderizado de tarjetas

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

Paso 3: JavaScript en cliente: controlador del botón 'Cargar más'

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

Paso 4: Automatización con IntersectionObserver API

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

Paso 5: Sincronización de URL con History API y restauración de scroll

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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