Crear variaciones de estilo en bloques de temas de WordPress trucos CSS - Aprender Marketing
CSS

Crear variaciones de estilo en bloques de temas de WordPress trucos CSS

Estilos globalesLos temas de bloques de características son una de mis partes favoritas para crear temas de bloques. variaciones de estilo globales en WordPress se introdujeron en Gutemberg 12.5 lo que permitiría a los autores de temas crear alternativas a un tema de bloque con diferentes combinaciones de colores, fuentes, tipografía, espacios, etc. Diferente theme.json archivos almacenados bajo /styles carpeta «permite a los usuarios cambiar rápida y fácilmente entre diferentes vistas sobre el mismo tema».

La interfaz de usuario del panel Estilos globales está en iteración de desarrollo activa. Se pueden encontrar y seguir más detalles sobre el desarrollo de esta característica aquí en este boleto para GitHub (# 35619).

En este artículo repasaré la creación de evidencia para el concepto de una variante global de estilo, usando una alternativa /styles/theme.jsen archivos y cree temas secundarios con diferentes modos de color simplemente intercambiando paletas de colores.

Contenido

suposiciones

Este artículo está destinado a aquellos que tienen un conocimiento básico de los temas de bloques de WordPress y conocimientos sobre el uso del Editor de sitio completo (FSE) interfaz. Si es nuevo en el bloqueo de temas y FSE, puede comenzar aquí en CSS-Tricks con esta introducción detallada a WordPress y documentación para el editor del sitio. Este Edición completa del sitio. El sitio web es una de las guías de capacitación más actualizadas para conocer todas las funciones de FSE, incluidos los temas de bloques y las variaciones de estilo que se analizan en este artículo.

Variaciones de estilo global

Para un poco de historia, echemos un breve vistazo a la variación en el estilo global. Veinticinco y dos (TT2) topic manager y director de diseño de Automattic Kiel Reigstad introducir variaciones globales de estilos con este tuit y Boleto para GitHub # 292 como temas infantiles. En el boleto, Kjell señala que originalmente se diseñaron como patrones de colores alternativos y combinaciones de fuentes, pero que se pueden usar para crear temas infantiles simples.

Este ejemplo de Kjell demuestra cómo se pueden seleccionar diferentes combinaciones de estilos de opciones disponibles en la barra lateral.

Desde entonces, el equipo de Automattic ha estado experimentando con el concepto de crear temas secundarios variables (solo colores y fuentes variables), incluidos los siguientes:

  • geólogo con variaciones en azul, crema, pizarra, amarillo
  • cuadrado con versiones en negro, verde, rojo, blanco y amarillo

Cambio de estilo global

EN Gutemberg 12.5 la edición introdujo un interruptor de estilo global que permitirá a los usuarios cambiar rápida y fácilmente entre diferentes puntos de vista sobre el mismo tema a través de diferentes theme.json archivos almacenados bajo un /styles carpeta.

El concepto de permitir el cambio de la variación global de estilo a través de theme.json ha sido discutido en GitHub durante algún tiempo el ingeniero líder Gutenberg Matías Ventura le dio un nuevo significado al agregarlo a Hoja de ruta para WordPress 6.0 pronto.

Adopte alternativas basadas en el estilo json variaciones. Esto se ha molestado en varios videos sobre el nuevo tema predeterminado y debería revelarse y presentarse por completo en 6.0. Uno de los objetivos paralelos es crear varias variantes diferentes de TT2, hechas solo con estilos. (35619)

Matías Ventura, «Hoja de ruta preliminar a 6.0»

La última iteración de desarrollo de estilo de iteración está disponible con Gutenberg 13.0 y se incluye en WordPress 6.0. Explorar WordPress 6.0 Vídeo, enlace al producto de Automattic Ann McCarthy proporciona una descripción general de sus características clave, incluidas las variaciones de estilo y la API Webfonts (a partir del minuto 5:18) que se analizan en este artículo.

Variación del estilo del tema sobre un tema hijo

En mi artículo anterior, analicé brevemente los problemas de construcción de niños. Las variaciones de estilo globales desdibujaron la línea entre alternate-theme.json y temas infantiles. Por ejemplo, la única diferencia entre los recientemente lanzados alante-oscuro tema hijo y su tema padre es un alternate.json un archivo en el tema secundario que anula los estilos de tema global de la siguiente manera:

El tema allante-oscuro.

Del mismo modo tanto recientes Alara temas infantiles en directorio de WordPressFramboaz y richmond – se diferencian solo en su singular theme.json expediente.

Sección 1: Crear variaciones de un estilo de tema

En la base de la carpeta de temas infantiles, cree un /styles una carpeta que contiene variaciones de estilo, como archivos JSON. Para este ejemplo de demostración, creé tres variantes de Twenty Twenty-Two theme.json paletas de colores – blue.json, maroon.jsony pink.json Intercambiando los colores de primer plano y antecedentes:

Captura de pantalla de la interfaz de usuario de Visual Studio Code que muestra la estructura de archivos del tema secundario "azul.json", "granate.json"y "rosa.json" en el directorio de la hoja de estilo.
La estructura de archivos del tema secundario «blue.json», «maroon.json» y «pink.json» en el directorio de estilo.

Aquí está el resultado final después de hacer clic icono de estilo del consejo de administración (ubicado en Apariencia → Redactor):

GIF animado que muestra variaciones del tema en WordPress.
Vaya a la interfaz de administración de WordPress para seleccionar los estilos «azul», «granate» y «rosa».

Hacer clic Otros estilos botón (rediseñado recientemente en estilos de navegador), que presenta íconos de color «azul», «marrón» y «rosa» además de sus estilos originales.

Para cambiar y elegir un estilo, seleccione su opción preferida y haga clic en Guardar botón (arriba a la derecha) que aparece en la parte frontal de su navegador.

Agregar etiquetas para opciones de estilo alternativas y nombre de archivo con efecto de animación al sostener el mouse están disponibles en Gutenberg 13.0.

Paso 1: configuración e instalación

Primero, instale y configure un sitio de WordPress con un poco de contenido ficticio. Para esta demostración, realicé una nueva instalación de WordPress, activé el tema Twenty Twenty-Two y agregué Datos de la prueba de Gutenberg.

Las variaciones en el estilo del tema y las API de WebFonts que se analizan en este artículo requieren la instalación y activación de Gutenberg 13.0 o WordPress 6.0.

Paso 2: Crea un tema hijo TT2

En esta demostración de tema secundario, cambiemos ligeramente el color del cuerpo del color del encabezado y el pie de página, con todo el contenido del sitio centrado:

La parte inferior del diseño del sitio no está visible porque no se desplaza a una vista.  La navegación del sitio está presente en el encabezado.  Se ve una gran imagen de una pancarta con un pájaro.  La fecha y el título de la última publicación del blog también son visibles.
Captura de pantalla del tema de demostración predeterminado en la ventana del navegador.

Paso 3: Crear archivos JSON

Crear /styles en el tema de tus hijos root carpeta con blumi, maroony pink.json archivos:

__ style.css
__ theme.json
__ functions.php
__ index.php
__ templates
__ ...
__ parts
__ ...
__ styles
__ blue.json
__ maroon.json
__ pink.json

Paso 4: crea archivos JSON con un tema alternativo

Entonces crea el tuyo propio alternate-theme.json archivos con las paletas de colores deseadas en /styles carpeta. Para esta demostración, creé tres paletas de colores (blue, maroony pink). Aquí está el código para maroon.json:

{
  "version": 2,
  "title": "Maroon",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#7C290F", "name": "Foreground" },
        { "slug": "background", "color": "#ffffff", "name": "Background" },
        { "slug": "foreground-dark", "color": "#000000", "name": "Foreground Dark" },
        { "slug": "background-body", "color": "#ffd8be", "name": "Background Body" },
        { "slug": "primary", "color": "#000000", "name": "Primary" },
        { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" },
        { "slug": "tertiary", "color": "#55ACEE", "name": "Tertiary" }
      ]
  },
  "typography": {}
},
"styles": {
  "color":
      {
        "background": "var(--wp--preset--color--background-body)",
        "text": "var(--wp--preset--color--foreground-dark)"
      },
  "elements": {
      "link": {
        "color": { "text": "var(--wp--preset--color--primary)" }
      }
    }
  }
}

Los otros dos se alternan blue.json y pink.json valores para compartir archivos en foreground y background-body, foreground-dark y primary color propiedades con sus respectivos blue y pink valores de color hexadecimales.

Sección 2: Ejemplo de caso de uso

Como señalé en mi artículo anterior, trabajé en temas de bloque y los usé para mi propio sitio de proyectos personales.Inspirado por variaciones en el estilo del tema y API de fuentes web funciones en el complemento de Gutenberg, comencé a cambiar el tema del bloque en el proceso de trabajar con un modo alternativo en color oscuro y configurando la API de Webfonts.

En esta sección, lo guiaré a través de la forma en que creé Bloques TT2 Gopherun hermano de demostración de mi tema de bloque inacabado creado para este artículo. El tema incluye modos de color granate, oscuro y claro creados con variaciones de estilo de tema y la API Webfonts que estuvo disponible con Gutenberg Edición 12.8.

Mostrar la página de inicio que creamos con variaciones de estilo en WordPress.
Captura de pantalla que muestra un sitio de muestra con el tema predeterminado TT2 Gopher.

Algunos aspectos destacados del tema TT2 Gopher incluyen una visualización centrada del contenido en una sola columna, encabezados y pies de página separados, un archivo y páginas de búsqueda más fáciles de usar.

Una copia de Bloques TT2 Gopher está disponible en el repositorio de GitHubque puede ramificar y personalizar.

Crear un modo oscuro de WordPress

Primero, un poco de fondo en modo oscuro. El modo oscuro es una preferencia personal y los desarrolladores lo ofrecen u otro cambio de modo como se incluye este sitiolo cual no es poca cosa para la mayoría de los desarrolladores comunes. La creación de un modo oscuro está bien cubierta aquí en CSS-Tricks, incluida esta guía completa sobre el modo oscuro y la impresión en modo oscuro.

En un sitio de WordPress podemos agregar un interruptor de modo oscuro usando WP modo oscuro enchufar. Erin Myers de WP Engine y WPPrincipiante describir cómo usar el complemento WP Dark Mode mientras Brenda Barron enumera otras opciones para complementos de modo oscuro en esta publicación de WPExplorer.

Crear un modo oscuro en los temas de WordPress en bloque sin un complemento implica varios pasos. Hace más de un año, Ari Statopoulos creó soporte oscuro para el tema TT1 Blocks en GitHubTeniendo en cuenta el ejemplo aquí, incluye algunos conocimientos de creación de JavaScript activos (por ejemplo, cambio, personalización, compatibilidad con el modo editor), color oscuro Variables CSSy extendido functions.php archivos

EN este video cortoAnne McCarthy de Automattic demuestra lo fácil que es crear un modo de tema de bloque TT2 oscuro con una variación de estilo global al agregar La esencia de los fragmentos JSON de kllejr en TT2 /styles carpeta.

Crear un tema de demostración TT2 Gopher con bloques

TT2 Gopher es una versión predeterminada muy simple y modificada Veintidós Incluye tres variantes del estilo del tema: granate, oscuro y blanco.

Describir cada paso de personalización está más allá del alcance de este artículo, pero puede obtener más información de mi introducción detallada a los temas de bloques de WordPress, así como también Manual del editor de bloques en WordPress.org.

Una breve descripción de las combinaciones de colores y fuentes del tema TT2 Gopher incluye:

  • Modo de luz
    • El encabezado es blanco y el pie de página es un color de fondo ahumado.
    • abrir sans es la fuente principal.
  • modo oscuro
    • El encabezado y el pie de página son negros con colores oscuros más claros para el fondo del cuerpo.
    • Fuente Serif Pro es la fuente principal.
  • modo castaño
    • El encabezado y el pie de página son de color marrón oscuro, con un fondo de cuerpo amarillento más claro.
    • trabajar sin es la fuente principal.

Déjame contarte brevemente cómo creé variaciones de estilo sobre un tema.

Agregar y configurar fuentes web

El complemento Gutenberg 12.8 introdujo uno nuevo API de fuentes web que permite a los autores cargar fuentes locales (agrupadas) «de una manera fácil de realizar, fácil de usar y preparada para el futuro». Esta función se puede implementar en un tema de bloque a la manera de PHP o theme.json camino.

Actualmente, esta característica solo funciona con fuentes completas con temas de bloque y no es compatible. Fuentes alojadas por Google por motivos de privacidad. Se cubren más detalles sobre el estado actual de desarrollo de la API de Webfonts esto hace que WordPress sea un elemento básico y este artículo de WP Tavern.

Paso 1: descarga y agrega fuentes a un tema de bloque

El tema TT2 agrega archivos Source Serif Pro al tema assets/fonts dos fuentes adicionales – Work Sans y Public Sans – también disponible en el repositorio de GitHub.

Paso 2: registrar fuentes web

En el tema TT2, localmente Source Serif Pro Las webfonts están registradas con PHP en su functions.php expediente:

function twentytwentytwo_get_font_face_styles() {
  return "
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
  }
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
  }
  ";
}

Gutenberg 12.8 introdujo la capacidad de registrar fuentes web locales theme.json presentar lo siguiente theme.json Extractos del tema de demostración TT2 Gopher muestran cómo las fuentes web Sans locales se registran en la variante de estilo de tema granate:

"typography": {
  "fontFamilies": [
    {
      "fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
      "slug": "work-sans",
      "name": "Work Sans",
      "fontFace": [
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] }
      ]
    }
  ]
}

En Esta lección y este artículo de WP Tavern.

Crear variaciones de estilo sobre un tema

Siguiendo los pasos descritos en la sección anterior, creé dos versiones alternativas de theme.json expediente – white.json y black.json – con diferentes combinaciones de colores y fuentes en el tema infantil /styles carpeta.

Esta característica requiere versión 2 sobre theme.jsonDesde Gutenberg 12.5 también se puede añadir el título a theme.json para mostrar los estilos de etiqueta en el editor del sitio o el nombre del archivo (sin extensión) se mostrará de forma predeterminada.

Aquí hay un ejemplo de white.json:

{
  "version": 2,
  "title": "White",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#000000", "name": "Foreground" },
        { "slug": "background", "color": "#f2f2f2", "name": "Background" },
        { "slug": "background-header", "color": "#ffffff", "name": "Background header" },
        { "slug": "primary", "color": "#0d0d0d", "name": "Primary" },
        { "slug": "secondary", "color": "#F0EAE6", "name": "Secondary" },
        { "slug": "tertiary", "color": "#eb3425", "name": "Tertiary" },
        { "slug": "quaternary", "color": "#7c7e83", "name": "Quaternary" }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
        "fontFamily": ""Public Sans", sans-serif",
        "name": "Public Sans",
        "slug": "public-sans",
        "fontFace": [
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:.assets/fonts/publicSans/PublicSans-VariableFont_wght.ttf.woff2" ] },
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/publicSans/PublicSans-Italic-VariableFont_wght.ttf.woff2" ] }
        ]
      }
    ]
  }
},
"styles": {
  "blocks": {
    "core/image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/post-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/query-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/post-featured-image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-logo": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)", "fontWeight": "normal" }
    }
    },
    "color": { "background": "var(--wp--preset--color--background)", "text": "var(--wp--preset--color--foreground)" },
    "elements": {
      "h1": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--colossal)" }
      },
      "h2": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
      },
      "h3": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--huge)" }
      },
      "h4": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--preset--font-size--x-large)" }
      },
      "h5": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "h6": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "400", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "link": {
        "color": { "text": "var(--wp--custom--color--foreground)" }
      }
    },
    "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)" }
  }
}

Este código intercambia paletas de colores de theme.json y también registra y define archivos locales Public Sans.

EN black.json también es muy similar y utiliza fuentes Source Serif Pro registradas en functions.php expediente.

Captura de pantalla del tema de color claro a la izquierda.  Y una captura de pantalla del tema en oscuro a la derecha.  La navegación en el título y la primera entrada en el blog son visibles.
Comparación lado a lado de temas de color claro (izquierda) y oscuro (derecha) para TT2 Gopher.

Ejemplo de temas de bloque con variaciones de estilos de tema

  • Veinticinco y dos – el primer tema predeterminado, incluidas las variaciones de estilo. Su versión actualizada 1.2, completa con WordPress 6.0 incluye tres variaciones de estilo – «Azul», «Rosa» y «Suizo»: permite a los usuarios cambiar rápidamente entre diferentes estilos visuales.
  • escarcha – Tema de bloque experimental con variación del estilo de tema oscuro.
  • Alara – tiene más de 100 instalaciones activas e incluye 7 variaciones de estilo.
  • wabi– que poderes rico tabor el sitio web contiene 3 opciones de estilo y más de 300 instalaciones activas.
  • Dinámico – Hay más de 600 instalaciones y una variación de estilo sobre un tema oscuro.
  • Colgante – un tema del equipo temático de Automattic en desarrollo en GitHub contiene 3 variaciones de estilo de tema.

EN este artículo de WP TavernJustin sugiere que los creadores de temas pueden usar esta nueva función vinculándola a la configuración de los visitantes del sitio, mientras que algunos usuarios pueden preferir personalizar su sitio, dándole al diseño un aspecto estacional o basado en eventos. Probablemente sea un poco temprano, pero solo el tiempo dirá cómo los autores y usuarios de temas utilizarán esta potente función.

resumiendo

La creación de variaciones de estilo en un tema de bloque con diferentes tipografías y combinaciones de colores se ha simplificado enormemente sin el uso de complementos. Esta es una de mis características favoritas del editor de bloques, que planeo aplicar en mis proyectos personales.

En mi opinión, las variaciones en el estilo del tema son definitivamente una juegos de cambio para temas de bloque y con esta práctica función, es posible que no necesite temas secundarios o incluso muchos temas de bloque de cookies. Varios temas de bloques básicos bien diseñados, similares al equipo de temas automatizado lienzo de bloque o base de bloque (temas para bloques base en el proceso de trabajo en GitHub), se pueden personalizar con una variación del estilo del tema.


Recursos

modo oscuro

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba