Estilos y scripts generados

POM Theme crea estilos y scripts optimizados a partir de los ajustes y del contenido del maquetador de páginas del sitio actual. Esto permite que un sitio use sus propios colores, tipografía, espaciado, fondos, cabecera, pie de página, aviso de cookies y estilos de elementos sin cargar todas las reglas posibles del tema.

La generación normalmente se produce automáticamente cuando se guardan ajustes relevantes o contenido de páginas.

Al activar POM se materializa cada archivo de ajustes de Opciones del tema que falte a partir de los valores predeterminados actuales de los campos, antes de que se solicite el primer paquete generado. Los archivos de ajustes existentes y las opciones de WordPress almacenadas externamente se conservan al reactivar. Tras una inicialización correcta, el administrador que activa es redirigido a Compile assets con la generación completa de CSS y JavaScript ya iniciada. Una inicialización de ajustes fallida deja el compilador sin abrir e informa del error de escritura en la administración de WordPress.

Cuándo regenerar

Regenera los archivos cuando:

• un ajuste de Opciones del tema guardado no aparezca en el frontend;
• los cambios de espaciado, borde o fondo del maquetador de páginas sigan obsoletos;
• se hayan eliminado archivos generados durante una migración o un despliegue;
• se haya restaurado una caché desde otra versión del sitio;
• el soporte te pida que reconstruyas los recursos de POM.

No necesitas regenerar después de cada edición ordinaria de contenido.

Regenerar desde WordPress

1. Ve a Settings → POM Theme → Tools.
2. Abre Compile assets.
3. Elige Compile CSS and JavaScript, Compile CSS o Compile JavaScript.
4. Sigue la barra de progreso y su paso de compilación actual hasta que aparezca el mensaje de éxito.
5. Limpia la caché de páginas activa.
6. Abre la página pública afectada sin haber iniciado sesión.

Usa Compile CSS para estilos obsoletos de todo el sitio, Compile JavaScript para un problema de un script generado y Compile CSS and JavaScript después de un despliegue, una migración o un cambio que pueda afectar a ambas familias. Cada familia seleccionada se compila en archivos temporales, se valida y se publica conjuntamente mientras se mantiene el bloqueo de generación de todo el sitio. Un paso fallido del compilador o de validación deja inalterada esa familia pública seleccionada.

Solo puede ejecutarse una solicitud de Compile assets por sitio a la vez. Una segunda pestaña del navegador, usuario o inicio automático se rechaza inmediatamente en lugar de esperar e iniciar otra compilación más tarde. La primera solicitud conserva su bloqueo exclusivo de la herramienta durante la publicación de los recursos y el refresco final de descubrimiento, y lo libera automáticamente tanto si la ejecución tiene éxito, como si falla o si la solicitud termina.

Los administradores también pueden seleccionar Generate assets en la barra de administración de WordPress. Los editores y los gestores de tienda pueden usar la misma acción cuando su perfil de usuario de Pomatio tenga Advanced activado. El enlace abre Compile assets en una nueva pestaña del navegador e inicia inmediatamente Compile CSS and JavaScript. Los usuarios autorizados pueden elegir después una generación solo de CSS o solo de JavaScript desde la misma pantalla. Este acceso no expone la herramienta adyacente de importación/exportación de ajustes. El propio enlace de la barra de administración no realiza ninguna solicitud en segundo plano en la página desde la que se abrió.

Cada compilación correcta refresca la marca de tiempo compartida en las URL de los recursos generados, incluso cuando el contenido compilado ya coincide con los archivos del servidor. Los archivos idénticos conservan sus horas de modificación existentes. Una compilación o publicación fallida mantiene la versión anterior del recurso. Limpia la caché de páginas después de la compilación para que las páginas públicas hagan referencia a las URL refrescadas.

Estilos específicos de página

POM incluye las reglas de accesibilidad screen-reader-text en su hoja de estilos general compilada, independientemente de WooCommerce. Regenera el CSS y limpia la caché de páginas después de actualizar esos estilos del tema. Conserva tanto las reglas ocultas como las de foco de teclado en cualquier reemplazo guardado de Visibility and display utilities o CSS de página que sustituya la hoja de estilos general. Cuando el CSS crítico retrase la hoja de estilos general, incluye reglas equivalentes allí para que el texto quede visualmente oculto desde el primer renderizado. Consulta texto oculto visualmente accesible.

Las filas y columnas pueden crear CSS específico de página para espaciado, bordes y fondos. POM actualiza la hoja de estilos de esa página cuando se guarda la página.

Los bloques reutilizables también cargan sus propios estilos generados allí donde aparezcan, incluidas las posiciones globales de cabecera y pie de página.

Si una página sigue obsoleta mientras el resto del sitio es correcto:

1. edita y actualiza esa página;
2. limpia la caché de páginas;
3. confirma que la página pública carga la hoja de estilos específica de página actual;
4. comprueba si un CSS de página personalizado sustituye intencionadamente los estilos generados.

Aviso de cookies y funciones condicionales

Algunas funciones cargan un script separado solo cuando están activadas y son necesarias. Esto incluye el aviso de cookies y los comportamientos de paneles o medios compatibles. Por tanto, una solicitud separada en el navegador no es automáticamente un error. Cuando el aviso de cookies está activado, la regeneración publica cookie-consent.css legible y cookie-consent.min.css optimizado desde el mismo flujo final de CSS; cuando está desactivado, el tiempo de ejecución no encola ni su hoja de estilos ni su script.

Fragmentos de CSS y JavaScript personalizados

Las filas del repetidor de CSS y JavaScript personalizados conservan sus archivos fuente legibles para editarlos en Settings → POM Theme → Advanced. Guardar cualquiera de las dos secciones también crea un archivo hermano minificado, y las páginas públicas cargan esa copia optimizada.

Un editor global de JavaScript vacío no bloquea la generación de recursos. POM omite esa fuente y continúa compilando los estilos y scripts restantes.

Los sitios actualizados desde una versión anterior del tema no requieren una migración manual. Cuando una solicitud pública encuentra una fuente legible sin su archivo hermano minificado, esa solicitud continúa con la fuente legible y genera la copia optimizada para solicitudes posteriores. Si la generación falla, la fuente legible sigue siendo la alternativa segura en el frontend.

Las URL de scripts externos nunca se descargan ni se reescriben. Las filas JSON-LD continúan por su ruta dedicada de serialización JSON en lugar de por la minificación de JavaScript.

Reemplazos de CSS de componentes

Settings → POM Theme → Advanced → Custom CSS expone editores contraídos para los fragmentos de componentes generados compatibles. Los editores activos siguen la primera posición que poseen en website.min.css: Base y body; animaciones; grid, incluidos push y pull; tablas; helpers y utilidades; borde de página opcional; Header; navegación lateral y móvil; shortcode Offcanvas; navegación Fullscreen opcional; búsqueda de navegación opcional; controles del formulario de búsqueda avanzada; título y subtítulo de cabecera; Footer; botones laterales opcionales; Quick View; widgets; portafolio; blog y contenido de entradas; utilidades de visibilidad y visualización; notificaciones; enlaces; capitulares; formularios; paginación; cajas de información; cajas de contenido; cajas de iconos; cajas de imagen; iconos compartidos e indicadores de medios; imágenes y medios animados; dock de contacto opcional, More Content, metadatos de producto y progreso de lectura; tipografía; botones; y estilos opcionales de extensión del tema añadidos por una integración activa compatible.

Esta es una cobertura completa del paquete principal generado: 38 componentes lógicos poseen 41 ranuras de reemplazo físicas, y cada declaración CSS que llega a website.min.css pertenece a una de ellas. Las variables Sass, funciones, mixins e infraestructura de marcadores exclusivos de la compilación no emiten declaraciones y no son candidatos a editor. Los componentes condicionales permanecen ausentes de la pantalla y del paquete mientras su condición original sea falsa.

Abrir un editor carga el CSS canónico legible a partir del tema y de los ajustes actuales del sitio. Una generación de recursos normal y correcta almacena en caché los fragmentos canónicos que ya compiló, y una carga útil completa de tamaño razonable se incrusta en la página de ajustes, de modo que abrir un acordeón normalmente no requiere ni otro paso de Sass ni una solicitud AJAX. Las fuentes canónicas actuales usan una huella exacta de la fuente legible, evitando una recompilación completa de Sass de cada fragmento en cada carga de la página del administrador. La carga útil incrustada del administrador usa la representación actual de ranuras sin duplicar los campos de conveniencia de una sola ranura, lo que reduce su coste de transferencia y análisis. Una ausencia de caché compila y almacena en caché el conjunto completo de componentes sin publicar un archivo.

El administrador compara esa fuente de solo lectura con la copia de trabajo editable mediante MergeView del editor de código de WordPress y el motor diff-match-patch fijado por el tema. El panel de solo lectura Theme CSS tiene un fondo gris para que el panel editable blanco sea reconocible de inmediato. Las regiones eliminadas y añadidas usan fondos rosa y verde diferenciados, mientras que los fragmentos correspondientes permanecen alineados verticalmente; por tanto, el espacio de alineación en blanco representa líneas realmente añadidas o eliminadas. Los marcadores de color ligeros analizan solo las líneas visibles de CodeMirror, añaden vistas previas para valores de color hexadecimales y funcionales reconocidos, y se refrescan con un breve debounce al escribir o desplazarse. El campo de búsqueda compartido analiza cada componente editable activo, recurso independiente y recurso de shortcode de la carga útil ya disponible, incluidos los acordeones sin abrir. También lee en vivo los editores Global CSS, el repetidor Custom CSS y Critical CSS disponibles en la página. Cmd+F o Ctrl+F enfoca ese campo desde cualquier parte de la pantalla Custom CSS. La navegación siguiente o anterior refresca los valores sin guardar y las filas actuales del repetidor, abre el acordeón o la fila coincidente y selecciona la aparición. Las comparaciones de componentes solo se crean cuando hay coincidencia, preservando el viewport virtual de CodeMirror. Un diseño simple progresivamente mejorado de fuente y área de texto sigue disponible cuando el resaltado de sintaxis o MergeView no están disponibles.

Guardar conserva la fuente editable de ese sitio y reconstruye el conjunto completo de recursos generados. La sustitución reemplaza su fragmento canónico en la misma posición dentro de website.min.css; no se añade como CSS global y no crea otra solicitud en el frontend. Copiar el Theme CSS actual en el editor cambia solo la copia de trabajo sin guardar, mientras que revertir elimina la sustitución registrada y reconstruye los recursos públicos.

Base y body ocupa el primer fragmento estructural completo. Comienza con las 15 propiedades --color-main-* generadas en :root, luego posee la normalización del documento, el tamaño de caja, el diseño y el desbordamiento del body, y el fondo configurado sólido, degradado o de imagen. Animaciones ocupa el fragmento completo inmediatamente siguiente y preserva la salida existente de fundido, colapso, carga, pulso, mecanografía y giro sin moverla. Grid sigue como el primer fragmento de diseño completo y combina contenedores responsivos, filas, columnas, medianiles, ayudas de alineación, reglas de apilamiento y los helpers de posicionamiento push-* y pull-* de base a grande. Tables sigue a ese fragmento contiguo de Grid y ahora comienza con la normalización de tablas, leyendas y encabezados nativos antes de sus reglas de componente. Helpers y utilities posee entonces la capa de utilidades completa de bajo nivel, incluidas sus importaciones de Bootstrap conservadas y las clases de color específicas del tema y otros helpers. Sus utilidades de paleta de texto, fondo y borde resuelven esas propiedades raíz que posee Base en lugar de compilar valores hexadecimales duplicados. Mantener esa capa unida evita mover declaraciones de utilidades transversales a propietarios de componentes posteriores solo porque algunos selectores mencionan imágenes, navegación, animaciones o separadores.

Forms comienza con la normalización del navegador para los elementos de formulario que no son botones antes de sus controles completos y ajustes generados. Buttons comienza con la normalización correspondiente solo de botones antes del sistema completo de botones. Typography posee el suavizado global de la fuente del body, la familia, el tamaño, el peso, la altura de línea y el color junto con los valores predeterminados de los elementos de texto nativos, la presentación genérica de código, los colores de selección, las fuentes, la tipografía del contenido estructural y sus Opciones del tema generadas. Mover estos fundamentos desde Base cambia su propiedad física pero no sus declaraciones; sus valores predeterminados de baja especificidad permanecen antes de las reglas más específicas dentro de cada componente propietario.

Header ocupa la antigua posición de navbar y combina el fundamento compartido de navegación con la navegación principal generada, Top bar, Bottom bar, la familia tipográfica, el estado, el color, el espaciado, las reglas responsivas, y la familia del encabezado de etiqueta del menú Mega en un fragmento reemplazable. Un contexto de fuente compartido solo de datos resuelve los nombres de fuentes personalizadas una vez, mientras que Header posee las reglas de navegación y Typography conserva la salida de la fuente y de la tipografía del contenido. Cuando las fuentes configuradas de encabezado y cuerpo difieren, Widgets posee la familia generada del título del widget y Drop caps posee la familia generada de la tercera variante en sus posiciones de componente respectivas. Typography y Buttons ocupan cada uno un fragmento tardío completo. Su Sass estructural y el CSS restante generado a partir de las Opciones del tema actuales se compilan juntos, de modo que cada componente tiene una comparación, una fuente personalizada legible y una posición de reemplazo.

Footer es deliberadamente diferente: un acordeón lógico posee dos ranuras físicas. La ranura Footer structure envuelve el parcial base del pie de página en su posición de componente original, mientras que Footer row settings envuelve el parcial configurado de espaciado de filas en el bloque tardío de ajustes. Ambas comparaciones se guardan y revierten como una sola personalización, pero cada fuente legible reemplaza solo su propia ranura original. Esto evita mover la estructura del pie de página a través de selectores intermedios o mover el espaciado dinámico antes en la cascada.

Side and mobile navigation usa el mismo modelo de múltiples ranuras para un límite de propiedad diferente. Su ranura structure contiene los paneles físicamente consolidados de navegación lateral y móvil, el envoltorio compartido del carrito lateral, la superposición, los controles y los anchos responsivos. Su ranura Navigation integration contiene el posicionamiento generado de la cabecera lateral y el comportamiento compartido del estado de menús lateral/derecho. Su ranura settings contiene los fondos laterales y móviles generados y los colores del menú móvil. La estructura permanece en su posición de componente anterior; Navigation integration permanece después de Buttons, y settings la sigue inmediatamente en el bloque tardío de ajustes. El editor genérico Offcanvas shortcode posee su parcial estático completo en la posición inmediatamente posterior a la ranura de estructura anterior. El envoltorio offcanvas del filtro avanzado de WooCommerce pertenece a su hoja de estilos encolada condicionalmente y ya no forma parte de website.min.css; ninguno de los dos paneles es reemplazado por una sustitución de Side and mobile navigation.

Fullscreen navigation posee un fragmento condicional completo inmediatamente después de Offcanvas shortcode. Su parcial estructural y el CSS de fondo y de estado de menú generado a partir de los ajustes actuales de Header se compilan juntos en la antigua posición navbar-full. Desactivar la navegación Full screen mantiene portátil cualquier reemplazo guardado, pero elimina tanto el Theme CSS como su editor hasta que la función se active de nuevo.

Search posee un fragmento condicional completo inmediatamente después de Fullscreen navigation. Su parcial estructural y los colores de búsqueda en línea generados para el Header principal y cada preajuste de color adicional de Header se compilan juntos en la antigua posición del parcial de búsqueda. Desactivar el formulario de búsqueda mantiene portátil cualquier reemplazo guardado, pero elimina tanto el Theme CSS como su editor hasta que la función se active de nuevo.

Advanced search form controls posee el fragmento completo _wpas.scss inmediatamente después de Search y antes de Header title y subheader. Permanece incondicional porque el framework incluido WP Advanced Search puede emitir su marcado de lista de botones de opción y casillas independientemente del ajuste nativo de búsqueda de navegación.

Visibility and display utilities posee el fragmento completo _visibility.scss inmediatamente después de Blog and post content y antes de Notifications. Sus bucles de visualización de Bootstrap emiten helpers base, responsivos y de impresión; el mismo componente también posee la salida del mixin de lectura de pantalla y las cuatro clases de dispositivo web-hide-on-* del maquetador de páginas. El componente es incondicional y conserva su posición tardía establecida de utilidades.

Theme extension styles posee el sufijo que los callbacks compatibles añaden mediante pom_add_custom_styles. Se captura después de que el filtro se ejecute una vez y permanece en la posición final exacta de ese bloque de ajustes filtrado, después de Typography, Buttons, integración y ajustes de navegación lateral/móvil, y ajustes de fila de Footer. Una sustitución guardada reemplaza solo ese sufijo añadido; nunca se pasa de vuelta a través del filtro y el prefijo Theme CSS recibido permanece inalterado. El acordeón se omite cuando no hay ningún callback registrado o los callbacks actuales no añaden CSS. Su fuente guardada permanece registrada mientras la salida de la extensión no esté disponible.

Los componentes registrados restantes se asignan a un parcial Sass estable cada uno. Page border, Fullscreen navigation, Search, Side buttons, Contact dock, More Content, Product meta y Reading progress aparecen solo mientras esté activa la misma condición que importa su Theme CSS. Theme extension styles sigue la disponibilidad de la salida compatible añadida del filtro. Una sustitución condicional guardada permanece registrada mientras la salida de su función o integración no esté disponible, pero no se muestra ni se inserta en el fragmento vacío; restaurar esa salida restaura tanto el editor como el reemplazo. Header, Side and mobile navigation, Offcanvas shortcode, Header title and subheader, Footer y Visibility and display utilities están siempre disponibles. Los selectores entre componentes permanecen con su propietario de origen: el estilo del botón de activación de Quick View permanece en Buttons, la familia del encabezado de etiqueta del menú Mega permanece en Header, el estilo de la familia del título del widget permanece en Widgets, y el estilo de la tercera familia de capitulares permanece en Drop caps.

Si el fragmento canónico cambia después de guardar una sustitución, el editor informa de que su fuente cambió. Una fuente guardada ilegible se informa por separado mientras el editor recurre de forma segura al fragmento canónico actual. Revertir elimina la sustitución, reconstruye el conjunto de recursos y restaura el fragmento canónico actual. Una generación fallida restaura el estado anterior de la sustitución antes de liberar el bloqueo de generación de todo el sitio y deja en servicio los últimos recursos públicos válidos.

La exportación de ajustes existente incluye los registros de componentes y recursos independientes, sus fuentes CSS legibles y las copias independientes optimizadas. Después de importar esos ajustes a otro sitio, regenera los recursos antes de verificar el frontend para que website.min.css refleje los reemplazos de componentes transferidos. Los reemplazos válidos independientes y de shortcode pueden resolverse de inmediato a través de los archivos optimizados transferidos.

Reemplazos de CSS encolados de forma independiente y condicional

La misma pantalla Custom CSS tiene un grupo separado Independent CSS assets para hojas de estilos del tema que se cargan fuera de website.min.css. Junto con Shortcode CSS assets, cubre las 45 hojas de estilos de frontend separadas mantenidas por el tema: 21 recursos compartidos o de funciones y 24 recursos de shortcode. Cada archivo canónico optimizado tiene un archivo hermano legible derivado de su flujo final exacto de tokens. Estos editores reutilizan la interfaz de comparación y de cambio de fuente, pero guardar no reconstruye ni modifica el paquete principal. El handle original de WordPress o el límite de carga diferida del lado del navegador, las dependencias y la condición de solicitud permanecen sin cambios; solo cambian la URL y la versión de la hoja de estilos seleccionada mientras esté activa una personalización válida.

Forms frontend, Flickity, PhotoSwipe, Isotope, Datetimepicker, WooCommerce, Faceted Search, Cookie consent, Toast notifications, Swiper, Modal, Tooltip, Share, Post navigation, Full-page feed, Author page, Advanced filters, Rating, Tabs, Accordion y Social icons son los recursos compatibles. Sin una sustitución, el tiempo de ejecución de Forms sigue cargando el forms-frontend.min.css original del tema, el manifiesto que bloquea el renderizado usa el woocommerce.min.css optimizado de Webpack siempre que WooCommerce esté activo, Faceted Search usa el faceted-search.min.css optimizado de Webpack siempre que su descubrimiento existente solicite la función, Cookie consent usa la hoja de estilos optimizada generada del sitio actual siempre que su aviso esté activado, cada manifiesto de estilos sigue exponiendo sus otras hojas de estilos optimizadas registradas a través de sus handles establecidos, el cargador de PhotoSwipe sigue derivando su URL de hoja de estilos original solo después de la intención de galería, y una galería a pantalla completa sigue encolando el swiper.min.css original directamente. Guardar escribe la fuente legible por sitio, crea su archivo hermano minificado y registra ambas huellas bajo el bloqueo de recursos de todo el sitio. Forms, Faceted Search y Swiper resuelven sus encolados directos a través del servicio compartido; las hojas de estilos registradas, incluida Cookie consent, se resuelven una vez en su límite de manifiesto condicional, asíncrono o de bloqueo de renderizado propietario; y PhotoSwipe resuelve solo la URL de la hoja de estilos diferida adjunta a su cargador existente. Revertir desactiva esa selección antes de eliminar ambos archivos, de modo que el recurso optimizado actual se activa de inmediato. Un archivo personalizado faltante, obsoleto o alterado también falla cerrando con el recurso actual en lugar de servir una personalización parcial.

El resolvedor a nivel de registro cambia solo uri y version cuando existe un recurso personalizado registrado válido. No renombra un handle, no altera dependencias, medios o metadatos de entrega, no requiere una función, y no cambia qué shortcode, plantilla, manifiesto de descubrimiento, ajuste de tipo de contenido, contexto de archivo o función de WooCommerce lo solicita. Por tanto, Flickity conserva load_strategy: preload, fetchpriority: low, su promoción asíncrona de hoja de estilos y alternativa sin JavaScript, cada ruta de solicitud de carrusel, feed de carrusel, slider, galería, buscador, etiqueta de combinación, WooCommerce y descubrimiento almacenado, y el script asociado web_carousel. PhotoSwipe sigue siendo una excepción deliberada al registro de estilos: web-photoswipe solo se carga en solicitudes calificadas de galería, lightbox de imagen individual o contenido descubierto, y su cargador sigue esperando la intención de puntero, foco, teclado, hash de URL o clic antes de crear cualquiera de los dos recursos en tiempo de ejecución. Una sustitución válida añade un objeto de configuración en línea a ese cargador ya requerido, reemplaza solo la URL de la hoja de estilos en tiempo de ejecución, deja photoswipe.min.js y su versión derivada del cargador, y conserva la navegación directa de imágenes en caso de fallo. Isotope conserva la misma entrega diferida de hoja de estilos, las condiciones masonry y solo-imagen de listado/archivo/tienda/búsqueda/búsqueda facetada, el descubrimiento de contenido almacenado y el script asociado web-isotope. Datetimepicker conserva la condición del campo de formulario POM de fecha, hora y fecha-hora; las rutas del campo de fecha del buscador; las rutas del buscador de reservas y del feed de calendario; el descubrimiento de contenido almacenado; y el script asociado web-datetimepicker. WooCommerce se resuelve a través del manifiesto de bloqueo de renderizado solo mientras pom_is_woocommerce_active() sea verdadero; web-woocommerce permanece antes de website.min.css, y el ajuste existente del estilo principal sigue haciendo del paquete generado la capa de sustitución del tema posterior. El reemplazo independiente no restaura los estilos principales de WooCommerce ni cambia ninguna plantilla o script. Faceted Search permanece limitada primero por su ajuste global y luego por las decisiones existentes de descubrimiento temprano, shortcode, widget y renderizado tardío en Pom_Fsearch_Display. Una sustitución cambia solo la URL y la versión de la hoja de estilos pom-fsearch-front; el JavaScript emparejado pom-fsearch-front, los scripts específicos de facetas, el descubrimiento de cabecera, el impresor tardío de estilos y las páginas que solicitan la función permanecen sin cambios. Cookie consent permanece limitada por pom_is_cookie_notice_enabled() y conserva la precarga asíncrona web-cookie-consent-style, la baja prioridad de obtención, media="all", la promoción de hoja de estilos, la alternativa <noscript> y el JavaScript asíncrono original. Sus archivos canónicos legible y minificado se publican atómicamente con la familia CSS generada seleccionada, o con el conjunto generado completo cuando se compilan ambas familias. Una sustitución válida reemplaza solo la URI y la versión de la hoja de estilos. Los cambios en los ajustes de estilo de las cookies siguen regenerando los archivos canónicos y marcan una fuente guardada anterior para su revisión, pero no reemplazan silenciosamente esa personalización guardada; desactivar el aviso oculta su editor y no carga ninguno de los dos recursos, manteniendo la fuente guardada para una reactivación posterior. Toast notifications se resuelve a través del mismo manifiesto solo cuando el ajuste global toast_notifications ya expone web-toastr-lib; su URL de CSS puede cambiar mientras el mismo handle de JavaScript, la entrega ordinaria, las dependencias de Forms y el consumidor de añadir al carrito de WooCommerce permanecen intactos. Swiper sigue siendo una excepción de encolado directo: solo un web_gallery renderizado con gallery_style="full_screen" solicita pom-swiper, y una sustitución cambia solo la URL de CSS de ese handle mientras conserva la entrega ordinaria, el script original pom-swiper y el inicializador dependiente pom-fullpage. El mapa de handles de estilos en tiempo de ejecución no contiene intencionadamente texto de interfaz localizado porque este manifiesto se lee antes de init; las etiquetas y descripciones completas permanecen confinadas a la carga útil del administrador. Tooltip conserva igualmente su estrategia de precarga, baja prioridad de obtención, promoción asíncrona y alternativa <noscript> mientras cambia su URL seleccionada. Share conserva el mapeo de funciones share existente y su script asociado web-post-email-sharing. Post navigation permanece controlado por el ajuste existente de vista singular por tipo de contenido. Full-page feed conserva el descubrimiento por shortcode y archivo de feed_fullpage junto con web-feed-fullpage. Author page conserva tanto la resolución directa de is_author() como el descubrimiento almacenado del marcado de la caja de autor. Advanced filters conserva la condición existente de tienda de WooCommerce y taxonomía de producto, el descubrimiento de marcado almacenado y su script asociado pom-woocommerce-advanced-filters. Rating conserva el ajuste de entrada individual, la solicitud compatible de reseña de producto, el descubrimiento almacenado de .web-rating y el script web-post-rating y los datos de votación localizados emparejados con su función. Tabs conserva el mapeo del módulo web_tabs, la ruta predeterminada de la pestaña de producto de WooCommerce, la dependencia de hoja de estilos de la miniatura del término de taxonomía, el descubrimiento almacenado de .web-tabs y de conmutadores de pestañas, y el script web-bootstrap-tab allí donde la función completa ya se haya solicitado. Accordion conserva el mapeo del módulo web_accordion, las rutas de acordeón de pestaña de producto y de pago, el descubrimiento almacenado del marcado de acordeón, web-bootstrap-collapse, y el script adicional web_accordion del módulo. Social icons conserva el mapeo del módulo web_social_icons, el retorno temprano del módulo en vivo cuando no hay redes configuradas, el descubrimiento compatible de contenido almacenado y su comportamiento solo de hoja de estilos sin un script asociado. Las hojas de estilos independientes registradas centralmente en el futuro pueden reutilizar esta ruta declarando su handle existente en el registro de recursos independientes en lugar de añadir llamadas al resolvedor a cada consumidor.

Los estilos de shortcode reutilizan la misma fuente transaccional y el mismo registro, resolviéndose en el límite de registro de estilos del módulo compilado. 360 image, A-Z feed, Audio playlist, Blockquote, Breadcrumbs, Cookies info table, Countdown, Counter, FullCalendar, Gallery, Instagram, Image comparer e Interactive infography son los recursos de shortcode compatibles. El handle web-360-image sigue solicitándose solo por la dependencia existente del módulo 360_image y el descubrimiento de contenido almacenado, y su script web_360_image permanece sin cambios. Cuando se selecciona la hoja de estilos gestionada, las referencias de imagen relativas de Pannellum se reubican al directorio de distribución canónico del tema porque el archivo personalizado se sirve desde el árbol de ajustes por sitio. El handle web-a-z-feed también se solicita solo por la dependencia existente del módulo a_z_feed y las rutas de descubrimiento; ese módulo es solo de hoja de estilos, por lo que editarlo no añade ni reemplaza JavaScript. El handle web-audio-playlist permanece emparejado con el módulo existente audio_playlist, mientras que el script separado web_audio_playlist conserva su dependencia web-theme-js y su comportamiento de reproducción. El handle web-blockquotes sigue solicitándose solo por el módulo existente blockquotes y las rutas de descubrimiento web_blockquote; no tiene un script asociado. El handle web-breadcrumbs sigue solicitándose solo por el módulo existente breadcrumbs y las rutas de descubrimiento web_breadcrumbs; también es solo de hoja de estilos y no altera el generador de migas de pan. El handle web-cookies-info-table sigue solicitándose solo por el módulo existente cookies_info_table y las rutas de descubrimiento web_cookies_info_table; no tiene un script asociado y no altera los datos de cookies configurados ni el marcado de divulgación. El handle web-countdown sigue solicitándose solo por el módulo existente countdown y las rutas de descubrimiento web_countdown; su script emparejado web_countdown conserva la misma entrega en el pie de página, la lista de dependencias vacía, el cálculo de la fecha objetivo y el intervalo de actualización de un segundo. El handle web-counter sigue solicitándose solo por el módulo existente counter y las rutas de descubrimiento web_counter; su script emparejado web_counter conserva la misma entrega en el pie de página, la lista de dependencias vacía, la detección del área de visualización, el estado inicial cero y la animación numérica de un segundo. El handle web-fullcalendar sigue solicitándose solo por el módulo fullcalendar añadido por separado y las rutas de descubrimiento web_fullcalendar. Su script web_fullcalendar sigue cargándose en el pie de página después de web-theme-js, conservando la dependencia localizada webData, la inicialización de la vista, los datos de solicitud de taxonomía de producto, la superposición de carga y el ciclo de vida AJAX pom_get_fullcalendar_events. El handle web-gallery sigue solicitándose solo por el módulo gallery y las rutas de descubrimiento web_gallery. Ese módulo conserva tanto web_carousel como web_gallery; el primero mantiene su dependencia web-theme-js y expone Flickity para la navegación por miniaturas del segundo. Las condiciones del renderizador y de descubrimiento siguen añadiendo el cargador diferido web-photoswipe solo a los diseños compatibles con lightbox, web-flickity-style a los diseños de carrusel, Isotope a masonry, y los recursos directos pom-swiper más los dependientes pom-fullpage solo a full_screen. El handle web-instagram sigue solicitándose solo por el módulo instagram y las rutas de descubrimiento web_instagram. Ese módulo es solo de hoja de estilos, por lo que su editor no cambia ningún registro o entrega de script. El handle web-image-comparer sigue solicitándose solo por el módulo image_comparer y las rutas de descubrimiento web_image_comparer. Su script emparejado web_image_comparer sigue integrando Juxtapose, leyendo los atributos de imagen existentes e inicializando el slider responsivo al 50 por ciento. El handle web-interactive-infography sigue solicitándose solo por el módulo padre interactive_infography y las rutas de descubrimiento web_interactive_infography. El padre no declara ninguna dependencia de script; los modos de punto anidados siguen solicitando las funciones compartidas de Tooltip o Modal a través de sus ramas de renderizador existentes. Las páginas que no requieren el módulo coincidente siguen sin cargar ni su hoja de estilos ni sus scripts de módulo emparejados. Los recursos de shortcode futuros pueden usar el mismo resolvedor de handle sin añadir ramas de sustitución a sus callbacks de renderizado.

La compilación de CSS del tema produce salidas paralelas para cada hoja de estilos de distribución mantenida. Cada .min.css conserva la ruta histórica del compilador de producción usada por el frontend, y su flujo final de tokens se formatea en el archivo hermano de edición .css sin cambiar las declaraciones. Derivar la copia legible del resultado optimizado exacto también protege contra paquetes de terceros cuyos archivos nominalmente no minificados y minificados no son equivalentes. Esto mantiene los archivos minificados existentes estables a nivel de bytes al tiempo que proporciona fuentes canónicas legibles y no añade solicitudes en el frontend.

Parallax scene también es un recurso de shortcode compatible. Su handle web-parallax-scene sigue solicitándose solo por el módulo padre parallax_scene y las rutas de descubrimiento web_parallax_scene. El script existente web_parallax_scene sigue integrando parallax-js, seleccionando los hijos .web-parallax-layer y respetando sus profundidades X e Y junto con la configuración del padre de entrada relativa, solo-hover y eventos de puntero. Guardar un reemplazo de hoja de estilos no cambia ninguno de esos contratos de script, shortcode, capa hija o carga condicional.

Pricing list también es un recurso de shortcode compatible. Su handle web-pricing-list sigue solicitándose solo por el módulo padre pricing_list y las rutas de descubrimiento web_pricing_list. El módulo no declara ninguna dependencia de script, y guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de envoltorio padre, renderizado anidado web_pricing_list_item, atributos de contenido, comportamiento opcional de imagen, visibilidad responsiva o carga condicional. Un icono hijo titulado conserva su solicitud independiente existente de la función Tooltip.

Progress bars también es un recurso de shortcode compatible. Su handle web-progress-bars sigue solicitándose junto con el script existente web_progress_bars solo por el módulo progress_bars y las rutas de descubrimiento web_progress_bar. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de inicialización del script, animación de conteo de un segundo, máscara de porcentaje, ancho de relleno calculado, modo de número estático, variantes de grosor, atributos de shortcode o carga condicional.

Scroll-triggered image sequence también es un recurso de shortcode compatible. Su handle web-scroll-triggered-image-sequence sigue solicitándose junto con el script existente web_scroll_triggered_image_sequence solo por el módulo scroll_triggered_image_sequence y las rutas de descubrimiento web_scroll_triggered_image_sequence. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de prioridad del primer fotograma, límite de IntersectionObserver para los fotogramas de imagen restantes o la carga de vídeo, fijación de GSAP ScrollTrigger, cálculos de desplazamiento a fotograma o desplazamiento a vídeo, tamaño del lienzo, ajuste de medios, spinner, etapas anidadas web_scroll_triggered_image_sequence_text o carga condicional.

Taxonomy terms list también es un recurso de shortcode compatible. Su handle web-taxonomy-terms-list sigue solicitándose solo por el módulo taxonomy_terms_list y las rutas de descubrimiento web_taxonomy_terms_list. El módulo no declara ninguna dependencia de script. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de consulta de taxonomía seleccionada, filtrado de términos vacíos, agrupación alfabética y numérica, caracteres de índice poblados o no disponibles, enlaces de archivo de términos, enlaces opcionales de volver arriba, atributos de shortcode o carga condicional.

Testimonial también es un recurso de shortcode compatible. Su handle web-testimonial sigue solicitándose solo por el módulo testimonial y las rutas de descubrimiento web_testimonial. El módulo no declara ninguna dependencia de script. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de las tres variantes visuales, ubicación del autor del estilo 2, atributos de carga diferida del retrato, cita, marcado de autor y fuente, atributos de shortcode, comportamiento responsivo o carga condicional.

Timeline también es un recurso de shortcode compatible. Su handle web-timeline sigue solicitándose solo por el módulo timeline y las rutas de descubrimiento web_timeline. El módulo no declara ninguna dependencia de script. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de análisis de elementos, estructura de lista, alternancia par/impar, contenido, elementos de punto y fecha, clases de paleta, atributos de shortcode o carga condicional.

Typed text también es un recurso de shortcode compatible. Su handle web-typed-text sigue solicitándose junto con el script existente web_typed_text solo por el módulo typed_text y las rutas de descubrimiento web_typed_text. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de cadenas fijas o animadas, inicialización de Typed.js, velocidades de escritura y borrado, repetición en bucle, configuración del cursor, encabezados y spans generados, clase de preparación, atributos de shortcode o carga condicional.

Video también es un recurso de shortcode compatible. Su handle web-video sigue solicitándose junto con web_video y web-jarallax-video solo por el módulo video y las rutas de descubrimiento web_video. Guardar un reemplazo de hoja de estilos no cambia ninguno de los contratos de normalización del proveedor, atributos de fuente, marcado en línea y a pantalla completa, inicialización de VideoWorker, reproducción y pausa, modos de reproducción automática, repetición en bucle, controles, relaciones de aspecto responsivas, comportamiento del póster, ciclo de vida del modal, manejo de Escape, ruta del reproductor personalizado, dependencias de script, atributos de shortcode o carga condicional.

Code block themes también son recursos de shortcode compatibles. Los editores contiguos web-code-block-prism-light y web-code-block-prism-dark se resuelven de forma independiente mediante el mapa condicional existente prism_theme: light selecciona solo el handle claro, dark selecciona solo el handle oscuro, y none no selecciona ninguno. El script web_code_block permanece incondicional para un Code block renderizado y conserva los alias de lenguaje, la generación de tokens de Prism, el marcador resaltado, el ámbito del envoltorio, los atributos de shortcode y el descubrimiento de contenido almacenado.

Caché

Después de la regeneración, una página HTML previamente almacenada en caché puede seguir haciendo referencia a una versión anterior del archivo. Limpia la caché de páginas o de CDN del sitio usando sus controles documentados y luego prueba en una ventana de navegación privada.

Evita eliminar manualmente los archivos generados. La regeneración y los controles normales de caché ofrecen una ruta de recuperación más segura.

Solución de problemas

La herramienta informa de un error

Comprueba que WordPress pueda escribir en el directorio de uploads del sitio actual y que el espacio disponible en disco sea suficiente. Reintenta una vez después de corregir la causa.

La herramienta funciona pero el diseño no cambia

1. Limpia la caché de páginas y de CDN.
2. Recarga sin haber iniciado sesión.
3. Comprueba si el ajuste se guardó para el sitio correcto.
4. Comprueba si hay CSS personalizado a nivel de página o una sustitución de un tema hijo.
5. Actualiza la página afectada si solo sus estilos de diseño están obsoletos.

Solo un rol ve el problema

Revisa el CSS personalizado orientado a roles y la visibilidad del contenido. Una presentación específica de un rol puede diferir intencionadamente de la versión pública.

Para desarrolladores

El helper público pom_generate_custom_assets() puede solicitar una regeneración completa de todo el sitio desde una integración aprobada. Devuelve un resultado estructurado que describe el éxito, si algo cambió, los errores y los archivos generados.

Llámalo solo después de una acción intencional de ajustes o mantenimiento. No regeneres el paquete completo en solicitudes normales del frontend.

El filtro compatible pom_add_custom_styles se sigue ejecutando exactamente una vez y recibe el mismo bloque tardío de estilos generados sin marcadores en su posición establecida en la cascada. Ese bloque incluye los fragmentos completos de Typography y Buttons —sus reglas estructurales más su salida de Opciones del tema— junto con la ranura de Navigation integration que poseen y los ajustes tardíos de Side/mobile y Footer. Header, Fullscreen navigation y Search se emiten antes en sus posiciones de componente originales y ya no forman parte de la entrada filtrada.

Las integraciones deben devolver el CSS recibido sin cambios seguido de sus reglas adicionales. POM reconoce ese contrato exacto de preservación de prefijo y expone solo el sufijo añadido como estilos de extensión del tema. Un callback que antepone, elimina o reescribe el bloque recibido se conserva tal como se devuelve por compatibilidad con versiones anteriores, pero su salida no es reclamada por el editor de extensiones porque no existe un límite de sufijo seguro.