A tema híbrido de WordPress usa theme.json para definir estilos y personalizar el editor de bloques al mismo tiempo que usa archivos de plantilla PHP tradicionales.
Los temas híbridos aprovechan el editor de bloques para contenido pero no para construir el tema en sí. Bloquear temas use el nuevo Editor de sitios para crear y personalizar el tema directamente en el editor de bloques.
BE Starter es un tema de inicio gratuito para ayudarlo a crear temas híbridos de WordPress.
En CultivateWP hemos creado temas híbridos desde antes de que el editor de bloques se enviara oficialmente en WordPress 5.0 y hemos creado cientos de temas híbridos para clientes. Tenemos un tema de inicio interno que usamos en todos los proyectos, que se actualiza continuamente con nuevas funciones, mejoras y correcciones con cada versión importante de WP.
BE Starter es una copia de nuestro tema Cultivate Starter, pero sin todas las funciones específicas de los bloggers de alimentos.
Por cierto, nuestro equipo de desarrollo crecerá pronto, así que si te gusta trabajar en temas híbridos de WordPress, ¡avísame!
Características del tema de inicio
Defina colores y estilos con theme.json
Utilizamos un proceso de diseño totalmente tokenizado, por lo que cada clave en theme.json se asigna a un token de diseño de Figma.
Los diseñadores personalizarán los tokens para crear una guía de estilo del sitio (p. ej., cambiar todos los colores de la marca, ajustar las sombras del cuadro, ajustar los tamaños de fuente). A medida que diseñen el sitio, todo se diseñará con estos tokens.
Cuando llega el momento de desarrollar el sitio, el desarrollador personaliza el archivo theme.json en función de la configuración de los tokens de diseño de Figma. Entonces es simplemente una cuestión de diseñar elementos con los tokens apropiados. Por ejemplo, h1 podría usar el tamaño de fuente “Colosal” mientras que h2 usa “Enorme”.
Si se requieren familias de fuentes personalizadas, usaremos un slug de “primary” y las registraremos así. Tratamos de usar primaria/secundaria/etc. en lugar de nombres demasiado específicos para colores y familias de fuentes para que cuando rediseñemos un sitio, no terminemos con algo como .has-blue-background-color { color: red; }
Usamos un verificador de contraste para determinar qué colores de marca deben usar “primer plano” (un color oscuro) o blanco como color de texto. Asegúrese de editar _blocks-core.scss e incluir cualquier color aquí que deba usar texto en blanco.
Utilizar el settings.custom.layout sección de theme.json para configurar:
contentes el ancho del área de contenido utilizado para los diseños de contenido y barra lateral de contenido. También se usa para el ancho del contenido dentro de un bloque de grupo.widees el ancho máximo del sitio utilizado en el encabezado del sitio, el pie de página del sitio, el área de contenido para el diseño de “Contenido de ancho completo” y la opción de alineación “ancha”sidebares el ancho de la barra lateralpaddinges el relleno izquierdo/derecho en el área de contenidoblock-gapes el espacio entre bloques (ej: párrafos y encabezados)block-gap-largees el relleno superior/inferior en grupos de ancho completo con un color de fondo, el margen superior/inferior en el bloque separador, el relleno superior/inferior en el interior del sitio y en algunos otros lugares que necesitan un espacio mayor que el espacio entre bloques.
Cree bloques personalizados usando ACF y block.json
Tengo otro artículo que entra en más detalles sobre la creación de bloques ACF con block.json.
El tema inicial te facilitará aún más la creación de estos bloques:
- Registrará automáticamente cada bloque en la carpeta /blocks
- Registrará el estilo.
block-{block name}si existe un archivo style.css en la carpeta del bloque - Incluirá el archivo init.php si existe uno
La mayoría de sus bloques solo necesitarán un archivo block.json para registrar el bloque, un archivo render.php para el marcado del bloque y un archivo style.css para diseñar el bloque.
Si tiene código adicional que necesita cargar, puede crear un archivo init.php que se cargará en el gancho de inicio con una prioridad de 5. Por ejemplo, en el bloque de enlaces sociales que he incluido en el tema inicial, el El archivo init.php tiene una función para recuperar todos los enlaces sociales del sitio desde Yoast SEO.
Los bloques construidos en este método son totalmente autónomos. Cuando llegue el momento de rediseñar un sitio, puede copiar todo el directorio /blocks al nuevo tema y todo funcionará.
Los bloques están diseñados con CSS estándar (sin compilación SASS) y variables CSS generadas a partir del archivo theme.json. Ex:background: var(--wp--preset--color--backdrop);
El archivo CSS del bloque no pasa por el filtro de WordPress para anteponerlo automáticamente con .editor-styles-wrapper por lo que es posible que deba agregar esa clase por su cuenta para un estilo específico del editor.
Bloquear áreas para contenido editable adicional
Usamos “áreas de bloque” para llevar el editor de bloques a áreas globales del sitio (por ejemplo, barra lateral, después de la publicación).
Si bien podría usar áreas de widgets basadas en bloques de manera similar, prefiero un CPT porque agregamos una clase de cuerpo de administrador de .block-area-{block area name} y puede ajustar el ancho del contenido para que coincida con la forma en que se representará en la interfaz, por lo que el área del bloque “Barra lateral” tiene un ancho de 336 px.
El tema incluye un tipo de publicación personalizada llamada “Áreas de bloque” que aparece en la sección Apariencia del backend de WP. Incluye un grupo de campos ACF para vincular una publicación de área de bloque a un área de bloque registrada por tema (barra lateral, publicación posterior, pie de página anterior, 404).
Para crear el área de bloque de la barra lateral:
- Vaya a Apariencia > Áreas de bloques.
- Haga clic en “Agregar nuevo” y cree un área de bloque con cualquier nombre (por ejemplo, “Barra lateral”). En la columna de la derecha, en “Asignado a”, seleccione “Barra lateral”.
- Publica la publicación y recarga la página. Verá que el área de contenido ahora coincide con el ancho de la barra lateral real en el tema (
settings.custom.layout.sidebaren tema.json).
Puede agregar/editar/eliminar las áreas de bloqueo registradas en inc/block-areas.php. Para mostrar un área de bloque en su tema, use Block_Areasshow( $block_area_name ).
SASS compilado usando Node.js
Aquí hay una guía con más información sobre la configuración de compilación de SASS.
Una vez que haya configurado el tema en su entorno local, ejecute npm install para instalar el paquete SASS. A continuación, puede ejecutar npm run sass-dev para compilar automáticamente CSS expandido a medida que se realizan cambios en los parciales de SASS.
Cuando esté listo para enviar sus cambios a un repositorio o publicar el tema, puede ejecutar npm run sass-prod que compila CSS minimizado.
Usar be_icon() para cargar archivos SVG en línea
Incluya sus archivos SVG en activos/iconos/utilidades o cree carpetas de iconos adicionales (p. ej., activos/iconos/categoría). Recomiendo usar svgo o SVGOMG para minimizarlos y limpiarlos.
Asegúrese de que los SVG no tener un atributo de ancho y alto, pero en su lugar usar viewBox, y tener el mismo ancho y alto (es decir, mesa de trabajo cuadrada). Ejemplo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">Puede visualizar estos iconos usando el be_icon() función. Por ejemplo, si desea mostrar un ícono de Facebook de 24 × 24, use be_icon( [ 'icon' => 'facebook', 'size' => 24 ] );
Además de facilitar la carga de archivos SVG en línea, esta función incluye almacenamiento en caché inteligente para minimizar el tiempo de carga de la página.
Supongamos que tiene un ícono de corazón que aparece junto a cada título de publicación en una página de archivo para guardarlo. Si tuviera que usar un SVG en línea, cargaría el marcado completo de ese SVG cada vez que aparece SVG.
En cambio, cuando llama al ícono del “corazón” con be_icon(), genera <svg><use href="#utility-heart"></use></svg> y luego carga el ícono del corazón una vez en el pie de página del sitio con esa ID.
Si tiene un SVG complicado que tiene problemas para mostrarse con este almacenamiento en caché inteligente (generalmente porque tiene sus propias ID dentro), puede incluir 'force' => true para omitir esto y cargar el marcado completo en línea.
Vea la función be_icon() para todas las configuraciones disponibles.
Se han eliminado los bloques de edición completa del sitio
Dentro del archivo editor.js estamos anulando el registro de muchos bloques principales de WP que están relacionados con la edición completa del sitio.
Logotipo de inicio de sesión
Dentro de inc/login-logo.php puedes personalizar el $logo_path, $logo_widthy $logo_height variables, y actualizará el logotipo en la página de inicio de sesión de WP por usted.
Resumen
El enfoque de tema híbrido ha mejorado radicalmente nuestro proceso de diseño y desarrollo. Nuestro nuevo servicio Cultivate Pro solo es posible gracias a theme.json, los tokens de diseño de Figma y los bloques ACF autónomos y reutilizables.
Podemos crear un tema de WordPress completamente personalizado en 8 a 12 horas en lugar de las 30 a 40 horas que solía tomar. A los clientes les encanta lo profundamente integrado que está el editor de bloques en nuestros temas. Las paletas de colores usan los colores de su marca, los tamaños de fuente y las familias usan su guía de estilo, y pueden editar todo el contenido del sitio, desde publicaciones simples hasta la página de inicio y la barra lateral, usando el editor de bloques.
Estoy emocionado de explorar la Edición completa del sitio y ver cómo madura en los próximos años, pero nuestro equipo utilizará temas híbridos de WordPress para el trabajo del cliente en el futuro previsible.
