Crear un tema hijo en WordPress con plugin o de forma manual
27/01/2020
Un tema hijo en WordPress es un tema que comparte las funcionalidades con un tema padre, el fin de este tipo de temas es poder modificar la apariencia sin que perdamos esos cambios cuando se sobreescriben los archivos al actualizar el tema principal. Esa es la gran ventaja que tiene trabajar con temas hijos: Un tema hijo no se actualiza, no se sobrescriben los archivos a actualizar el tema padre.
Con esta ventaja podemos:
- Personalizar la apariencia mediante las hojas de estilos CSS del tema
- Modificar archivos del tema como por ejemplo el footer.php o el header.php
- Añadir nuevas funcionalidades del tema mediante un nuevo archivo functions.php sin invalidar el archivo principal
- Para volver a poner el tema en su aspecto original solo tenemos que comentar o renombrar los archivos del tema hijo
Cómo crear un tema hijo de forma manual
Lo primero es localizar dentro del servidor nuestro tema padre. Para ello podemos utilizar un cliente FTP como FileZilla cuya descarga es gratuita. Para conectar necesitarás los datos de acceso que te haya proporcionado tu proveedor, si tienes alojada tu web con DonWordPress puedes saber dónde encontrar las claves de acceso desde aquí.
En WordPress los temas de encuentran en la ruta /wp-content/themes/ en este directorio encontrarás una carpeta con el nombre del tema que usas. Por ejemplo si usas el tema Twenty Twenty encontrarás una carpeta llamada “twentytwenty”.
Para crear un tema hijo del tema Twenty Twenty creamos una nueva carpeta en el directorio /wp-content/themes/ con el mismo nombre que el tema padre añadiendo la terminación “-child”. Siguiendo con el ejemplo anterior la carpeta se llamaría “twentytwenty-child”.
Dentro de esta carpeta crearemos los dos archivos, uno para los estilos (style.css) y otro para las funciones (functions.php). Estos son los archivos principales para hacer que el tema funcione, más tarde si queremos cambiar por ejemplo el footer de la web copiaremos del tema padre el archivo footer.php y lo añadiremos a la carpeta del tema hijo.
Para empezar a trabajar con el archivo style.css el archivo debe comenzar con las líneas siguientes:
|
1 2 3 4 5 6 7 8 |
/* Theme Name: Twenty Twenty Child Theme URI: https://wordpress.org/themes/twentytwenty/ Template: twentytwenty Author: the WordPress team Author URI: https://wordpress.org/ Text Domain: twentytwenty-child */ |
Los temas hijos tienen prioridad de carga por lo que los estilos que se añadan en esta hoja tendrá preferencia sobre los estilos definidos en el tema padre. Para definir solamente algunos estilos y que el resto se sigan cargando del tema padre podemos usar dos métodos.
El primer método es muy sencillo pero en su contra tiene que aumenta el tiempo de carga de las hojas de estilo. Para usar esta opción importamos en el archivo style.css los estilos del tema padre con la regla @import url("../carpeta-tema-padre/style.css"). Esta regla se coloca después de las líneas que hemos añadido anteriormente y en ella tenemos que poner la ruta del archivo css del tema padre.
El otro método es añadir al archivo functions.php que hemos creado en el tema hijo las siguientes líneas:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_styles' ); function theme_slug_enqueue_styles() { $parent_style = 'parent-style'; // Reemplazar "parebt" por el nombre de la carpeta del tema. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } ?> |
Con esto ya se puede empezar a editar y hacer cambios en el tema hijo sin miedo a perder los cambios cuando se actualice el tema padre.
Una vez creado el tema hijo hay que activarlo para empezar a hacer uso de él, para esto dirígete a “Apariencia > Temas” localiza el tema con el nombre que le hemos dado en las primeras líneas del archivo style.css
Cómo crear un tema hijo con un plugin
De entre los plugins que existen vamos a recomendar Child Theme Configurator porque se actualiza regularmente, a fecha de hoy tiene más de 300.000 instalaciones activas y su uso es sencillo.
Para instalar Child Theme Configurator nos dirigimos a la sección de Plugins > Añadir nuevo. Buscamos el plugin mediante el buscador, instalamos y lo activamos.
Una vez instalado y activado podemos empezar a configurar el plugin desde Herramientas > Temas hijo en el menú lateral del panel de administración.
En la primera pestaña “Padre/Hijo” encontramos varias opciones. Para crear un nuevo un nuevo tema seleccionamos la primera “CREAR un nuevo tema hijo”.
A continuación seleccionamos el tema padre del que vamos a crear el tema hijo en el desplegable. Una vez seleccionado hacemos clic en Analyze para saber si existe algún error a la hora de crear el tema hijo.
En el siguiente paso nombramos el directorio donde se van a alojar los archivos del tema hijo.
En el punto siguiente elegiremos dónde guardar el CSS con los estilos del tema hijo. Dejamos marcada la casilla Hoja de estilos principal (style.css).
En el apartado Selecciona la hoja de estilos del tema padre marcamos la primera opción. Este apartado lo que hacemos es indicarle qué hacer con la hoja de estilos del tema padre. Si no vamos a usar ningún estilo del tema padre marcaremos la opción No añadir ninguna hoja de estilos del tema padre.
En el desplegable, haz clic para editar los atributos del tema hijo podemos editar algunos atributos de la cabecera del archivo CSS. No es obligatorio editar los campos pero es una buena práctica, sobretodo el campo Nombre del tema hijo para poder localizarlo dentro del apartado “Apariencia > Temas”.
El siguiente punto déjalo sin rellenar y haz clic en “Crear nuevo tema hijo”. Una vez se terminado el proceso aparecerá un aviso de que se ha generado correctamente.
Una vez creado el tema hijo en WordPress tendrás que activarlo, para esto dirígete a “Apariencia > Temas” localiza el tema con el nombre que le hemos dado cuando hemos editado los atributos del tema. En el listado cada tema tiene una miniatura, podemos asignar una miniatura a nuestro nuevo tema hijo desde “Herramientas > Temas hijo” y seleccionando la pestaña “Archivos”. En el apartado “Subir nueva captura de pantalla” hacemos clic en “Subir” y en el explorador de archivos localizamos la imagen que queremos como miniatura. La imagen debe tener una relación de 4:3 (por ejemplo, 880px x 660px) JPG, PNG o GIF.
En este mismo apartado podemos elegir archivos del tema padre que queramos copiar al tema hijo. Para hacerlo solo tenemos que seleccionar del listado las páginas que queramos copiar y hacer clic en el botón “Copiar”.
Conclusión
Es importante usar un tema hijo, para evitar perder los cambios que se hayan hecho si se actualiza el tema. Son muchas las ventajas que nos pueden aportar a la hora de personalizar un tema y en el caso de querer volver a usar el aspecto del padre solo tenemos que comentar o renombrar los archivos del tema hijo.
Si no quieres tener que tocar archivo el método del plugin es muy sencillo y es una gran ventaja para usuarios noveles poder crear temas hijos con este método.
¿Te ha parecido útil este artículo? Déjanos un comentario más abajo con tus dudas o compartiendo tu experiencia con el uso de temas hijo.
¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
(1 votos, promedio: 5,00 de 5)
Cargando...
(1 votos, promedio: 5,00 de 5)Cargando...
Hola
Tengo un par de dudas esto del tema hijo me está volviendo loco.
Veamos, lo que yo quiero saber es lo siguiente :
Yo compro un tema Pro, que ya trae de por sí un zip tambien con el child theme de dicho tema. Ok
Yo instalo el theme principal , o sea el que será » el padre «. Bien.
– A continuación instalo los plugins que se necesita ( elementor, etc etc , x etc )
Una vez tengo ya todo , y aún no he empezado a crear contenidos, instalo el Tema Hijo. Y lo activo, por lo tanto ya me olvido del tema
oficial, llámese Padre. Ok
Y como lo activo – el hijo – , siempre estoy y voy a estar trabajando con el hijo . Del padre nos olvidamos, no ?
Porque esto es lo que yo quiero saber.
Ahora mi pregunta :
Cuando toca actualizar ( porque toca actualizar y además cada dos por tres ) el tema Oficial , o sea el padre….
¿ Yo no debo hacer absolutamente nada con el tema hijo ?
Me explico: Si al principio el tema padre era la versión 0.1 y por tanto el tema hijo tambien es version del padre 0.1, y ahora actualizo el padre a la 0.2…
¿ que pasa con el hijo ? se queda en 0.1 ?. Tengo que hacer yo algo ? ¿ se actualiza el hijo a la vez que el padre por arte de magia o de modo invisible ?
Me toca copiar códigos del padre y pegarlos en el hijo ? y esto en cada actualización ? o no debo preocuparme de ello ? Lo hace solo ?
Y sobre todo : Si dicen que el tema Padre no sobreescribe archivos en el hijo…entonces al actualizarse el Padre, el hijo se queda obsoleto y por tanto estaremos trabajando con una versión antigua del tema ??? Y si además no debemos actualizar el hijo y tampoco recoge las actualizaciones y novedades del padre … al final estaremos trabajando con una versión super antigua ???
No entiendo
Esto me trae de cabeza y por eso no me atrevo a incluir el tema hijo, pero a la vez me da pánico llegar a perder todo algún dia.
Segunda pregunta :
Supongamos que por catástrofe sea de la naturaleza que sea, se me rompe el tema hijo – que es con el que trabajamos, no ?- ok tengo el padre. ¿ Y ?
El tema padre se supone que está vacío de contenidos ya que todo estaba en el hijo.
Entonces ¿ para qué me sirve realmente el tema hijo ? si se destruye el hijo y el padre está blanquito y vacío de contenido me da igual tener hijo que no .
Es decir, capto que el hjj no hace función de copia de seguridad, sino que sirve para modificar Css y otras cosas como php sin que afecte al padre.
Pero precisamente por eso sigo sin entender la utilidad real del hijo , pues si el padre se mantiene siempre intacto, en caso de destruirse mi web, se destruye el hijo y no el padre, y de nada me sirve tener el padre si está en blanco.
O sea, tendría que construir desde cero otra vez tooooda mi web sobre el padre o sobre un nuevo hijo ? es que no entiendo nada .
Por otro lado, como uso un theme Premium siempre tengo a mi disposición otra copia nueva y original – y por tanto también vacía de contenidos – del tema padre.
En resumen , ¿ qué se debe hacer exactamente una vez instalado el padre y el hijo ? ¿cómo interactúan los dos ? ¿ debemos de hacer algo en plan mantenimiento para que ambos – y no solo el hijo – sepa el contenido que hay ?
Busco estas respuestas en todas partes pero no las encuentro. Solo encuentro los pasos a dar para crear temas hijos, perno no se como funcionan las cosas o qué hay que hacer después de ya tener el tema hijo.
¿ Me pueden ayudar con esto ?
Un saludo y excelente página y post !
Hola Frank
Respondiendo a tu primera pregunta: Cuando actualices el tema no tienes que hacer nada con el tema hijo. Ni copiar y pegar código, ni nada de nada. No estarás trabajando con diferentes versiones ni nada de eso.
Respondiendo a la segunda pregunta: El contenido queda en la base de datos, por lo tanto si ocurre una desgracia y pierdes el tema hijo solo tendrás que volver a crearlo. Eso si, lo que sea código si lo habrás perdido. Para evitar esto te recomendamos tener un buen hosting WordPress, como el nuestro, que te asegure Backups, Monitorización 24×7 e Infraestructura AntiPirateo