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

Share to social media
Cómo migrar plantillas en WordPress, entre temas y sin perder estilos - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.
Imagen creada con Ideogram

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

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.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de acambronero

Copia y pega esta URL (https://www.blogpocket.com/2024/10/04/migrar-plantillas-en-wordpress/) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido