Cómo migrar plantillas en WordPress, entre temas y sin perder estilos

En este post vamos a ver cómo migrar plantillas en WordPress. Se trata de realizar un cambio de tema, conservando las plantillas y partes de plantillas que hayas creado o modificado.

Ya hemos visto, aquí en Blogpocket, cómo probar el nuevo tema Twenty-Twenty Five. Pero ahora que ya está disponible una beta de WordPress 6.7 con TT5 precargado, es el momento de estar preparado para un posible cambio de tema. Imagínate que instalas WordPress 6.7 (tras probarlo previamente en un entorno de test) y quieres cambiar de TT4 (u otro tema, vamos a llamarlo "original") a TT5 (u otro tema).

Sin embargo, quieres conservar todas las plantillas y partes de plantillas que habías creado o modificado en el tema original.

Vamos a ver, a continuación, lo que tienes que hacer para conservar el diseño lo máximo posible cuando cambies al nuevo tema.

Pasos a seguir

El "truco" consiste en crear un tema hijo, que es una excelente manera de personalizar tu sitio sin modificar directamente el tema padre. Esto te permite actualizar el tema original sin perder tus cambios. A continuación, te guío paso a paso en el proceso:

1. Accede a los archivos de tu sitio web

Usa un cliente FTP: Programas como FileZilla te permiten conectarte al servidor de tu sitio.
O utiliza el Administrador de Archivos: Si tu proveedor de hosting ofrece cPanel o similar, puedes acceder directamente desde allí.
Navega hasta la carpeta: Ve a wp-content/themes/.

2. Crea una nueva carpeta para el tema hijo

Crea una carpeta nueva: Dentro de themes, crea una carpeta para tu tema hijo. Nómbrala de forma lógica, por ejemplo, twentytwentyfive-child si tu tema padre es Twenty Twenty-Five.

3. Crea el archivo `style.css` del tema hijo

Crea un nuevo archivo: Dentro de la carpeta del tema hijo, crea un archivo llamado style.css.
Agrega el encabezado del tema: Abre style.css y añade la siguiente información al inicio:

/*
Theme Name:     Nombre del Tema Hijo
Theme URI:      (Opcional) URL del tema hijo
Description:    (Opcional) Descripción del tema hijo
Author:         Tu nombre o el de tu empresa
Author URI:     (Opcional) URL del autor
Template:       Nombre de la carpeta del tema padre
Version:        1.0.0
Text Domain:    (Opcional) Dominio de texto para traducciones
*/

IMPORTANTE: El campo Template debe coincidir exactamente con el nombre de la carpeta del tema padre.

4. Encola los estilos del tema padre

Para asegurarte de que, al migrar plantillas en WordPress, el tema hijo hereda los estilos del padre, debes encolar el archivo CSS del tema padre.

Método recomendado: usar `functions.php`

Crea un archivo functions.php: En la carpeta del tema hijo, crea un archivo llamado functions.php.
Agrega el siguiente código:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Este código encola los estilos del tema padre y luego los del tema hijo, asegurando que tus estilos personalizados se apliquen correctamente.

5. Exporta tus plantillas del tema original:

Accede al Editor del Sitio: En el panel de WordPress, ve a "Apariencia" > "Editor" (puede variar según la versión y el idioma).
Exporta tu tema: Haz clic en los tres puntos (menú de opciones) en la esquina superior derecha del editor. Selecciona "Exportar". Esto descargará un archivo ZIP que contiene tu tema actual con todas las plantillas y partes de plantilla personalizadas.

6. Extrae las plantillas exportadas:

Descomprime el archivo ZIP: Localiza el archivo descargado y extráelo en tu ordenador.
Localiza las carpetas de plantillas: Dentro de la carpeta extraída, encontrarás las carpetas "templates" y "parts" que contienen tus plantillas y partes de plantilla personalizadas.

7. Copia las plantillas y partes de plantilla personalizadas

Si tienes plantillas personalizadas: Copia las carpetas templates y parts desde el tema exportado a la carpeta del tema hijo.
Organiza las plantillas: Asegúrate de mantener la misma estructura de carpetas.

8. Copia el archivo `theme.json` del tema padre al tema hijo

Localiza el archivo theme.json del tema padre:
- Navega a la carpeta del tema padre, por ejemplo: wp-content/themes/twentytwentyfive/.
- Busca el archivo theme.json.
Copia el archivo al tema hijo:
- Copia el archivo theme.json y pégalo en la carpeta del tema hijo, por ejemplo: wp-content/themes/twentytwentyfive-child/.

9. Asegúrate de que el archivo `theme.json` del tema hijo esté configurado correctamente

Verifica el contenido:
- Abre el archivo theme.json en el tema hijo.
- Asegúrate de que contiene todas las configuraciones necesarias, incluyendo los tamaños de fuente personalizados.
Herencia de configuraciones:
- Si deseas que el tema hijo herede todas las configuraciones del tema padre sin cambios, puedes dejar el theme.json tal cual.
- Si necesitas modificar o agregar configuraciones específicas, puedes hacerlo en el theme.json del tema hijo. Las configuraciones en el tema hijo anularán las del tema padre donde corresponda.

10. Verifica que las configuraciones de los bloques se apliquen correctamente

Limpia la caché:
- A veces es necesario limpiar la caché del navegador o de plugins de caché para ver los cambios.
- Asegúrate de recargar la página completamente (puedes usar Ctrl + F5 en la mayoría de los navegadores).
Revisa las plantillas:
- Accede al Editor del Sitio y verifica que los bloques muestran los tamaños de letra y otras configuraciones tal como estaban en el tema original.

11. Entiende cómo funciona `theme.json` en temas hijo

No hay herencia automática:
- WordPress no hereda automáticamente el archivo theme.json del tema padre en el tema hijo.
- Es por eso que las configuraciones globales como tamaños de fuente, colores y espacios no se aplican en el tema hijo a menos que se incluyan explícitamente.
Extensión y anulación de configuraciones:
- El theme.json del tema hijo puede extender o anular las configuraciones del tema padre.
- Si solo deseas agregar o modificar ciertas configuraciones, puedes incluir solo esas en el theme.json del tema hijo.

12. Ejemplo de `theme.json` mínimo para heredar configuraciones

Si prefieres no copiar todo el theme.json del tema padre, puedes crear un theme.json mínimo en el tema hijo que permita la herencia de las configuraciones:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2
}

Este archivo básico permitirá que el tema hijo herede todas las configuraciones del tema padre. Si agregas secciones settings o styles en este archivo, solo esas configuraciones específicas anularán las del tema padre.

13. Consideraciones adicionales

Tamaños de fuente personalizados:
- Los tamaños de fuente como "S", "M", "L" se definen en el theme.json bajo la sección settings.typography.fontSizes.
- Si el tema hijo no tiene estas configuraciones, los bloques pueden revertir a los valores predeterminados.
Paletas de colores y otros estilos:
- Lo mismo aplica para paletas de colores y otras configuraciones de estilo. Asegúrate de que estén incluidas en el theme.json del tema hijo si las necesitas.
Actualizaciones futuras:
- Al copiar el theme.json, ten en cuenta que futuras actualizaciones al tema padre no se reflejarán automáticamente en el tema hijo.
- Considera mantener el theme.json del tema hijo lo más mínimo posible para facilitar la herencia y actualización.

14. Activa el tema hijo

Ve al panel de WordPress: Navega a "Apariencia" > "Temas".
Activa el tema hijo: Deberías ver el nuevo tema hijo en la lista. Haz clic en "Activar".

15. Verifica y ajusta tu sitio

Revisa el sitio: Navega por tu sitio para asegurarte de que todo funciona correctamente.
Ajusta si es necesario: Si notas algún problema, puede ser necesario revisar tus archivos style.css y functions.php para corregir rutas o dependencias. También puede ser necesario ajustar alguna configuración de estilos a nivel de bloques.

16. Respaldo y pruebas

Haz una copia de seguridad:
- Antes de realizar cambios, asegúrate de tener una copia de seguridad de tu sitio y de los archivos del tema.
Prueba los cambios:
- Después de copiar o modificar el theme.json, prueba tu sitio exhaustivamente para asegurarte de que todo funciona como esperas.

Consejos adicionales

No copies todo el tema padre: Solo copia los archivos que necesites modificar. El tema hijo heredará automáticamente todo lo demás.
Actualiza el tema padre con confianza: Al usar un tema hijo, puedes actualizar el tema padre sin temor a perder tus personalizaciones.
Usa get_stylesheet_directory_uri(): Cuando necesites referenciar archivos en el tema hijo, utiliza esta función para asegurarte de que estás apuntando al directorio correcto.

Recursos útiles

Documentación oficial de WordPress: Temas Hijos (Child Themes)
Codex de WordPress en Español: Desarrollo de temas

Con esta guía, hemos aprendido cómo crear un tema hijo en WordPress y migrar tus plantillas y estilos. Con ello, serás capaz de migrar plantillas en WordPress sin perder personalizaciones ni configuraciones de bloques

Te leo en los comentarios.