Diseño y desarrollo web profesional con WordPress

tema-hijo-wordpress
Todos sabemos de la importancia que tienen los themes o plantillas en WordPress, no en vano, son parte importantísima de nuestros sitios web, las plantillas son las encargadas de darle a nuestro sitio web el aspecto visual, pero en ocasiones las plantillas no son de nuestro gusto al 100% y nos interesa cambiar colores en ciertas partes y para ello editamos la hoja de estilos CSS.

Antes de comenzar déjame decirte que es un tema hijo, básicamente un tema hijo es una copia del tema activo en nuestro WordPress, de esta forma el tema activo se convierte en el tema padre, y la copia que creamos se convierte en el tema hijo.

Al final de todo este proceso será el tema hijo el que este activo, así que para no liarte mucho quédate con una cosa, el tema padre es el tema original que tienes instalado en tu WordPress, y el tema hijo va a ser una copia del original.

¿Para qué sirve un tema hijo?

La función principal de un tema hijo es la de poder modificar el tema original pero sin modificarlo realmente, el tema original se mantendrá intacto en todo momento y será al tema hijo al que le apliquemos las modificaciones, esto nos ayudará no dañar el tema original y que se nos vaya al traste nuestro sitio web. El motivo principal para crear un tema hijo no es más que el de tener la posibilidad de modificar la hoja de estilos CSS de nuestro sitio web a nuestro antojo, bien sea para cambiar la tipografía, el color, el tamaño de alguna imagen etc. con un tema hijo se pueden modificar más cosas, como el código HTML o el código PHP, pero como te he dicho, principalmente se usa para modificar la hoja de estilos.

Ventajas de tener un tema hijo

Las ventajas principales de tener un tema hijo son básicamente, la de no tener que tocar el tema original de nuestro sitio web y así mantener intacto el tema original, el poder aplicar estilos CSS personalizados a nuestro gusto y por último la de no perder las modificaciones realizadas cada vez que se actualiza el tema o plantilla original.

Inconvenientes de tener un tema hijo

Como ocurre en la vida, toda acción tiene su reacción, y en WordPress no va a ser menos, aunque en un principio podemos pensar que el tema padre e hijo conviven en paz dentro de nuestro sitio web, resulta que es todo lo contrario, internamente se desarrolla una lucha entre los dos temas ya que los archivos cargados por el tema padre son silenciados por los archivos del tema hijo que trata de sobrescribirlos, otro factor es la carga de más archivos en nuestro sitio web lo que conlleva un aumento de consumo de recursos del servidor.

Un tema hijo es basicamente una copia del tema original de nuestro WordPress

Crear el tema hijo

Una vez explicado a grandes rasgos para que sirve y lo que supone utilizar un tema hijo vamos a ponernos manos a la obra y crear nuestro tema hijo, yo ya lo tengo creado, así que te voy a explicar cómo lo he hecho.

De manera manual o con la ayuda de un plugin

Hay dos maneras de crear un tema hijo, con la ayuda de un plugin o de manera manual, si lo quieres hacer con un plugin yo te recomiendo “Child Theme Configurator”, es sencillo de usar y no tienes porque mantenerlo en tu instalación de WordPress, una vez creado el tema hijo puedes eliminar el plugin, yo lo he creado de manera manual, me gusta complicarme la vida un poco y es lo que te voy a explicar a continuación.

Paso 1 -Crear la carpeta del tema hijo

tema hijo
Crear la carpeta para el tema hijo

Para crear el tema hijo lo primero que tenemos que hacer es crear una nueva carpeta en nuestro servidor web, concretamente en la ruta “wpcontents/themes”, yo utilizo la plantilla generatepress por lo que la nueva carpeta se llama child_generatepress, este es el nombre que se mostrará en el gestor de temas o plantillas de WordPress.

Para crear la carpeta lo puedes hacer bien por FTP con un programa cliente FTP tipo Fillezilla o bien puedes crear la carpeta directamente desde el cPanel de tu empresa de servicios de hosting.

Paso 2 -Crear la hoja de estilos CSS del tema hijo

/*
Theme Name: Child-GeneratePress
Theme URI: https://generatepress.com
Author: Roberto Arias
Author URI: https://zureweb.com
Description: Plantilla creada por Roberto Arias para modificaciones
Template: generatepress

*/

@import url(“../generatepress/style.css”);

Para crear el archivo style.css accede a tu editor de texto (yo utilizo notepad++), crea un archivo nuevo y cuando vayas a guardarlo ponle el nombre “style” y elige guardar como: “Cascade Style Sheets File (*.css)”

El archivo debe contener la estructura de la ventana de la izquierda y lo debemos subir a nuestra nueva carpeta que hemos creado “child_generatepress”.

Lo más importante en esta estructura es la última linea donde indicamos que hoja de estilos va a cargar nuestro tema hijo, es decir, indicamos la ruta de la hoja de estilos del tema padre, si esto lo haces mal el tema hijo no funcionará.

Paso 3 -Cargar la imagen miniatura del tema hijo

Crear tema hijo
Contenido de la carpeta del tema hijo

Como puedes ver en la imagen de la izquierda, ese es el contenido que tengo en mi carpeta “child_generatepress”, tengo el archivo “screenshot.png” que es la imagen en miniatura que se mostrará en el gestor de temas de WordPress, como no me quería poner a crear una imagen nueva simplemente he cogido la imagen del tema padre y lo he copiado a la carpeta del tema hijo, si tu quieres, puedes crearte tu propia imagen pero recuerda que tienes que renombrarla con el mismo nombre que tiene en la carpeta del tema padre.

En este articulo solo he querido centrarme en el archivo de estilos y la manera de sobrescribirlos creando un tema hijo, pero si te fijas en la imagen de arriba tengo un archivo llamado “funtions.php” y otro llamado “comments.php”, estos dos archivos sobrescriben los archivos originales del tema padre, es decir, un tema hijo sirve para sobrescribir muchas más cosas a parte de los estilos.

La gestación de un tema hijo en WordPress no te llevará mas de 5 minutos

Empezar a trabajar con nuestro tema hijo

Ya hemos terminado de crear nuestro tema hijo, ya solo nos falta activarlo, este paso no tiene complicación alguna, un tema hijo se activa de la misma manera que cualquier tema en WordPress.

Paso 1 -Activar el tema hijo

Crear tema hijo
Gestor de plantillas o temas de WordPress

Para activar el tema hijo nos vamos a nuestro backend de WordPress, hacemos clic en “Apariencia-temas” y damos a activar a nuestro tema hijo, en mi caso es “child_generatepress”, tal y como nombre la carpeta que cree para alojar los archivos del tema hijo.

Como puedes ver en la imagen, tengo el tema “generatepress”, que es el tema padre u original y justo al lado el tema “child_generatepress”, que es el tema hijo o la copia del tema original.

No se te ocurra borrar el tema padre o el tema hijo no funcionará, el tema hijodebe estar activo y el tema padre instalado pero sin activar.

Paso 2 -Modificar los estilos CSS en el tema hijo

Editar css en tema hijo
Editor incluido en WordPress

Una vez activado nuestro child teme o tema hijo ya podemos empezar a modificar los estilos CSS del tema hijo, para ello en el menú de nuestro WordPress buscaremos la opción “Apariencia-editor”, si te fijas bien este es el mismo archivo “style.css” que creamos con el notepad, ahora ya podemos empezar a añadir código CSS y cambiar el aspecto de nuestro sitio web.

Conclusiones

Tener un child theme en WordPress es bastante beneficioso, no solo te aseguras de mantener el tema original intacto, sino que además cada vez que el tema original se actualice no se verán afectadas las modificaciones de la hoja de estilos que hayas hecho en el tema hijo, porque si trabajas directamente sobre el tema original, cada vez que el tema se actualice perderás todas las modificaciones que hayas hecho sobre la hoja de estilos del tema original

No olvides comentar este post y compartirlo en las redes
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía, se el primero en darme tu valoración)
Cargando…

Deja un comentario

Información importante relativa a la protección de datos.

  • Responsable: Roberto Arias. (yo mismo)
  • Finalidad: Poder dar respuesta a la consulta que me envies.
  • Legitimación: Tu consentimiento expreso que quieres consultarme algo.
  • Destinatarios: Tus datos se alojarán en los servidores de one.com en la UE, que es mi empresa de servicios de hosting.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos, enviando un e-mail a info@www.zureweb.com .
  • Información adicional: Puedes consultar la información detallada sobre protección de datos personales en mi Política de Privacidad.

Premium WordPress Themes Download
Download WordPress Themes
Download Premium WordPress Themes Free
Download WordPress Themes
free download udemy course
download mobile firmware
Download WordPress Themes Free
online free course