Crear y configurar un tema hijo para cualquier tema de WordPress

por | 3 Comentarios

Puede que con las últimas mejoras de WordPress, permitiendo añadir CSS a la base de datos para realizar cambios visuales en tu tema, o utilizando plugins para modificar algún contenido, no necesites crear y configurar un tema hijo en tu sitio. Pero hay situaciones en los que no quedará más remedio que tener uno.

crear y configurar un tema hijo de WordPress

La importancia de crear un tema hijo en WordPress

Nunca llueve a gusto de todos, y esa plantilla o tema que elegimos o compramos en su día, resulta que no se adapta en su totalidad a lo que queríamos.

Podemos contratar, pedir o realizar nosotros mismos los cambios del tema modificando los archivos originales, dejando todo, como se suele decir, «niquelado».

Pero pasado un tiempo, y debido a los cambios en seguridad, arreglos de fallos o cambio en la versión de WordPress, los temas tienen que actualizarse, y si no realizamos la actualización pondremos en peligro nuestra web.

Las actualizaciones son mejoras y adaptaciones a los últimos cambios, y hay que realizarlas siempre, sí o sí.

El «codex» de WordPress aconseja crear y configurar un tema hijo desde el principio si vamos a realizar algún cambio importante, por pequeño que sea.

El tema hijo o child theme de WordPress no sustituye al tema padre, sino que adquiere su funcionalidad, permitiendo realizar cambios de forma segura y fácil de aspectos y funciones puntuales, haciéndolos prevalecer sobre el tema padre, y manteniendo intacto el resto de aspectos del tema principal.

Para ofrecer una imagen gráfica a modo de ejemplo, imagina un dibujo sobre el que pones un papel transparente para colorearlo. Todo el mundo verá el dibujo coloreado, pero el original se mantendrá intacto dejando ver las partes que no se han coloreado.

Plugins de terceros para realizar cambios

Hoy día existen plugins para casi cualquier cosa que necesites y toda mejora que realicemos de cara al usuario final es buena, pero tenemos que asumir una serie de riesgos y condiciones.

Los plugins son complementos adicionales al tema, por consiguiente, añaden código que no conocemos y que pueden perjudicarnos en muchos factores, como la velocidad de carga o la compatibilidad entre varios complementos creados por otros desarrolladores.

Existen plugins que añaden código y plugins que modifican código, con estos últimos son con los que hay que tener más precaución a la hora de utilizarlos.

La famosa pantalla en blanco suele ser por el fallo de algún plugin o tema desactualizado.

Al instalar un plugin tenemos que fijarnos en la popularidad que tiene, las veces que se ha instalado, los comentarios y, sobre todo, si tiene soporte.

Instalaciones y popularidad de un plugin de WordPress
Instalaciones y popularidad de un plugin de WordPress

Si un plugin lleva más de 6 meses sin ser actualizado, aunque funcione al momento de activarlo, a largo plazo nos acabará dando dolores de cabeza si no dispone de un soporte que lo adapte a los cambios de WordPress.

Con un tema hijo creamos una zona segura que no será afectada por las actualizaciones futuras del tema y con el que nos aseguramos que los cambios que hagamos no desaparecerán.

El tema hijo actúa sobre una copia de los archivos del tema principal, por lo que no alteramos el código inicial y siempre podremos revertir los cambios si deseamos dejar de usar un tema hijo.

De esta forma evitamos estar pendientes de los plugins que hayamos podido utilizar para cambiar aspectos de la web, que si no tienen soporte es muy posible que dejen de funcionar y sean más un problema que una solución.

Cómo crear y configurar un tema hijo o child theme

El tema hijo puede estar compuesto por diferentes archivos, y dependiendo de lo que necesitemos modificar podrá tener más o menos archivos.

Pero para empezar, antes de realizar ningún cambio, vamos a crear la base del tema hijo, y esto lo podemos hacer de dos formas, automatizado con un plugin o de forma manual con un editor de texto o código.

Crear tema hijo con un editor de texto

Primero vamos a ver cómo está compuesto un tema hijo básico válido para cualquier tema de WordPress.

Los archivos fundamentales son los denominados style.css, cuya cabecera indica a la web que estamos utilizando un tema hijo, y functios.php, que se encargará de añadir o modificar funciones importantes si lo necesitamos.

Si queremos añadir una imagen que identifique al tema hijo en la administración de WordPress, podemos añadir un archivo en formato PNG que renombraremos como screenshot.png, con un tamaño recomendado de 1200×900 px.

Todos estos archivos los guardaremos en una misma carpeta para poder disfrutar de un child theme que complemente al tema principal.

El nombre de la carpeta del tema hijo (Ej: Tutema-hijo), puede ser cualquiera nombre, pero sin signos de puntuación ni caracteres especiales. Si son varias palabras, deben estar separadas por guiones.

Configuración del archivo style.css

Aunque se puede hacer con cualquier editor de texto, estos podrían añadir caracteres o cambios de formato a la hora de guardarlos, por lo que recomiendo utilizar un editor de código, que funcionan igual que un editor de textos pero asegurándonos que el archio se guardará correctamente.

Yo uso Brackets, un editor de código muy sencillo y gratuito disponible para Windows y Mac.

Abrimos un documento nuevo con cualquier editor de texto y añadimos la cabecera del archivo style.css, (según está explicado en la web de WordPress), que son unas líneas comentadas con los símbolos «/* – */» al principio y al final.

Los datos a continuación son los más utilizados, pero si no vamos a comercializar el tema hijo, y es sólo para uso personal, no es necesario rellenar todos:

De todos los datos, los únicos que hay que respetar y rellenar correctamente son Theme Name y Template. El resto pueden quedarse en blanco si no vamos a comercializarlo.

Vamos a poner de ejemplo la creación de un tema hijo basado en el tema Divi, quedaría así:

Guardamos el archivo con el nombre style y le cambiamos la extensión por .css

Antiguamente se añadía una línea de código con la función @import para activar los estilos del tema padre, pero desde hace ya algún tiempo esta práctica está en desuso y la activación de los estilos se realiza desde el archivo functions.php, mucho más ágil y recomendado para la carga de la web.

Configuración del archivo functions.php

Abrimos un nuevo documento con el editor de texto y añadimos el siguiente contenido:

Guardamos el nuevo archivo renombrándolo como functions y con la extensión .php

La acción que hemos insertado y que no debemos borrar, activa el archivo style.css del tema padre y lo combina con el del tema hijo que hayamos añadido a ese archivo.

Configurar la imagen del tema hijo

Este archivo no es necesario, pero conseguiremos mostrar una imagen propia en el apartado de Temas de WordPress, pudiendo localizar el tema hijo de una simple mirada.

Podemos utilizar cualquier editor de imágenes, el que venga con vuestro ordenador o alguno gratuito y online como Pixlreditor.

El tamaño aconsejado por WordPress es de 1200×900 px.

La única condición es guardar el archivo con el nombre screenshot y la extensión .png, el diseño o contenido de la imagen es de tu elección.

Subir un tema hijo al servidor

Lo más habitual sería acceder a los archivos del servidor a través del «Administrador de archivos» y colocar la carpeta del tema hijo en la dirección «wp-content/themes/».

Una forma totalmente legítima y válida, pero que depende de acceder al servidor y al cPanel para colocar los archivos en su sitio.

administrador-de-archivos
Administrador de archivos del servidor

También podemos utilizar un cliente FTP, como pude ser Filezilla, para colocar el tema hijo en su sitio correspondiente

Tan sólo tendríamos que configurarlo para que conectara con nuestro servidor, lo que requiere, sino lo usamos habitualmente, conocer los datos de conexión con el servidor.

Cliente FTP Filezilla
Cliente FTP Filezilla

Una vez con los archivos en su sitio, accedemos a la administración de WordPress y lo activamos.

Más fácil todavía

Para los que no están familiarizados con la gestión de un servidor, o no tiene acceso, hay un proceso muy sencillo con el que no tendremos que entrar en el hosting.

Podemos comprimir la carpeta en un archivo .zip e instalarlo como si fuera un tema nuevo. Vamos a Temas>Añadir Nuevo>Subir tema y realizamos el proceso de instalación habitual desde la administración de WordPress.

subir tema a wordpress
Subir tema hijo desde la administración de WordPress

Una vez instalado el tema hijo, lo activamos. El tema padre se desactivará, pero tiene que estar instalado para que funcione el tema hijo. NO LO BORRÉIS.

Modificar archivos de la plantilla desde el tema hijo

Para poder modificar el código de los archivos del tema padre, sin que se vea afectado el original, tenemos que realizar una copia de dicho archivo en la carpeta del tema hijo.

Por ejemplo, si queremos modificar los créditos de WordPress que aparecen al pie de la web, realizaremos una copia del archivo footer.php y la pegaremos o moveremos a la carpeta del tema hijo.

Al modificar el archivo que hemos colocado en la carpeta del tema hijo, se aplicarán los cambios en la web, manteniendo el archivo original intacto y con la opción de no perder los cambios con las futuras actualizaciones.

Crear un tema hijo con plugins

En este apartado podemos utilizar un plugin de los que llamo «de usar y tirar». Estos plugins dejan de ser funcionales una vez que hemos realizado el trabajo que necesitábamos y deben ser eliminados de nuestra página web de WordPress .

Con «Child Theme Configurator«, de forma automática, podemos crear y configurar un tema hijo en un abrir y cerrar de ojos.

Child Theme Configurator
Cabecera del plugin «Child Theme Configurator»

Esta opción es muy válida para la mayoría de la gente que no quiera o desee editar sus propios archivos, pero hay que tener presente que la utilización de cualquier plugin, aunque los eliminemos después de utilizarlos, van dejando cierta basura residual en la base de datos.

Estos residuos no son importantes ni afectarán significativamente al rendimiento del sitio, a no ser que abusemos de esta práctica habitualmente.

Instalación del plugin

La instalación de «Child Theme Configurator» se realiza igual que cualquier otro plugin.

Al activar el plugin aparecerá un acceso a las opciones dentro de la pestaña «Herramientas» llamado «Temas Hijo».

Crear el tema hijo

Al iniciar el complemento tendremos las tres primeras opciones que darán paso a las siguientes para configurar el Child Theme personalizado.

Pasos iniciales de configuración del tema hijo
Pasos iniciales de configuración del tema hijo
  1. Selecciona una opción: Marcamos «CREAR un nuevo tema hijo», las otras opciones que puedan aparecer son para trabajar con un tema hijo ya creado.
  2. Selecciona un tema padre: Si disponemos de varios temas instalados, elegimos sobre el que queremos crear el tema hijo.
  3. Analizar tema padre: Este paso nos indicará si hay algún problema para crear el tema hijo. Picamos en «Analizar».

A continuación aparecerán el resto de pestañas, que sólo prestaremos atención en caso de querer comercializar el tema hijo, ya que son datos informativos y de autoría. Lo dejamos todo como está por defecto.

Pasos adicionales en la creación del tema hijo
Pasos adicionales en la creación del tema hijo

En el caso de no haber seguido las recomendaciones de WordPress y no haber creado el tema hijo antes de empezar a diseñar nuestro sitio, podemos marcar la opción 8 para que se repliquen los cambios que tengamos hasta el momento en el tema padre.

Para terminar pulsamos en la opción 9 «Create New Child Theme» y ya podemos ir al apartado de temas de WordPress para poder activarlo.

Añadir archivos para modificar

Antes de cerrar el complemento podemos utilizarlo para duplicar los archivos que queremos modificar y darles otro aire diferente.

En la parte superior de las opciones del plugin hay unas pestañas para realizar acciones más avanzadas, una de ellas contiene un desglose de los archivos del tema padre que podemos duplicar y trasladar al tema hijo.

Duplicar archivos del tema padre
Duplicar archivos del tema padre

Una vez que ya tenemos los archivos de nuestro interés en el tema hijo sólo hay que editarlos para realizar los cambios.

Dentro de esta pestaña podemos agregar una miniatura para poder identificar el tema hijo mejor dentro del apartado «Temas» para activar.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

3 Comentarios

  1. José Andelfo Cordero Buitrago

    Geniaaaalll amigo, me ha sido de mucha ayuda, mil gracias

    Responder
  2. Angel

    Hola buen día necesito ayuda con la creación de un tema hijo, para poder agilizar la Compatibilidad Divi y Sensei (plugin de cursos), será que me puedes ayudar.

    Cuando intento colocar un código para poder modificar functions.php me sale este mensaje

    No ha sido posible comunicar con el sitio para comprobar los errores fatales, así que el cambio de PHP se ha revertido. Tendrás que subir el cambio a tu archivo PHP por otros medios, como por ejemplo usando SFTP.

    Disculpa, es probable que este tipo de asesorías sea paga pero la verdad me urge que alguien me ayude

    Responder
    • Juan

      Cuando el editor de temas o plugins no permite guardar los cambios es porque puede existir un error en el código y WordPress protege el archivo de ser modificado o por algún problema con el servidor. Si el código es correcto puedes añadirlo a través del gestor de arvhivos del servidor, buscas el archivo funtions.php dentro de las carpetas de instalación del tema hijo y lo editas desde el mismo servidor.
      También puedes crear una conexión FTP y utilizar un programa como FileZilla para conectar con los archivos del servidor sin necesidad de acceder al panel de control.

      Responder

Enviar un comentario

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

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

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido