Encuentra las principales interfaces de POM Theme

POM Theme no coloca todas las tareas en un único panel. La configuración compartida vive en Settings → POM Theme, mientras que el contenido, los menús, los widgets, los formularios, los registros de WooCommerce y la composición de páginas permanecen en las áreas de WordPress que les corresponden.

Settings → POM Theme

La página de ajustes está disponible para los usuarios que pueden editar entradas, aunque las secciones individuales pueden requerir un rol con más privilegios. Las herramientas administrativas requieren acceso de administrador.

Sección principal Qué contiene
Design system Vista previa del tema, marca, redes sociales, paleta de colores, fuentes personalizadas, botones, iconos, estilos generales y estilos de componentes.
Site layout Cabecera, navegación móvil, subcabecera, migas de pan, pie de página, base de contacto flotante y barras laterales.
Templates Plantillas HTML de archivo, feed y entrada individual; páginas 404 y de contraseña; búsqueda; blog; páginas de autor; y vistas elegibles de tipos de contenido personalizados.
Content model Tipos de contenido, taxonomías, campos personalizados, consultas de base de datos guardadas, búsqueda facetada y reglas de permisos.
E-Commerce Escaparate, entrada individual de producto, carrito y pago, Mi cuenta, envío, promociones y controles avanzados de presentación de WooCommerce.
Integrations Ajustes de Analytics, Maps, reCAPTCHA, Ads, Drive, píxeles sociales, etiquetas meta de cabecera, Instagram y aviso de cookies.
Forms Activación del sistema de formularios, estilos compartidos de formularios y comportamiento predeterminado de los formularios.
Advanced CSS personalizado, CSS crítico, JavaScript personalizado, carga diferida, cabeceras preconnect y compatibilidad con funciones obsoletas.
Tools Exportación e importación, solo para administradores, de los archivos de ajustes del POM Framework gestionados por el tema.
License Conexión de licencia, estado de validación, dominio, plan, caducidad, revalidación y desvinculación.

Los ajustes opcionales utilizan un control de activación. Guarda después de activar uno para que sus campos y su comportamiento dependiente queden disponibles.

En las páginas de producto variable, POM sincroniza su botón de añadir al carrito con WooCommerce antes de que se ejecuten los listeners de variaciones del JavaScript personalizado del pie de página. Por tanto, un error posterior de un listener no puede dejar deshabilitada una selección que, de otro modo, estaría disponible. Los scripts personalizados deben seguir comprobando que los elementos y atributos consultados existen antes de leerlos o transformarlos, porque un error puede detener su propio comportamiento de galería o de presentación.

Personaliza un componente generado

La idea central es sencilla: cada componente compatible puede usar Theme CSS o una versión Customized.

Antes de personalizar un componente

Cuando un componente nunca se ha personalizado, POM:

  1. Lee los ajustes actuales del tema.
  2. Genera el CSS de ese componente.
  3. Lo coloca en su posición normal dentro de website.min.css.
  4. Regenera ese CSS con normalidad cuando cambia un ajuste relacionado.

El componente contraído muestra Theme CSS en este estado.

Guarda una versión personalizada

Los administradores pueden sustituir el CSS generado para componentes seleccionados sin mover esas reglas al final de la hoja de estilos:

  1. Ve a Settings → POM Theme → Advanced → Custom CSS.
  2. En Component CSS, abre el editor correspondiente. Base and body aparece primero porque posee el primer CSS generado de la hoja de estilos, seguido de Animations, Grid, Tables y Helpers and utilities. Header sigue a la posición opcional del borde de página, y después Side and mobile navigation, Offcanvas shortcode, Fullscreen navigation opcional, Search opcional y Advanced search form controls aparecen en su orden de generación. Los componentes disponibles también incluyen Header title and subheader, Footer, Quick view, Widgets, Portfolio, Blog and post content, Visibility and display utilities, Notifications, Links, Drop caps, Forms, Pagination, Info boxes, Content boxes, Icon boxes, Image boxes, Icons and media indicators, Images and animated media, Typography y Buttons. Los editores condicionales aparecen cuando su función está activa: Page border, Fullscreen navigation, Search, Side buttons, Contact dock, More content, Product meta y Reading progress bar. Theme extension styles aparece en último lugar cuando una integración activa de tema o de plugin añade CSS compatible al paquete generado.
  3. Espera a que se cargue la comparación lado a lado. Current Theme CSS es de solo lectura a la izquierda y Your CSS es editable a la derecha.
  4. Edita las reglas. El contenido eliminado se resalta en rosa y el contenido añadido en verde claro mientras escribes. Los valores hexadecimales, RGB, RGBA, HSL y HSLA reconocidos muestran una pequeña vista previa del color junto al valor. El componente muestra Unsaved changes hasta que la copia de trabajo vuelve a coincidir con su último estado guardado.
  5. Selecciona Save custom version.
  6. Comprueba el componente afectado en el sitio público.

El editor contiene CSS compilado, no Sass. Cuando se guarda la versión personalizada, POM almacena una fuente legible por sitio, registra el componente como personalizado y reconstruye website.min.css. La versión personalizada sustituye solo ese componente en su posición normal de la cascada. No se añade al final del paquete y no crea otra solicitud de hoja de estilos en el frontend.

El componente contraído muestra entonces Customized.

Encuentra un selector desde el inspector del navegador

Usa Find CSS across this page cuando se ha identificado un selector en el sitio público:

  1. Copia el selector, el nombre de clase, la propiedad o el valor desde el inspector del navegador.
  2. Pégalo en Find CSS across this page y pulsa Enter para ejecutar la búsqueda. Escribir no inicia una búsqueda por sí solo. En cualquier punto de esta pantalla de Custom CSS, Cmd+F en macOS o Ctrl+F en Windows y Linux enfoca el mismo campo de búsqueda.
  3. POM busca en toda la fuente editable activa de cada Component CSS, cada activo Independent CSS y cada activo Shortcode CSS, incluidos los acordeones sin abrir. También busca en Global CSS, el CSS dentro de cada fila de hoja de estilos de Custom CSS, y Critical CSS cuando esos campos de ajustes están disponibles en la página.
  4. El acordeón o la fila de hoja de estilos contraída coincidente se abre automáticamente, la página se desplaza hasta su editor y se selecciona el texto exacto. Elige Next o Previous para moverte entre apariciones, o usa Cmd+G / Ctrl+G y añade Shift para retroceder. La navegación vuelve al principio al llegar a cualquiera de los extremos de los resultados.

La búsqueda incluye las ediciones CSS actuales sin guardar y actualiza sus resultados mientras navegas, incluidas las filas de hoja de estilos añadidas, eliminadas o reordenadas durante la sesión. Buscar no guarda el CSS ni activa un ajuste. Las búsquedas de componentes usan la fuente editable activa porque es la fuente que llega al sitio público después de guardar. Solo se crea la comparación del componente coincidente, así que buscar no renderiza todas las comparaciones ni deshabilita el desplazamiento virtual normal del editor.

Qué ocurre cuando cambian los ajustes del tema

POM sigue calculando el Theme CSS actual incluso mientras una versión personalizada está activa. Sin embargo, el frontend generado sigue usando la versión personalizada guardada para ese fragmento. Esto significa que:

  • El CSS personalizado no se elimina ni se sobrescribe.
  • El nuevo ajuste se sigue almacenando correctamente.
  • El ajuste puede no tener ningún efecto visible porque el fragmento generado relacionado está siendo sustituido.
  • Los componentes que no están personalizados siguen respondiendo con normalidad a sus ajustes.

El ajuste del tema no sobrescribe el CSS personalizado. El CSS personalizado sigue sustituyendo la salida que el ajuste generaría de otro modo.

Cómo detecta POM una fuente modificada

Cuando se guarda una versión personalizada, POM también registra una huella del Theme CSS que existía en ese momento. Más tarde, genera el Theme CSS actual a partir de la versión de tema instalada, los ajustes del sitio, las integraciones activas y las condiciones relevantes. Si la nueva huella difiere, POM sabe que la fuente ha cambiado desde que se guardó por última vez la versión personalizada.

Esto puede ocurrir después de cambiar un ajuste relacionado, actualizar el tema, cambiar la implementación del componente o activar una condición que afecta a su salida. El componente muestra entonces Customized — source changed y muestra una explicación al abrirlo.

Esta advertencia no significa que el sitio público esté roto. Significa que el sitio sigue usando la versión personalizada, pero el CSS que produce actualmente el tema ya no es la versión que se revisó cuando se guardó esa personalización.

La comparación hace visible este estado directamente: la columna izquierda contiene el Theme CSS recién generado, mientras que la columna derecha conserva la versión personalizada guardada. Los cambios resaltados se actualizan de inmediato a medida que se revisa la versión editable; POM nunca combina las dos versiones automáticamente.

La advertencia se muestra actualmente bajo Settings → POM Theme → Advanced → Custom CSS → Component CSS. No se muestra junto a cada ajuste individual de diseño o de layout. Por tanto, un administrador que cambia un ajuste de un componente personalizado puede no ver ningún cambio visual y debería comprobar el estado del componente en la pantalla Custom CSS.

Responder a una fuente modificada

Un administrador tiene tres opciones cuando un componente informa de Customized — source changed:

  1. Conservar la versión personalizada actual. El sitio público sigue usándola y la advertencia permanece visible.
  2. Revisarla y guardarla de nuevo. Adapta el CSS personalizado al Theme CSS actual donde sea necesario y guarda. Esto reconoce la fuente actual y elimina la advertencia. Guardar no combina automáticamente las nuevas reglas del tema en la versión personalizada.
  3. Revertir a Theme CSS. POM elimina la fuente personalizada, borra su entrada de registro, reconstruye los activos generados y usa de inmediato el CSS producido por el tema y los ajustes actuales.

Una reversión restaura el CSS que se genera ahora. No restaura necesariamente el CSS exacto que existía cuando se creó por primera vez la versión personalizada.

Copy current Theme CSS to editor es una acción separada y no persistente. Sustituye la copia de trabajo editable por la fuente completa actual del componente de la izquierda, pero no cambia el sitio público hasta que se selecciona Save custom version. Esto es útil al reconstruir una personalización desde la fuente generada más reciente sin eliminar de inmediato la sustitución guardada.

Si una fuente personalizada guardada no se puede leer, POM muestra Customized — source unavailable y muestra el Theme CSS actual para que un administrador pueda repararla, sustituirla o revertirla.

Fragmentos completos de tipografía y botones

Typography y Buttons contienen cada uno su CSS estructural y las reglas generadas a partir de las Theme Options actuales en un único fragmento completo. La interfaz muestra por tanto una comparación para Typography y una para Buttons. Guardar cualquiera de los componentes toma el control de todas sus reglas mostradas; revertir restaura la versión completa generada a partir de los ajustes actuales.

Si un sitio personalizó previamente la versión dividida más antigua de cualquiera de los componentes, POM combina las partes guardadas automáticamente y marca el componente resultante como Customized — source changed. Revísalo una vez porque ambas partes ocupan ahora una única posición final en la cascada.

Base and body comienza con las 15 propiedades raíz generadas de --color-main-*, y a continuación contiene la normalización del documento, el tamaño de caja, los valores predeterminados estructurales del navegador, el layout y el desbordamiento del cuerpo, y el fondo del cuerpo configurado. Sigue siendo el primer editor porque ese fragmento estructural ocupa la primera posición física de CSS dentro de website.min.css. Conserva esas propiedades raíz en una fuente Base personalizada cuando el sitio usa las clases de utilidad de paleta correspondientes. El texto global del cuerpo, los encabezados, los párrafos, las listas, las citas, la presentación del código y los colores de selección pertenecen a Typography en su lugar.

Animations contiene las transiciones compartidas de fundido y colapso junto con los keyframes reutilizables de carga, pulso, escritura y giro. Sigue a Base and body porque esa es su posición física existente dentro de website.min.css.

Grid contiene los contenedores adaptables, filas, columnas, medianiles, ayudas de alineación, reglas de apilamiento y los ayudantes de posicionamiento push-* y pull-* producidos por el sistema de cuadrícula del tema. Sigue a Animations y precede a Tables como un fragmento contiguo dentro de website.min.css.

Tables contiene tanto la normalización de tablas nativas como el componente de tabla completo del tema: comportamiento de colapso, títulos, alineación de encabezados, celdas, bordes, filas rayadas y al pasar el cursor, y envoltorios adaptables.

Helpers and utilities contiene la capa de utilidades de bajo nivel completa: las utilidades Bootstrap conservadas y los ayudantes de color, imagen, espaciado, alineación, visualización, tipografía, borde, tamaño, opacidad e iframe del tema. Sus clases text-main-*, bg-main-* y border-main-* hacen referencia a las propiedades --color-main-* definidas por Base and body, de modo que las tres familias de utilidades comparten los mismos valores de paleta generados. Sigue a Tables y precede a cualquier CSS de borde de página opcional porque esa es su posición física existente dentro de website.min.css.

Forms comienza con la normalización nativa de label, input, select, textarea, fieldset, legend, progress, output, search, number y control de archivo, antes de los controles de formulario del tema y los ajustes generados. Buttons comienza igualmente con la normalización nativa de botones antes del sistema de botones completo del tema. Los reinicios de navegador compartidos se dividen entre estos dos propietarios, de modo que cada acordeón controla solo su propia familia de elementos.

Typography contiene la fuente y el color globales del cuerpo junto con los valores predeterminados nativos de los elementos de texto, los encabezados, los párrafos, las listas, las citas, la presentación genérica del código, los colores de selección, la tipografía del contenido, las caras de fuente y las Theme Options generadas. Las reglas que pertenecen a un componente específico permanecen en el editor de ese componente.

Header contiene la base compartida de la barra de navegación junto con la navegación principal, la barra superior, la barra inferior, los estados de menú y los colores y espaciados generados a partir de las Theme Options. Guardar Header toma el control de ese fragmento completo en la posición original de la barra de navegación; los editores dedicados de Side and mobile navigation, Search y Header title permanecen separados.

Fullscreen navigation contiene la superposición completa a pantalla completa, la presentación de menús anidados, los controles direccionales, los enlaces sociales, la tipografía adaptable y su fondo configurado. Aparece inmediatamente después de Offcanvas shortcode solo mientras Full screen navigation está activa.

Search contiene la superposición de búsqueda de navegación completa, el formulario en línea, la presentación de resultados, los estados de carga y adaptables, y los colores de búsqueda en línea generados para cada ajuste preestablecido de color de cabecera configurado. Aparece inmediatamente después de Fullscreen navigation solo mientras Templates → Search → Search form está activo.

Advanced search form controls contiene la presentación de listas de radio y casillas de verificación generada por el marco WP Advanced Search incluido. Permanece disponible inmediatamente después de Search porque ese marco puede representar formularios de forma independiente del ajuste de Search de la navegación nativa.

Theme extension styles contiene el CSS compatible añadido por las integraciones activas de tema y plugin. Aparece después de Buttons porque esa salida de integración es el último fragmento de componente generado antes de que se añada el editor global Custom CSS. Guardarlo sustituye el fragmento de integración añadido completo en esa misma posición; no deshabilita la integración ni crea otra solicitud de hoja de estilos. Si ninguna integración activa añade CSS, el acordeón está oculto. Una personalización guardada permanece almacenada mientras la integración está inactiva o no devuelve CSS, y vuelve a estar disponible cuando regresa la salida compatible.

Visibility and display utilities contiene las clases de visualización adaptables de Bootstrap, las clases de visualización para impresión, los ayudantes de lector de pantalla y las clases web-hide-on-* específicas de dispositivo que usan el maquetador de páginas y las plantillas del tema. Aparece después de Blog and post content y antes de Notifications, coincidiendo con su posición en website.min.css.

Footer es un acordeón lógico con dos comparaciones: Footer structure y Footer row settings. Guardar Footer toma el control de ambas fuentes mostradas juntas. POM sigue insertando cada fuente en su posición original dentro de website.min.css, por lo que el CSS estructural del pie de página no se mueve a la posición posterior de espaciado de filas y ningún comportamiento de cascada cambia simplemente por exponer el editor.

Side and mobile navigation tiene tres comparaciones. Side and mobile navigation structure contiene el layout compartido del panel lateral y del panel móvil, los controles, la superposición, los tamaños adaptables y la estructura estructural que también usa el carrito lateral. Navigation integration contiene el posicionamiento de la cabecera lateral y la regla de estado de menú compartida de la navegación lateral/derecha. Side and mobile navigation settings contiene los fondos y los colores del menú móvil producidos por las Theme Options actuales. Guardar o revertir el componente gestiona las tres fuentes juntas, preservando al mismo tiempo sus posiciones establecidas en website.min.css; las fuentes de integración y de ajustes permanecen en sus posiciones originales tardías de cascada.

El shortcode reutilizable Offcanvas y el panel de filtros avanzados de WooCommerce no forman parte de este componente. Offcanvas shortcode tiene su propio editor Component CSS inmediatamente después, mientras que el panel de WooCommerce conserva su hoja de estilos cargada condicionalmente. Por tanto, cambiar el CSS de Side and mobile navigation no toma el control de ninguno de esos dos paneles no relacionados.

Las personalizaciones de componentes condicionales se conservan si su función se deshabilita más tarde, pero su acordeón y su sustitución permanecen inactivos mientras el fragmento Theme CSS no se compila. Volver a habilitar la función restaura el acordeón y aplica de nuevo la personalización guardada. La misma regla se aplica a Theme extension styles cuando su integración contribuyente se desactiva o deja de añadir CSS. Esto evita que un cambio temporal de función o de integración elimine el trabajo del administrador.

Elementos compartidos por distintos componentes

Algunos elementos visuales abarcan deliberadamente más de un fragmento de fuente:

  • El panel Quick View pertenece a Quick view, mientras que la apariencia de su botón desencadenante pertenece a Buttons.
  • La estructura de letra capital pertenece a Drop caps, mientras que la fuente de encabezado aplicada a su tercera variante pertenece a Typography.

Personaliza ambos componentes solo cuando ambos aspectos deban dejar de seguir sus ajustes relacionados.

Elige el mecanismo CSS apropiado

Los cinco mecanismos CSS siguen sirviendo para propósitos distintos:

Mecanismo Resultado
Component CSS Sustituye un fragmento compatible en su posición original dentro de website.min.css.
Independent CSS assets Sustituye una hoja de estilos del tema cargada por separado o de forma diferida por una copia optimizada por sitio, sin añadirla a website.min.css ni cambiar cuándo se carga.
Shortcode CSS assets Sustituye la hoja de estilos cargada condicionalmente de un módulo de shortcode, sin cargarla en páginas donde ese módulo está ausente.
Custom CSS Añade reglas generales al final de website.min.css.
Additional stylesheet rows Publica hojas de estilos separadas que pueden cargarse globalmente o asignarse de forma selectiva.

Usa Component CSS cuando quieras tomar el control completo de un fragmento generado compatible. Usa Independent CSS assets cuando el tema ya posea una hoja de estilos separada y sea necesario sustituir su contenido completo. Usa Shortcode CSS assets para la hoja de estilos completa que posee un módulo de shortcode condicional. Usa Custom CSS para pequeños ajustes o reglas nuevas que deban ganar en la cascada. Usa filas de hoja de estilos adicionales cuando se requiera un nuevo archivo independiente global o asignado de forma selectiva.

En conjunto, los acordeones Component CSS cubren todas las declaraciones CSS que POM escribe en website.min.css. La lista sigue el orden real de cascada, incluidos los fragmentos condicionales, mientras que los fragmentos físicos relacionados pueden compartir un único editor lógico cuando moverlos cambiaría la cascada. Las variables Sass, los mixins y otras fuentes solo de compilación no emiten CSS y por tanto no tienen editor. Los grupos Independent CSS assets y Shortcode CSS assets cubren todas las hojas de estilos de frontend separadas distribuidas o generadas por el tema; los estilos solo de administrador se excluyen intencionadamente.

Personaliza una hoja de estilos independiente

El grupo Independent CSS assets aparece debajo de la lista de componentes website.min.css. Actualmente incluye 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. Cookie consent aparece solo mientras el aviso de cookies está habilitado:

  1. Ve a Settings → POM Theme → Advanced → Custom CSS.
  2. En Independent CSS assets, abre 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 o Social icons.
  3. Compara Current Theme CSS con Your CSS, realiza los cambios necesarios y selecciona Save custom version.
  4. Abre una página pública que cargue la función seleccionada y verifica el resultado.

Sin una personalización, POM sigue cargando el forms-frontend.min.css original. Guardar almacena la fuente de trabajo legible y genera una copia minimizada por sitio; la puesta en cola existente de Forms selecciona entonces esa copia. Esto no habilita Forms, no inserta la hoja de estilos en website.min.css ni la carga en páginas donde Forms no la requería ya.

Flickity sigue ese ciclo de vida para flickity.min.css, que combina el motor Flickity, su extensión de fundido y la presentación de carrusel de POM. Su identificador existente web-flickity-style se sigue solicitando solo mediante carruseles, feeds de carrusel, sliders, layouts de galería, buscadores, etiquetas de combinación, galerías y carruseles de productos de WooCommerce, o descubrimiento compatible de contenido almacenado, que cumplan los requisitos. Conserva la entrega de precarga diferida con baja prioridad de obtención y el script asociado web_carousel. Guardar el CSS de Flickity cambia solo la URL y la versión de la hoja de estilos registrada; no crea ni inicializa un carrusel, no altera sus opciones, no lo carga en otra página ni sustituye su JavaScript.

PhotoSwipe sigue el mismo ciclo de edición con un límite adicional de carga diferida. Las galerías y lightboxes de imagen única que cumplen los requisitos siguen cargando solo el pequeño cargador web-photoswipe en el momento de renderizado de la página. El CSS y el JavaScript en tiempo de ejecución de PhotoSwipe permanecen ausentes hasta que la intención de puntero, foco, teclado, hash de URL o clic solicita la galería. Guardar el CSS de PhotoSwipe le da a ese cargador la URL de hoja de estilos optimizada por sitio sin cambiar la URL del JavaScript en tiempo de ejecución, qué páginas solicitan la función, cuándo empieza a cargarla el navegador, ni la alternativa que navega directamente a la imagen si PhotoSwipe no puede abrirse.

Isotope sigue ese ciclo de vida para isotope.min.css. Su identificador existente web-isotope-style se sigue solicitando solo mediante rutas de listado, archivo, tienda, búsqueda, búsqueda facetada y contenido almacenado compatible de tipo masonry o solo imagen que ya requieren Isotope. Conserva la entrega de precarga diferida con baja prioridad de obtención y el script asociado web-isotope. Guardar el CSS de Isotope cambia solo la URL y la versión de la hoja de estilos registrada; no selecciona un layout masonry, no crea ni filtra una cuadrícula, no carga la función en otra página ni sustituye su JavaScript.

Datetimepicker sigue ese ciclo de vida para datetimepicker.min.css, que combina la presentación de Air Datepicker con las adiciones de fecha, hora, fecha y hora, calendario en línea, rango y estado de campo de POM. Su identificador existente web-datetimepicker-style se sigue solicitando solo mediante campos de formulario de POM, campos de fecha de buscador, funciones de reserva, calendarios de entrega configurados de WooCommerce o descubrimiento compatible de contenido almacenado que cumplan los requisitos. POM vuelve a comprobar el layout actual de un formulario referenciado antes de imprimir la cabecera de la página, por lo que añadir un campo de fecha no requiere volver a guardar cada página que incrusta ese formulario. Guardar el CSS de Datetimepicker cambia solo la URL y la versión de la hoja de estilos registrada; no crea un calendario, no cambia las reglas de fecha de un campo, no carga la función en otra página ni sustituye el script asociado web-datetimepicker.

WooCommerce sigue ese ciclo de vida para el woocommerce.min.css reducido de POM. Su identificador existente web-woocommerce permanece disponible solo mientras WooCommerce está activo y conserva su posición establecida antes de website.min.css, que sigue siendo la capa de sustitución posterior del tema. Guardar el CSS de WooCommerce cambia solo la URL y la versión de la hoja de estilos de ese identificador; no activa WooCommerce, no restaura las hojas de estilos de núcleo deshabilitadas de WooCommerce, no cambia las plantillas del escaparate ni añade la hoja de estilos a un sitio donde WooCommerce está inactivo.

Faceted Search sigue ese ciclo de vida para faceted-search.min.css. Su ajuste global y el descubrimiento existente de contenido, shortcode, widget y renderizado tardío siguen decidiendo si la hoja de estilos y el script emparejado se cargan. Guardar el CSS de Faceted Search cambia solo la URL y la versión de la hoja de estilos; no habilita la función, no la solicita en páginas no relacionadas, no cambia la configuración de facetas ni sustituye su JavaScript.

Cookie consent sigue ese ciclo de vida para la hoja de estilos generada a partir del layout y los ajustes de color actuales del aviso de cookies. POM crea su fuente legible cookie-consent.css y su cookie-consent.min.css optimizado juntos siempre que se regeneran los activos del sitio. Guardar el CSS de Cookie consent cambia solo la URL de la hoja de estilos existente; no habilita el aviso, no cambia su configuración ni sustituye su JavaScript. Después de la personalización, los cambios posteriores de ajustes de estilo de cookies regeneran Current Theme CSS y muestran Customized — source changed, pero el CSS guardado permanece activo hasta que se revise o revierta. Deshabilitar el aviso de cookies oculta el acordeón y no pone en cola ni su CSS ni su JavaScript; la personalización guardada se conserva y vuelve a estar disponible si el aviso se vuelve a habilitar.

Toast notifications sigue ese ciclo de vida para toastr.min.css. Su hoja de estilos y su JavaScript existentes web-toastr-lib permanecen controlados por el ajuste global Toast notifications y compartidos por POM Forms y la retroalimentación de añadir al carrito de WooCommerce. Se puede guardar una sustitución mientras el ajuste está deshabilitado, pero no activa ni pone en cola ninguno de los dos activos. Cuando el ajuste está habilitado, guardar el CSS de Toast notifications cambia solo la URL y la versión de la hoja de estilos; no sustituye toastr.min.js, no altera las dependencias de formularios, no habilita la retroalimentación de comercio ni cambia su posición ordinaria de bloqueo de renderizado.

Swiper sigue ese ciclo de vida para swiper.min.css. La hoja de estilos existente pom-swiper permanece encolada directamente solo cuando una galería usa el layout Full screen. Guardar el CSS de Swiper cambia solo la URL y la versión de esa hoja de estilos; no selecciona el layout de galería, no crea diapositivas, no sustituye swiper.min.js ni full-page.min.js, ni cambia la dependencia entre esos scripts.

Modal sigue el mismo ciclo de vida para modal.min.css. Su identificador existente web-modal-style permanece condicional: se sigue solicitando solo mediante una función modal, un shortcode, una plantilla o una página descubierta que ya lo requiere. Guardar el CSS de Modal cambia solo la URL y la versión de la fuente registrada; no carga el JavaScript de Modal, no crea marcado modal ni añade la hoja de estilos a páginas no relacionadas.

Tooltip sigue ese ciclo de vida para tooltip.min.css. Su identificador existente web-tooltip-style permanece emparejado con la función Tooltip y sigue usando la entrega de precarga diferida con baja prioridad de obtención. Guardar el CSS de Tooltip cambia solo la URL y la versión de la fuente registrada; no requiere Tooltip en otra página, no carga su JavaScript por sí solo ni sustituye la alternativa de hoja de estilos sin JavaScript.

Share sigue ese ciclo de vida para share.min.css. Su identificador existente web-share-style se sigue solicitando solo cuando un layout de entrada, un layout de producto, el shortcode Share, el marcado de opciones para compartir descubierto u otro consumidor existente requiere la función Share. Guardar el CSS de Share cambia solo la URL y la versión de fuente registradas de esa hoja de estilos; no habilita las opciones para compartir ni cambia el script asociado web-post-email-sharing.

Post navigation sigue ese ciclo de vida para page-nav.min.css. Su identificador existente web-page-nav-style permanece condicionado al ajuste de navegación anterior/siguiente del tipo de contenido actual. Guardar el CSS de Post navigation cambia solo la URL y la versión de la fuente registrada; no habilita la navegación, no altera sus enlaces ni carga la hoja de estilos en otra vista individual.

Full-page feed sigue ese ciclo de vida para full-page.min.css. Su identificador existente web-full-page-style permanece emparejado con web-feed-fullpage y se sigue solicitando solo cuando un shortcode, un manifiesto de contenido guardado, un contexto de archivo o de búsqueda selecciona el layout de feed a pantalla completa. Guardar el CSS de Full-page feed cambia solo la URL y la versión de la hoja de estilos registrada; no cambia el layout del feed ni su JavaScript.

Author page sigue ese ciclo de vida para author-page.min.css. Su identificador existente web-author-page-style permanece solicitado por los archivos de autor y por el contenido almacenado cuyo marcado descubierto contiene la caja de autor del tema. Guardar el CSS de Author page cambia solo la URL y la versión de la fuente registrada; no altera los datos del autor, no crea una caja de autor ni carga la hoja de estilos en solicitudes no relacionadas.

Advanced filters sigue ese ciclo de vida para advanced-filters.min.css. Su identificador existente web-advanced-filters-style permanece emparejado con pom-woocommerce-advanced-filters y se sigue solicitando solo mediante archivos de tienda o de taxonomía de productos de WooCommerce habilitados y mediante contenido almacenado cuyo marcado descubierto contiene el contenedor de filtros avanzados del tema. Guardar el CSS de Advanced filters cambia solo la URL y la versión de la hoja de estilos registrada; no habilita la función, no renderiza filtros, no cambia la condición de archivo ni sustituye su JavaScript.

Rating sigue ese ciclo de vida para rating.min.css. Su identificador existente web-rating-style permanece solicitado por las valoraciones de entrada individual habilitadas, las vistas compatibles de reseñas de productos y el contenido almacenado cuyo marcado descubierto contiene .web-rating. La función de valoración de entradas permanece emparejada con web-post-rating, incluido su mensaje de voto localizado existente. Guardar el CSS de Rating cambia solo la URL y la versión de la hoja de estilos registrada; no habilita las valoraciones, no crea marcado de valoración, no cambia los votos guardados ni sustituye el JavaScript de valoración.

Tabs sigue ese ciclo de vida para tabs.min.css. Su identificador existente web-tabs-style permanece solicitado por el shortcode Tabs, las pestañas de producto compatibles, los layouts de miniaturas de términos de taxonomía y el contenido almacenado cuyo marcado descubierto usa .web-tabs o un conmutador compatible de pestaña, píldora o lista. Los consumidores que solicitan la función Tabs completa permanecen emparejados con web-bootstrap-tab, mientras que los consumidores solo de hoja de estilos permanecen solo de hoja de estilos. Guardar el CSS de Tabs cambia solo la URL y la versión de la hoja de estilos registrada; no crea pestañas, no selecciona una pestaña, no cambia el contenido de las pestañas de producto ni añade JavaScript a los consumidores solo de hoja de estilos.

Accordion sigue ese ciclo de vida para accordion.min.css. Su identificador existente web-accordion-style permanece solicitado por el shortcode Accordion, las pestañas de producto configuradas como acordeones, las secciones de pago compatibles y el contenido almacenado cuyo marcado descubierto contiene las clases de acordeón del tema. Los consumidores existentes conservan web-bootstrap-collapse, y el módulo de shortcode conserva su comportamiento adicional web_accordion. Guardar el CSS de Accordion cambia solo la URL y la versión de la hoja de estilos registrada; no crea acordeones, no cambia qué secciones empiezan abiertas, no altera los ajustes de pago ni sustituye ninguno de los dos scripts.

Social icons sigue ese ciclo de vida para social-icons.min.css. Su identificador existente web-social-icons-style permanece asignado al módulo Social icons y al descubrimiento compatible de contenido almacenado. Durante el renderizado en vivo, el módulo sigue devolviendo antes de solicitar la función cuando no hay redes sociales configuradas. La función no tiene JavaScript asociado. Guardar el CSS de Social icons cambia solo la URL y la versión de la hoja de estilos registrada; no configura una red, no crea marcado de icono, no habilita el módulo en otra solicitud ni añade un script.

Personaliza una hoja de estilos de shortcode

El grupo Shortcode CSS assets sigue la lista de activos independientes. Actualmente contiene 360 image, A-Z feed, Audio playlist, Blockquote, Breadcrumbs, Code block — Light theme, Code block — Dark theme, Cookies info table, Countdown, Counter, FullCalendar, Gallery, Instagram, Image comparer, Interactive infography, Parallax scene, Pricing list, Progress bars, Scroll-triggered image sequence, Taxonomy terms list, Testimonial, Timeline, Typed text y Video:

  1. Ve a Settings → POM Theme → Advanced → Custom CSS.
  2. En Shortcode CSS assets, abre 360 image, A-Z feed, Audio playlist, Blockquote, Breadcrumbs, Code block — Light theme, Code block — Dark theme, Cookies info table, Countdown, Counter, FullCalendar, Gallery, Instagram, Image comparer, Interactive infography, Parallax scene, Pricing list, Progress bars, Scroll-triggered image sequence, Taxonomy terms list, Testimonial, Timeline, Typed text o Video.
  3. Compara Current Theme CSS con Your CSS, realiza los cambios necesarios y selecciona Save custom version.
  4. Abre una página que contenga el shortcode web_360_image, web_a_z_feed, audio_playlist, web_blockquote, web_breadcrumbs, web_code_block, web_cookies_info_table, web_countdown, web_counter, web_fullcalendar, web_gallery, web_instagram, web_image_comparer, web_interactive_infography, web_parallax_scene, web_pricing_list, web_progress_bar, web_scroll_triggered_image_sequence, web_taxonomy_terms_list, web_testimonial, web_timeline, web_typed_text o web_video correspondiente y verifica su presentación y sus controles.
  5. Abre una página sin ese shortcode y confirma que la hoja de estilos permanece ausente.

Sin una personalización, POM sigue cargando el 360-image.min.css generado por Webpack solo cuando se requiere el módulo de imagen 360. Guardar almacena la fuente legible, genera una copia minimizada por sitio y cambia solo la URL y la versión de la hoja de estilos existente web-360-image. El script emparejado web_360_image, el descubrimiento del shortcode, el marcado, los ajustes de guiñada e inclinación y la puesta en cola condicional permanecen sin cambios. Las referencias de imagen relativas usadas por la hoja de estilos de Pannellum se resuelven contra el directorio de activos canónico del tema para que sus controles sigan renderizándose desde la copia gestionada.

A-Z feed sigue el mismo ciclo de vida para a-z-feed.min.css. Su identificador existente web-a-z-feed permanece solicitado solo por el módulo web_a_z_feed y el descubrimiento compatible de contenido almacenado. La función no tiene JavaScript asociado. Guardar el CSS de A-Z feed cambia solo la URL y la versión de esa hoja de estilos; no cambia la consulta seleccionada, la base de bucle, las columnas, la plantilla de resultados, los grupos de entradas renderizados ni carga el activo en páginas no relacionadas.

Audio playlist sigue ese ciclo de vida para audio-playlist.min.css. Su identificador existente web-audio-playlist permanece solicitado solo por el módulo audio_playlist y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Audio playlist cambia solo la URL y la versión de esa hoja de estilos; no cambia los elementos de la lista, el estado de reproducción, los controles del pie, el script web_audio_playlist, su dependencia web-theme-js ni carga ninguno de los dos activos en páginas no relacionadas.

Blockquote sigue el mismo ciclo de vida para blockquotes.min.css. Su identificador existente web-blockquotes permanece solicitado solo por el módulo web_blockquote y el descubrimiento compatible de contenido almacenado. La función es solo de hoja de estilos. Guardar el CSS de Blockquote cambia solo la URL y la versión de esa hoja de estilos; no cambia el contenido de la cita, las etiquetas de autor, los ajustes de fondo, la visibilidad adaptable ni carga un activo en páginas no relacionadas.

Breadcrumbs sigue el mismo ciclo de vida para breadcrumbs.min.css. Su identificador existente web-breadcrumbs permanece solicitado solo por el módulo web_breadcrumbs y el descubrimiento compatible de contenido almacenado. La función es solo de hoja de estilos. Guardar el CSS de Breadcrumbs cambia solo la URL y la versión de esa hoja de estilos; no cambia la jerarquía generada, las etiquetas, los enlaces, los separadores, la visibilidad adaptable ni carga un activo en páginas no relacionadas.

Code block — Light theme y Code block — Dark theme son editores contiguos para los activos con ámbito code-block-prism-light.min.css y code-block-prism-dark.min.css. Un web_code_block con prism_theme="light" solicita solo web-code-block-prism-light; prism_theme="dark" solicita solo web-code-block-prism-dark; y prism_theme="none" no solicita ninguna hoja de estilos. Guardar cualquiera de los dos temas cambia solo la URL y la versión de su hoja de estilos seleccionada. El shortcode sigue decodificando y escapando el código almacenado, mientras que el script web_code_block sigue normalizando los lenguajes, ejecutando Prism y generando el marcado de tokens en los tres modos.

Cookies info table sigue el mismo ciclo de vida para cookies-info-table.min.css. Su identificador existente web-cookies-info-table permanece solicitado solo por el módulo web_cookies_info_table y el descubrimiento compatible de contenido almacenado. La función es solo de hoja de estilos. Guardar el CSS de Cookies info table cambia solo la URL y la versión de esa hoja de estilos; no cambia los datos de cookies configurados, las columnas o filas de divulgación generadas, los atributos del shortcode ni carga un activo en páginas no relacionadas.

Countdown sigue el mismo ciclo de vida para countdown.min.css. Su identificador existente web-countdown permanece solicitado solo por el módulo web_countdown y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Countdown cambia solo la URL y la versión de esa hoja de estilos; no cambia la fecha objetivo, las etiquetas, las actualizaciones segundo a segundo, el script existente web_countdown ni carga ninguno de los dos activos en páginas no relacionadas.

Counter sigue el mismo ciclo de vida para counter.min.css. Su identificador existente web-counter permanece solicitado solo por el módulo web_counter y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Counter cambia solo la URL y la versión de esa hoja de estilos; no cambia el número objetivo, el título, el icono o las clases de presentación, la detección del área de visualización, la animación de un segundo, el script existente web_counter ni carga ninguno de los dos activos en páginas no relacionadas.

FullCalendar sigue el mismo ciclo de vida para fullcalendar.min.css. Su identificador existente web-fullcalendar permanece solicitado solo por el módulo especialmente registrado fullcalendar y el descubrimiento de contenido almacenado compatible web_fullcalendar. Guardar el CSS de FullCalendar cambia solo la URL y la versión de esa hoja de estilos; no cambia el registro especial del módulo, los filtros de taxonomía de productos, la solicitud de eventos, los controles de vista, el script existente web_fullcalendar, su dependencia web-theme-js ni carga ninguno de los dos activos en páginas no relacionadas.

Gallery sigue el mismo ciclo de vida para gallery.min.css. Su identificador existente web-gallery permanece solicitado solo por el módulo web_gallery y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Gallery cambia solo la URL y la versión de esa hoja de estilos. El módulo conserva sus scripts existentes web_gallery y web_carousel, mientras que cada layout mantiene sus propias integraciones condicionales: los lightboxes elegibles conservan el cargador diferido de PhotoSwipe, los layouts de carrusel conservan Flickity, masonry conserva Isotope, y full_screen conserva la hoja de estilos y el script directos de Swiper más el inicializador dependiente pom-fullpage. Ninguno de esos activos independientes o de proveedor es sustituido, habilitado ni cargado en otra página por el editor de Gallery.

Instagram sigue el mismo ciclo de vida para instagram.min.css. Su identificador existente web-instagram permanece solicitado solo por el módulo web_instagram y el descubrimiento compatible de contenido almacenado. La función es solo de hoja de estilos. Guardar el CSS de Instagram cambia solo la URL y la versión de esa hoja de estilos; no cambia la cuenta seleccionada, la solicitud de imagen, el marcado del feed, las columnas adaptables, los enlaces de medios, el mensaje de token faltante ni carga un activo en páginas no relacionadas.

Image comparer sigue el mismo ciclo de vida para la hoja de estilos Juxtapose completa image-comparer.min.css. Su identificador existente web-image-comparer permanece solicitado solo por el módulo web_image_comparer y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Image comparer cambia solo la URL y la versión de esa hoja de estilos; no cambia las dos fuentes de imagen, el ID de componente y el marcado generados, la posición inicial, el comportamiento adaptable, la biblioteca Juxtapose, el script existente web_image_comparer ni carga ninguno de los dos activos en páginas no relacionadas.

Interactive infography sigue el mismo ciclo de vida para interactive-infography.min.css. Su identificador existente web-interactive-infography permanece solicitado solo por el módulo padre web_interactive_infography y el descubrimiento compatible de contenido almacenado. El módulo padre no tiene JavaScript de frontend dedicado. Guardar el CSS de Interactive infography cambia solo la URL y la versión de esa hoja de estilos; no cambia la imagen de fondo, la opacidad, el contenido anidado web_infography_spot, las posiciones, las acciones, los marcadores ni carga el activo padre en páginas no relacionadas. Un punto anidado puede seguir solicitando sus activos compartidos existentes de Tooltip o Modal cuando su modo seleccionado los requiera.

Parallax scene sigue el mismo ciclo de vida para parallax-scene.min.css. Su identificador existente web-parallax-scene permanece solicitado solo por el módulo padre web_parallax_scene y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Parallax scene cambia solo la URL y la versión de esa hoja de estilos; no cambia el ID de escena generado, la imagen, las capas de texto o HTML anidadas, los valores de profundidad X e Y, la configuración de entrada relativa, solo al pasar el cursor o de eventos de puntero, el comportamiento incluido parallax-js en el script existente web_parallax_scene ni carga ninguno de los dos activos en páginas no relacionadas.

Pricing list sigue el mismo ciclo de vida para pricing-list.min.css. Su identificador existente web-pricing-list permanece solicitado solo por el módulo padre web_pricing_list y el descubrimiento compatible de contenido almacenado. El módulo no tiene JavaScript de frontend dedicado. Guardar el CSS de Pricing list cambia solo la URL y la versión de esa hoja de estilos; no cambia los títulos anidados web_pricing_list_item, los precios, los prefijos, los sufijos, los subtítulos, las imágenes, los iconos, la visibilidad adaptable ni carga el activo padre en páginas no relacionadas. Un hijo con un icono con título puede seguir solicitando la función compartida existente de Tooltip de forma independiente.

Progress bars sigue el mismo ciclo de vida para progress-bars.min.css. Su identificador existente web-progress-bars permanece solicitado solo con el módulo web_progress_bar y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Progress bars cambia solo la URL y la versión de esa hoja de estilos; no altera el script web_progress_bars, su animación de un segundo, la etiqueta de porcentaje y el ancho de relleno calculados, el layout de número estático, las variantes de grosor, la visibilidad adaptable ni la carga condicional.

Scroll-triggered image sequence sigue el mismo ciclo de vida para scroll-triggered-image-sequence.min.css. Su identificador existente web-scroll-triggered-image-sequence permanece solicitado solo con el módulo web_scroll_triggered_image_sequence y el descubrimiento compatible de contenido almacenado. Guardar su CSS cambia solo la URL y la versión de esa hoja de estilos; no altera el script web_scroll_triggered_image_sequence, la prioridad del primer fotograma, la carga de los fotogramas restantes cerca del área de visualización, la línea de tiempo de desplazamiento fijada, el tamaño del lienzo y el ajuste de medios, el avance del vídeo, el estado del spinner, las etapas de texto anidadas ni la carga condicional.

Taxonomy terms list sigue el mismo ciclo de vida para taxonomy-terms-list.min.css. Su identificador existente web-taxonomy-terms-list permanece solicitado solo por el módulo web_taxonomy_terms_list y el descubrimiento compatible de contenido almacenado. El módulo es solo de hoja de estilos. Guardar el CSS de Taxonomy terms list cambia solo la URL y la versión de esa hoja de estilos; no cambia la taxonomía seleccionada, el filtrado de términos vacíos, la agrupación alfabética y numérica, los enlaces de índice, los enlaces de volver arriba, los destinos de archivo, los atributos del shortcode ni carga un activo en páginas no relacionadas.

Testimonial sigue el mismo ciclo de vida para testimonial.min.css. Su identificador existente web-testimonial permanece solicitado solo por el módulo web_testimonial y el descubrimiento compatible de contenido almacenado. El módulo es solo de hoja de estilos. Guardar el CSS de Testimonial cambia solo la URL y la versión de esa hoja de estilos; no cambia las tres variantes de testimonio, la ubicación del autor del estilo 2, los atributos de carga diferida del retrato, el contenido de la cita, el marcado de autor y fuente, la visibilidad adaptable ni carga un activo en páginas no relacionadas.

Timeline sigue el mismo ciclo de vida para timeline.min.css. Su identificador existente web-timeline permanece solicitado solo por el módulo timeline, el shortcode web_timeline y el descubrimiento compatible de contenido almacenado. El módulo es solo de hoja de estilos. Guardar el CSS de Timeline cambia solo la URL y la versión de esa hoja de estilos; no cambia el análisis de elementos, el orden alternado par/impar, los títulos, las descripciones, las fechas, las clases de paleta, los ID o clases personalizados, el marcado de lista generado ni carga un activo en páginas no relacionadas.

Typed text sigue el mismo ciclo de vida para typed-text.min.css. Su identificador existente web-typed-text permanece solicitado solo por el módulo typed_text, el shortcode web_typed_text y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Typed text cambia solo la URL y la versión de esa hoja de estilos. El script existente web_typed_text sigue inicializando Typed.js con las cadenas, la velocidad, el bucle, el cursor y el comportamiento de disponibilidad configurados, y las páginas no relacionadas siguen sin cargar ninguno de los dos activos.

Video sigue el mismo ciclo de vida para video.min.css. Su identificador existente web-video permanece solicitado solo por el módulo video, el shortcode web_video y el descubrimiento compatible de contenido almacenado. Guardar el CSS de Video cambia solo la URL y la versión de esa hoja de estilos. Los scripts existentes web_video y web-jarallax-video conservan la resolución de proveedores, la reproducción en línea, los modos de reproducción automática, los controles, las relaciones de aspecto, los conmutadores de reproducción, la pantalla completa modal, el manejo de Escape y sus dependencias actuales. Las páginas sin Video siguen sin cargar ninguno de estos activos del módulo.

Si una actualización del tema o un generador basado en ajustes cambia el CSS canónico de un activo independiente o de shortcode personalizado, su acordeón muestra Customized — source changed y mantiene activa la versión personalizada guardada hasta que se revise o revierta. Revert to theme CSS elimina ambas copias personalizadas y devuelve de inmediato la puesta en cola al activo optimizado actual. Si alguno de los archivos personalizados falta o no coincide con su huella guardada, el frontend recurre a ese activo actual y el editor informa del problema de fuente.

Seguridad de generación y transferencia

Guardar y revertir son operaciones atómicas. Los cambios de Component CSS regeneran el conjunto completo de activos del tema y conservan el cambio solo cuando la generación tiene éxito. Los cambios de Independent CSS publican solo esa fuente legible y su hermano minimizado. Si la validación o la publicación fallan, POM restaura la fuente y el estado de registro anteriores; el sitio público sigue usando el último website.min.css válido o el activo de tema independiente original.

Las sustituciones de componentes y de activos independientes participan en la transferencia de ajustes existente bajo Settings → POM Theme → Tools. Exporta las entradas de ajustes correspondientes para incluir sus fuentes legibles y cualquier copia independiente optimizada. Después de importar, regenera los activos antes de comprobar website.min.css; las sustituciones independientes y de shortcode ya pueden resolverse mediante sus copias optimizadas transferidas, mientras que la regeneración publica las sustituciones de componentes importadas en el paquete principal.

Carga una hoja de estilos personalizada en todo el sitio

Usa Settings → POM Theme → Advanced → Custom CSS cuando una sola hoja de estilos independiente deba cargarse en cada página pública:

  1. Habilita y guarda los ajustes de Custom CSS si todavía no están activos.
  2. En Custom CSS, añade o abre una fila de hoja de estilos.
  3. Introduce un CSS name y las reglas en CSS.
  4. Selecciona Is a global stylesheet.
  5. Guarda los ajustes y verifica la hoja de estilos en más de una página pública.

La casilla está desactivada por defecto, incluso para las filas de hoja de estilos creadas antes de que esta opción estuviera disponible. Cuando está habilitada, POM carga esa fila como su propia hoja de estilos después de la hoja de estilos principal del tema; no fusiona la fila en website.min.css. La hoja de estilos también permanece cargada en las páginas configuradas para sustituir la cola de estilos normal. Deja la casilla desactivada cuando una plantilla, un módulo o un elemento de contenido individual deba cargar la hoja de estilos solo donde se seleccione.

Usa los editores de componentes al sustituir un fragmento generado compatible. Usa el editor global CSS para las reglas que deban añadirse a website.min.css, y usa filas de hoja de estilos cuando se requiera un archivo global o asignado de forma selectiva separado.

El editor de páginas y entradas

Usa el editor normal de WordPress para el registro de contenido, el estado de publicación, los términos de taxonomía, la imagen destacada y otros datos del objeto.

Cuando el rol y el tipo de contenido actuales pueden usar el maquetador incluido, el editor también expone los controles de POM Page Builder. El maquetador posee la composición de la página y los ajustes de componentes; no sustituye el registro subyacente de WordPress.

Las pantallas de contenido individuales también pueden exponer ajustes de POM para el comportamiento seleccionado de cabecera, subcabecera, migas de pan, pie de página, hoja de estilos, script o plantilla. Comprueba estos valores locales cuando una página difiera de la configuración global.

Apariencia

Usa las pantallas estándar de WordPress para estas integraciones del tema:

  • Appearance → Themes instala, activa y actualiza POM.
  • Appearance → Menus → Manage Locations asigna los menús a las ubicaciones registradas por la configuración actual de cabecera.
  • Appearance → Widgets rellena las áreas de widgets primaria, secundaria, personalizada, de pie de página y las demás áreas registradas.

POM registra siempre sus ubicaciones principales de primaria, primaria con sesión iniciada, móvil, copyright de pie de página, navegación lateral, pantalla completa y desplegable con sesión iniciada. Un layout de cabecera dividida añade su ubicación primaria adicional; habilitar una barra superior o inferior añade ubicaciones izquierda y derecha para esa barra.

Formularios

Un administrador habilita primero el sistema de formularios en Settings → POM Theme → Forms → General.

El menú separado Forms posee entonces:

  • All Forms
  • Add New
  • Submissions

Los ajustes del tema establecen el comportamiento compartido; el menú Forms crea y opera los formularios individuales.

WooCommerce

Usa las pantallas de WooCommerce para productos, variaciones, cupones, pedidos, impuestos, envíos, pagos, cuentas y comportamiento de correo electrónico.

Usa Settings → POM Theme → E-Commerce para la capa compatible de presentación y mejora de POM: layouts de producto y archivo, carritos, presentación de pago, adiciones de cuenta, listas de espera, listas de deseos, vales, herramientas de entrega y otras funciones habilitadas.

Ajustes del Page Builder

Los administradores pueden gestionar el acceso al Page Builder en Settings → Page builder. El acceso por rol decide qué tipos de contenido y qué funciones del maquetador puede usar un grupo de usuarios. Si el maquetador falta para un editor, comprueba el acceso por rol y por tipo de contenido antes de reconstruir la página de otra manera.

Cuando no encuentras un control

  1. Confirma que estás administrando el sitio previsto en la red.
  2. Confirma que tu rol de WordPress tiene acceso a esa sección.
  3. Comprueba si la función debe habilitarse y guardarse primero.
  4. Comprueba si un plugin necesario como WooCommerce está activo.
  5. Decide si el valor pertenece al registro de contenido, a su plantilla, al Page Builder o a los ajustes globales del tema.
  6. Usa el mapa de documentación para abrir la guía enfocada.