¿Porqué utilizar un Tema Hijo o Child Theme en WordPress?

En algún momento es necesario realizar cambios en un tema que van mas allá de las opciones de personalización dentro del menú de apariencia del administrador de WordPress. Estos cambios implican muchas veces cambios directos en código html, php, javascript o css por lo que es necesario modificar o reescribir el contenido de uno o más archivos. Sin embargo, no es una prática recomendable modificar los archivos de forma directa, ya que en algún momento el tema puede ser actualizado por parte del proveedor para optimizarlo o corregir errores en código y los cambios que hayamos realizado serán reemplazados.

Algunos usuarios optan por no actualizar sus temas para no perder los cambios que han hecho, pero esto resulta en un riesgo demasiado alto ya que muchas de esas actualizaciones estan relacionadas con mejoras a la seguridad del tema. Esta practica puede dejar peligrosos agujeros en la protección de un sitio!

Mi tema “padre” o tema original

En mi sitio estoy utilizando el tema gratuito Shapely de Colorlib, es un tema bastante práctico para utilizarlo como base de un nuevo sitio.

Child themes in WordPress

Siempre que inicio la construcción de un nuevo sitio me aseguro de incluir un Tema Hijo, me da mayor libertad para realizar cambios en cada sección del tema original y estoy seguro que los cambios no se habrán perdido con la siguiente actualización.

Child themes in WordPress

Vamos a realizar un ejemplo de como crear un tema hijo para este tema y realizaremos un cambio simple en la altura de la sección de navegación. Este es un cambio muy pequeño en nuestro tema, pero en la realidad los cambios que necesitamos incorporar en los sitios de nuestros clientes pueden ser mucho más grandes y en áreas muy diversas.

Instalación de plugin para crear tema hijo.

En este artículo utilizaré uno de los plugins más populares utilizados para este fin, Child Theme Configurator. Vamos a proceder a instalarlo accediendo a la opción Plugins > Añadir nuevo.

Child themes in WordPress

Buscamos por medio de la palabra clave “child theme”. De los resultados que se muestran utilizaremos el plugin Child Theme Configurator de Lilaea Media. Damos un click en el botón “Instalar ahora”.

Child themes in WordPress

A continuación damos un click en “Activar” para que las funciones del plugin se muestren en el menú de administración.

Child themes in WordPress

Creación de un nueva tema hijo

Para acceder a las funciones del plugin elegimos la opción Herramientas > Temas Hijo.

Child themes in WordPress

A continuación se nos muestran las características de Child Theme Configurator. Utilizamos las opciones mostradas en la figura siguiente, crear un nuevo tema hijo y seleccionar el tema padre. A continuación damos un click en “Analizar”.

Child themes in WordPress

Los mensajes a continuación indican que no existen inconvenientes para utilizar un tema hijo para el tema padre “Shapely”.

Child themes in WordPress

A continuación definimos el nombre que deseamos que se muestre en nuestro listado de temas para el tema hijo. Dejamos la opción Hoja de Estilos Principal (style.css) seleccionada y tal como la explicación lo menciona, los estilos definidos en este archivo sobreescribiran los del tema padre.

Child themes in WordPress

En la opción 6 también dejamos la opción predeterminada. De esta manera dejamoa que el configurador del plugin realice los ajustes necesarios.

Child themes in WordPress

Las opciones 7 y 8 tampoco las modificamos. Solo vale la pena mencionar que la opción 8 si deberia seleccionarse si ya hemos hecho algun tipo de personalización en el tema padre.

Child themes in WordPress

Para finalizar podemos visualizar el mensaje de confirmación en el cual se nos indica que el tema hijo ha sido creado correctamente.

Child themes in WordPress

Verificamos en la opción de Apariencia del administrador de WordPress y efectivamente podemos visualizar un nuevo tema con el nombre Shapely child. Lo activamos para comenzar a utilizarlo en nuestro sitio.

Child themes in WordPress

¿Qué cambios ocurren en las carpetas y archivos de nuestro sitio?

Al momento de crear un tema hijo, se crea una carpeta con el nombre del tema que hemos definido. Esta carpeta se ubica dentro de wp-content/themes de nuestra instalación de WordPress.

Child themes in WordPress

La carpeta contiene unos archivos básicos, los cuales se muestran a continuación. Dependiendo de las áreas a modificar se pueden adicionar más archivos.

Child themes in WordPress

Ejemplo de modificación del tema padre

Para poder ilustrar como se realizan las modificaciones desde el tema hijo, abrimos el archivo style.css. El contenido siguiente corresponde a este archivo y la estructura y formato es un estandar que le permite a WordPress identificar información importante, algunas de ellas son:

  • El nombre del tema.
  • Tema padre que modifica.
  • Autor.
Child themes in WordPress

Vamos a adicionar la siguiente regla, la cual define la altura de la sección de navegación en 200pbx

.nav-container {

	height:200px;

}

Al acceder nuevamente al sitio podemos observar la modificación realizada. Ahora bien , como habíamos mencionado, esta es una modificación muy básica, pero permite identificar los elementos necesarios al trabajar con temas hijo.

Child themes in WordPress

Recuerda que utilizar temas hijos es una muy buena práctica al trabajar con cambios en diseño o código de un sitio, permitiendo separar el tema original de las modificaciones que realicemos.

Deja un comentario

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