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 llamadofunctions.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
yparts
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
.
- Navega a la carpeta del tema padre, por ejemplo:
- 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/
.
- Copia el archivo
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.
- Abre el archivo
- 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.
- Si deseas que el tema hijo herede todas las configuraciones del tema padre sin cambios, puedes dejar el
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.
- WordPress no hereda automáticamente el archivo
- 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.
- El
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ónsettings.typography.fontSizes
. - Si el tema hijo no tiene estas configuraciones, los bloques pueden revertir a los valores predeterminados.
- Los tamaños de fuente como «S», «M», «L» se definen en el
- 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.
- Lo mismo aplica para paletas de colores y otras configuraciones de estilo. Asegúrate de que estén incluidas en el
- 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.
- Al copiar el
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
yfunctions.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.
- Después de copiar o modificar el
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.
Deja una respuesta