Cómo crear un tema hijo de bloque en WordPress

Imagine este escenario: acaba de encontrar un tema casi perfecto para usar en su sitio web. Está bien diseñado, incluye los diseños que desea, pero desea cambiar la paleta de colores y evitar que los clientes modifiquen algunas áreas. Desafortunadamente, el tema que está utilizando no le permite eliminar los colores predeterminados o los bloques de bloqueo.

Si bien puede editar los archivos del tema directamente, todas sus modificaciones se perderán cuando ejecute las actualizaciones del tema. Puede agregar un poco de CSS personalizado usando un complemento de fragmento de código, pero eso no alterará las opciones de estilo disponibles para los usuarios registrados.

¿Entonces que puedes hacer? ¿Cómo se cambian las opciones disponibles de Estilo global? Para eso, necesitas un tema hijo de bloque.

¿Qué es un tema hijo de WordPress?

Según la documentación del desarrollador de WordPress:

Un tema secundario hereda la apariencia del tema principal y todas sus funciones, pero se puede utilizar para realizar modificaciones en cualquier parte del tema. De esta forma, las personalizaciones se mantienen separadas de los archivos del tema principal. El uso de un tema secundario le permite actualizar el tema principal sin afectar las personalizaciones que ha realizado en su sitio.

Por lo tanto, para utilizar un tema secundario en WordPress, también deberá tener instalado el tema principal. Su tema hijo hereda todo del padre, con algunas variaciones añadidas.

Cómo crear un tema hijo

¿Preferiría una opción de código para personalizar el estilo de su sitio? Al igual que anular otros temas de WordPress, usar un tema secundario es la mejor manera de anular el código. Cuando su tema se actualice, el código de su tema secundario permanecerá.

En este artículo, cubrimos los componentes clave de lo que hace un buen tema infantil de WordPress y brindamos recursos de lectura en profundidad.

1. Cuándo usar un tema hijo de bloque

Los temas secundarios son una gran solución a menudo. Sin embargo, si está buscando agregar solo un poco de código CSS, un tema secundario completo puede ser excesivo. Considere un complemento como Code Snippets para agregar solo un poco de personalización.

Personalización de sitios de clientes

Cuando está creando sitios para clientes, es posible que desee ofrecer algunas personalizaciones adicionales.

Si desea controlar la capacidad de los usuarios para insertar nuevos bloques, mover bloques existentes o eliminar bloques, es posible que desee implementar el bloqueo de bloques. Puede aprender a bloquear bloques y más en este tutorial introductorio.

Creación de variaciones de tema

Además de definir qué regiones del diseño del tema pueden modificar los clientes, es posible que también desee modificar las opciones de su paleta de colores, omitiendo lo que viene de forma predeterminada con el tema o WordPress y agregando opciones únicas. También puede definir gradientes y opciones de duotono que también deberían estar disponibles en su tema.

2. Elige un buen tema de WordPress

No todos los temas se crean de la misma manera. Además de lo que ve en el diseño del tema, la selección de un tema principal implica factores adicionales como la frecuencia de las actualizaciones, la calidad del soporte, la documentación y la reputación del desarrollador del tema. Obtenga más información en Cómo usar temas de WordPress para crear un sitio web.

3. Crea un entorno de prueba

A estas alturas, ha elegido el tema principal, ha reunido los activos de la marca y ha decidido qué configuraciones le gustaría anular. A continuación, deberá configurar un entorno de prueba.

Si está utilizando un proveedor de hospedaje de WordPress administrado como el hospedaje de WordPress administrado de GoDaddy, puede usar su sitio de prueba con un solo clic como entorno de desarrollo. Si está utilizando algo como cPanel o VPS para alojamiento, puede configurar una instalación de WordPress separada y clonar o copiar su sitio existente en la nueva instalación.

Si no está aplicando el tema secundario a un sitio existente, o si prefiere construir desde cero, puede crear un entorno de desarrollo local de WordPress en su computadora usando una herramienta como MAMP o DesktopServer de ServerPress.

4. Crea tu directorio de temas

Primero deberá instalar el tema principal. Luego, utilizando un cliente FTP, conéctese a su entorno de desarrollo y navegue hasta donde se encuentran sus archivos de WordPress.

Estás buscando la siguiente carpeta:

 /wp-content/themes/

Ahí es donde puede encontrar todos sus temas de WordPress instalados. Cada tema tiene su propia carpeta o directorio que contiene todos los archivos del tema. Vas a agregar un nuevo directorio a la lista, que contendrá el tema de tu hijo. Terminarás con algo como:

 /wp-content/themes/tu-hijo-tema/

5. Crea tus archivos de temas

Para nuestro ejemplo, supondremos que estamos usando el tema Twenty Twenty Two. Deberá tener ese tema instalado para que el tema secundario haga referencia a él.

Dentro de su nueva carpeta de directorio de temas secundarios, creará dos archivos nuevos:

 estilo.css
tema.json

Ambos archivos tienen un propósito específico. El archivo style.css se utiliza para proporcionar a WordPress información sobre el tema, como el nombre, el autor, las etiquetas y el ID del tema principal.

El archivo theme.json se usa para definir las muchas configuraciones en Estilos globales y más. Obtenga más información sobre theme.json en el manual para desarrolladores.

En los temas clásicos anteriores, el archivo functions.php era necesario en los temas secundarios. Bloquear temas secundarios no requiere estos pasos.

Estilo.css

¿Qué pertenece a su archivo style.css ? La documentación del desarrollador dice:

Su hoja de estilo debe contener el comentario de encabezado requerido a continuación en la parte superior del archivo. Esto le dice a WordPress información básica sobre el tema, incluido el hecho de que es un tema secundario con un padre en particular.

Deberá incluir la plantilla en el archivo style.css que contiene la información de su encabezado. El Nombre de la plantilla: corresponde al nombre de la carpeta (directorio) del tema principal sobre el que está creando. El dominio de texto : el nombre es exclusivo de su tema secundario de WordPress.

A continuación, se muestra un ejemplo de un tema secundario que utiliza Twenty Twenty Two:

 /*
Nombre del tema: Veinte veintidós niños
URI del tema: https://example.com/
Autor: Tu nombre
Autor URI: https://example.com/
Descripción: Veinte veintidós tema infantil
Requiere al menos: 5.8
Probado hasta: 5.9
Requiere PHP: 5.6
Versión: 0.1
Licencia: GNU General Public License v2 o posterior
URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html
Dominio de texto: veinte veintidós niños
Plantilla: veinteveintidós
Etiquetas: colores personalizados, menú personalizado, logotipo personalizado, estilo de editor, imágenes destacadas, edición de sitio completo, patrones de bloque

Veinte veinte y dos niños Tema de WordPress, (C) 2021 WordPress.org Español
Twenty Twenty-Two Child se distribuye bajo los términos de GNU GPL.
*/

Tema.json

Consulte la documentación del desarrollador para profundizar en theme.json. Echemos un vistazo al archivo Twenty Twenty Two theme.json:

 {
 "versión 2,
 "ajustes": {},
 "estilos": {},
 "plantillas personalizadas": {},
 "piezas de plantilla": {}
}

Dentro de cada uno de estos hay más estilos disponibles para usted. Por ejemplo, en el área del estilo, Twenty Twenty Two usa:

 {
 "ajustes": {
 "herramientas de apariencia": cierto,
 "color": {
 "duotono": [
 {
 "colores": [
 "#000000",
 "#ffffff"
 ],
 "slug": "primer plano y fondo",
 "name": "Primer plano y fondo"
}

¿Necesita ayuda para crear un archivo theme.json? Consulte themegen.app para obtener una guía que crea muchas de las opciones para su archivo theme.json.

6. Personalización de su tema secundario de bloque

Si bien puede crear su archivo theme.json fácilmente y agregarlo a su tema, quedan algunas otras opciones por hacer. Los temas secundarios e incluso los temas de bloque son un área nueva para WordPress. El Editor del sitio claramente tiene una etiqueta beta en el momento de esta publicación. Querrá volver a consultar para ver qué funciona y qué no funciona todavía en los temas secundarios, como las partes de la plantilla.

Además, es posible que encuentre configuraciones que Global Styles y theme.json aún no admiten. Si está agregando CSS adicional, como un borde de bloque de grupo con una sombra de cuadro, es posible que desee agregarlo a su archivo style.css .

 .has-primary-border-color {
 sombra de caja: .1rem .1rem .05rem #647BAF ;
}

7. Pon a prueba tu tema hijo

Una vez que sienta que su sitio se ve bien en su entorno de desarrollo actual, es hora de probarlo antes de subirlo a un sitio en vivo.

• Pruebe en varios tamaños de navegador, como ventanas móviles
• Pruebe en diferentes navegadores o use una herramienta como BrowserStack
• Revisar los estándares de accesibilidad. Comience con WebAim

8. Prepárese para cargar su tema secundario de bloque

Si ha estado desarrollando en un sitio provisional, sus archivos están exactamente donde deben estar. Puede visitar sus opciones de alojamiento para impulsar el sitio de prueba para vivir. Si ha estado creando archivos en un entorno de desarrollador local, es hora de comprimir los archivos style.css y theme.json como un solo archivo zip y cargarlos en su sitio.

Recapitulación para crear su tema secundario de bloque

1. Decide si necesitas un tema secundario de bloque
2. Elija un tema principal
3. Configure su entorno de prueba
4. Crea tu directorio de temas
5. Crea tus archivos de temas
6. Personaliza tu tema secundario de bloque
7. Pon a prueba tu tema hijo
8. Subirlos al sitio en vivo

Al igual que los temas clásicos en WordPress, los temas de bloque aún necesitan un lugar para almacenar las personalizaciones que no se sobrescribirán cuando el tema principal reciba una actualización. La creación de un tema secundario de bloqueo le permite agregar, bloquear y omitir opciones disponibles para otros usuarios en el sitio.