Documentación · Guía de integración

Integración con el tema

Este documento explica cómo el plugin ADP Car Market Hub se integra con el tema WordPress activo, qué validar después de la instalación o de un cambio de tema, y cómo resolver los conflictos de diseño más comunes.

Cuándo usar este documento

Utilice este documento si está:

Instalando el plugin en un sitio y validando que las páginas de vehículos se renderizan correctamente con el tema activo.
Cambiando de tema en un sitio existente y comprobando que la salida del plugin no se ve afectada.
Diagnosticando problemas de diseño en el archivo de vehículos, en la página de vehículo individual o en las páginas de comparación.
Desarrollando e integrando un tema personalizado con el plugin.

El público objetivo es un administrador, desarrollador o integrador de temas de WordPress. Estar familiarizado con los archivos de temas de WordPress y las herramientas de desarrollo del navegador es de gran ayuda para las secciones de resolución de problemas.

Descripción general

El plugin registra el custom post type as24ci_car con has_archive = true y un slug de URL de cars. Proporciona sus propias plantillas PHP para el archivo de vehículos, el detalle de vehículo individual y las páginas de comparación. Esas plantillas llaman a las funciones estándar de WordPress get_header() y get_footer(), por lo que siempre se utilizan la navegación, la cabecera y el pie de página del tema activo. El plugin solo controla el área de contenido entre la cabecera y el pie de página.

Todo el contenido generado por el plugin está envuelto en un elemento <div class="as24ci-page">. En las páginas de archivo, el elemento también lleva la clase as24ci-archive-page. En las páginas de vehículo individual, lleva as24ci-page-classic. Ambos llevan la clase alignfull, que indica a los temas basados en bloques y de edición completa del sitio que el elemento debe ocupar todo el ancho de la pantalla.

El plugin encola sus propios archivos CSS (limitados a los selectores as24ci-page) y genera un bloque <style id="as24ci-dynamic-styles"> a través de wp_head con prioridad 99 con los valores de diseño de Car Market Hub → Design. Las reglas de tipografía dentro de ese bloque siempre están limitadas a .as24ci-page-classic para que nunca afecten a los elementos del tema fuera del contenedor del plugin.

Requisitos previos

Antes de validar la integración con el tema:

El plugin debe estar instalado y activado, y se debe haber importado al menos un vehículo. Consulte la Guía de instalación.
Los enlaces permanentes amigables deben estar activados (Ajustes → Enlaces permanentes → Nombre de la entrada o cualquier opción que no sea simple). Los enlaces permanentes simples (con cadena de consulta) requieren una configuración adicional para que la URL del archivo de vehículos funcione correctamente.
Debe tener acceso al front-end de WordPress en un navegador.

Lista de comprobación de validación paso a paso

Realice estas comprobaciones después de la instalación inicial o tras cambiar el tema activo.

Página de archivo de vehículos. Visite la URL del archivo de vehículos (normalmente /cars/). Confirme que: - La cabecera y el pie de página del tema son visibles. - Las tarjetas de listado de vehículos se muestran dentro del área de contenido del tema. - Los filtros de búsqueda situados encima del listado son visibles. - No se ven errores de PHP ni HTML sin estilos.
Página de vehículo individual. Haga clic para acceder a cualquier página de detalle de vehículo. Confirme que: - La cabecera y el pie de página del tema están presentes. - La galería de imágenes del vehículo, el título, el precio y la tabla de especificaciones se renderizan correctamente. - El formulario de contacto es visible y funcional.
Diseño de ancho completo. El contenedor del plugin lleva la clase alignfull. En temas de bloques y de edición completa del sitio, esta clase suele hacer que el elemento se extienda hasta el borde de la pantalla. Compruebe que el contenido del plugin no se desborde ni introduzca una barra de desplazamiento horizontal.
Herencia de tipografía. El CSS del plugin utiliza font-family: inherit y font-size: inherit por defecto para el texto del cuerpo dentro de .as24ci-page. Si el tema establece una fuente personalizada en body o en un elemento padre, el plugin la heredará. Compruebe que la tipografía heredada se vea de forma aceptable en las páginas de vehículos.
Comprobación de diseño responsivo. Redimensione la ventana del navegador a los tamaños de pantalla de teléfono y tableta. Confirme que la barra lateral de filtros, la cuadrícula de vehículos y el diseño de vehículo individual sean legibles en pantallas estrechas.
Página de comparación. Si la función de comparación está activada (Car Market Hub → Settings, o en el asistente de configuración), verifique que la página de comparación se renderice correctamente.

Referencia de configuración

Los ajustes que afectan a cómo se ve la salida del plugin junto con el tema activo se encuentran en Car Market Hub → Design.

Ajuste	Efecto
Archive layout	Controla si las tarjetas de vehículos se muestran como una lista o una cuadrícula en el archivo y en las páginas del shortcode `[as24ci_archive]`.
Single vehicle layout	Cambia entre los modos de diseño para la página de detalle de vehículo individual. Actualmente, ambos modos disponibles utilizan la plantilla clásica.
Primary / Accent / Button colors	Sobrescribe la paleta azul predeterminada del plugin. Utilice aquí los colores de marca del concesionario para reducir el conflicto con la propia paleta del tema.
Typography (H1 / H2 / H3 / Body)	Sobrescribe el tamaño de fuente, el grosor, la altura de línea y la transformación de texto para los encabezados y el texto del cuerpo dentro de `.as24ci-page-classic`. Estas modificaciones no afectan a ningún elemento fuera del contenedor del plugin.
Custom CSS	CSS de formato libre que se añade después de todas las demás reglas dinámicas. Limitado a los selectores del plugin. Consulte la Guía de CSS personalizado.

Notas operativas

Las plantillas del tema tienen prioridad. Si el tema activo (o tema hijo) contiene un archivo llamado single-as24ci_car.php o archive-as24ci_car.php en su directorio raíz, WordPress carga ese archivo en lugar de la plantilla incluida en el plugin. Esto es así por diseño y permite una personalización completa a nivel de tema. Consulte la Guía de anulación de plantillas.
alignfull en temas de bloques. Los temas de bloques (Twenty Twenty-Three, Twenty Twenty-Four y similares) suelen renderizar los elementos alineados a ancho completo de borde a borde. Dado que el contenedor del plugin lleva alignfull, sigue este comportamiento. Si su tema de bloques no utiliza la clase estándar alignfull para el contenido de ancho completo, el diseño puede verse más estrecho de lo esperado.
Temas clásicos con anchos de contenido fijos. Algunos temas clásicos envuelven todo el contenido en un elemento <div class="container"> o similar que restringe el ancho. El contenedor interno del plugin tiene un ancho de 1440px por defecto, centrado con margin: 0 auto. En temas con un contenedor fijo más estrecho, el contenido del plugin se limitará al ancho del contenedor del tema. Esto suele ser aceptable, pero puede hacer que el diseño se vea diferente de la vista previa en Car Market Hub → Design.
Estilos de encabezado en conflicto. Los temas que aplican estilos a h1, h2 o h3 de forma global pueden afectar a los encabezados dentro del contenedor del plugin. Si los tamaños o colores de los encabezados se ven incorrectos en las páginas de vehículos, utilice los controles de sobrescritura por encabezado en Car Market Hub → Design o añada una regla específica en el campo Custom CSS. Consulte la Guía de CSS personalizado.
Conflictos de JavaScript. Los temas u otros plugins que cargan jQuery con una prioridad no estándar, o que reemplazan o desactivan jQuery, pueden afectar a la dependencia del filtro de marca a modelo del plugin en la página de archivo. Pruebe el filtrado dinámico (seleccionar una marca y observar cómo se actualiza el menú desplegable de modelos) después de cambiar de tema.
Caché. Después de cambiar de tema o ajustar la configuración de Design, borre cualquier caché de página activa y la caché de objetos para que se entregue el CSS actualizado.

Resolución de problemas

Síntoma	Causa probable	Qué comprobar
Las páginas de vehículos no muestran la cabecera ni el pie de página del tema.	Existe una anulación de plantilla a nivel de tema (`single-as24ci_car.php` o `archive-as24ci_car.php`) en el tema, pero no llama a `get_header()` / `get_footer()`.	Revise el archivo de anulación del tema. Si no lo creó usted, compruebe si el tema incluye una plantilla en conflicto con ese nombre.
La página de archivo devuelve un error 404.	Los enlaces permanentes amigables no están activados, o las reglas de reescritura no se han actualizado después de la activación del plugin.	Vaya a Ajustes → Enlaces permanentes y haga clic en Guardar cambios para actualizar las reglas de reescritura.
Aparece una barra de desplazamiento horizontal en las páginas de vehículos.	El contenedor `alignfull` supera el ancho de la pantalla debido a un problema de `overflow-x` predeterminado del tema o del navegador.	Añada `overflow-x: hidden` al `body` en el tema o en el campo Custom CSS, o reduzca el ancho máximo de `.as24ci-page`.
Los encabezados del plugin utilizan una fuente o tamaño incorrectos.	Las reglas globales de encabezados del tema sobrescriben los valores predeterminados del plugin.	Utilice los controles de tipografía de encabezados en Car Market Hub → Design o añada reglas CSS específicas. Consulte la Guía de CSS personalizado.
Los filtros o el JavaScript de la galería no funcionan.	Un conflicto de jQuery con el tema o con otro plugin.	Desactive otros plugins uno a uno para aislar el conflicto. Compruebe la consola del navegador en busca de errores de JavaScript.
La salida del plugin se muestra sin estilos en un tema nuevo.	El tema ha dejado de encolar los archivos CSS del plugin.	Compruebe si el tema llama a `wp_dequeue_style()` para algún identificador `as24ci-*`. Si es así, elimine esas llamadas o utilice un tema hijo para restaurarlas.