Cómo crear un tema hijo (Child theme) en WordPress para disfrutar de sus beneficios

En algún momento al usar WordPress, es posible que necesites modificar la apariencia, el diseño y las propiedades de la plantilla de tu sitio. Incluso puede llegar a requerir modificaciones en el código fuente de la plantilla misma. Sin embargo, ¡los cambios que realices en la plantilla de tu sitio WordPress se perderán cuando actualices esa plantilla a una nueva versión!

La plantilla secundaria (Child theme) te ayuda a superar ese problema fácilmente, porque cuando creas una plantilla secundaria a partir de una plantilla padre (Parent theme), podrás modificar los códigos fuente de la plantilla secundaria como desees, y al mismo tiempo podrás actualizar la plantilla padre a una versión más reciente en cualquier momento sin perder los códigos o modificaciones que hayas realizado. En este artículo conocerás la importancia de la plantilla secundaria Child theme y los beneficios de su uso junto con la plantilla base de tu sitio, además aprenderás cómo crear una (plantilla secundaria) a partir de la plantilla base de tu sitio WordPress con pasos sencillos, activarla en tu sitio y personalizar su apariencia y diseño como desees.

Importancia de usar Child theme en tu sitio WordPress

Aquí están los principales beneficios y ventajas que obtendrás al crear una plantilla secundaria Child theme a partir de la plantilla base ya instalada en tu sitio: En lugar de crear una plantilla WordPress desde cero, que es un tema tedioso y requiere mucho tiempo, podrás crear una plantilla secundaria Child theme en muy poco tiempo, sin necesidad de hacer mucho esfuerzo ni poseer habilidades de programación complejas. La plantilla secundaria te ayuda a aprovechar todas las características, herramientas y opciones que proporciona la plantilla padre o la plantilla base utilizada en el sitio, porque la plantilla secundaria utiliza todas las funciones, características y propiedades que usa la plantilla padre.

Puedes actualizar la plantilla base de tu sitio en cualquier momento que haya una nueva actualización disponible, sin temor a perder las modificaciones realizadas en la plantilla antes de la actualización, porque realmente realizaste los cambios en la plantilla secundaria de tu sitio, y las actualizaciones de la plantilla WordPress base no afectarán los cambios que hayas realizado. Si utilizas una plantilla secundaria y ocurre un problema que causa la pérdida de la apariencia del sitio, puedes simplemente eliminar completamente la plantilla secundaria, y entonces se mostrarán automáticamente el diseño y características de la plantilla base. La plantilla secundaria Child theme te ayuda a adquirir más habilidades relacionadas con la modificación de plantillas WordPress.

Lee también: ¿Qué es Child theme? ¿Y cuáles son sus usos para los propietarios de sitios WordPress?

Explicación completa para principiantes

¿Cómo funciona la plantilla secundaria Child theme? Probablemente hayas notado alguna vez al instalar una de las plantillas WordPress la aparición de una plantilla con el mismo nombre junto a la plantilla base seguida de las palabras Child theme. La razón por la que la plantilla secundaria se llama así es que hereda las características, archivos y datos de la plantilla base, ¡así como un hijo hereda de su padre!

Por lo tanto, cuando creamos una plantilla secundaria en un sitio WordPress y la activamos, el sitio aparecerá con la misma apariencia y diseño de la plantilla padre. Por ello, la idea de funcionamiento de la plantilla secundaria se basa en el uso de todos los archivos y códigos que existen en la plantilla padre, lo que significa que la plantilla ahora existe en dos versiones en lugar de una, por así decirlo, siendo una de las versiones preservada y alejada de modificaciones o cambios, y la otra versión, que es la plantilla secundaria Child theme, está diseñada para aplicar cualquier modificación requerida en el sitio sin temor a colapsar o dañar la plantilla padre. Nota: Cuando entras al sitio, WordPress automáticamente muestra la plantilla secundaria si está disponible, y si no está disponible, muestra la plantilla padre o la plantilla base.

Los componentes básicos de la plantilla secundaria Child theme Cuando accedas al administrador de archivos de tu sitio WordPress dentro del panel de control de Cpanel

y examines la carpeta Themes/ encontrarás dentro de ella las carpetas de todas las plantillas instaladas en tu sitio, y cuando accedas a la carpeta de cualquiera de las plantillas encontrarás que contiene un conjunto de archivos de la plantilla como se muestra en la siguiente imagen: La imagen anterior muestra los componentes básicos en la mayoría de las plantillas WordPress (la plantilla padre) y algunas plantillas pueden incluir archivos adicionales para más personalización.

Mientras que la siguiente imagen muestra los componentes básicos de la plantilla secundaria Child theme para que esté lista para funcionar y activarse en el sitio: Como puedes ver en la imagen anterior, no necesitarás más de esos tres archivos para crear una plantilla WordPress secundaria Child theme, y explicaremos estos archivos en detalle dentro del artículo. A continuación te damos una definición simple de ellos: Archivo Functions.php: Es un archivo de programación que se utiliza para conectar la plantilla padre con la secundaria, y ya hemos hablado sobre él en detalle anteriormente.

Archivo style.css: Es el archivo de estilos que se utiliza para agregar códigos para modificar la apariencia, diseño y estilo de la plantilla (y si deseas arabizar la plantilla, es preferible que coloques los estilos para el idioma árabe en un archivo de estilos separado rtl.css)

Archivo Screenshot.png: Es un archivo de imagen que agregamos en la carpeta de la plantilla secundaria para que aparezca junto al nombre de la plantilla dentro del panel de control de WordPress como se muestra en la siguiente imagen: Por lo tanto, la plantilla secundaria contiene solo muy pocos archivos, porque no estamos creando una plantilla nueva desde cero, sino que la plantilla secundaria hereda o utiliza todos los archivos y códigos de la plantilla base (padre), por lo que la plantilla padre también debe estar instalada en el sitio para funcionar correctamente.

Nota: En la siguiente explicación crearemos una plantilla secundaria a partir de la famosa plantilla Sydney, y puedes aplicar la misma explicación a cualquier plantilla WordPress para crear una (plantilla secundaria) de ella de la misma manera. Pasos para crear una plantilla secundaria (Child theme) Puedes crear una plantilla secundaria (Child theme) para cualquier plantilla WordPress instalada en tu sitio mediante los siguientes pasos fácilmente y sin poseer habilidades de programación avanzadas, pero se recomienda que tengas buenos conocimientos sobre manejo de códigos de programación para los siguientes lenguajes HTML – CSS – PHP.

También te recomendamos hacer una copia de seguridad de tu sitio antes de proceder a crear una plantilla secundaria a partir de cualquier plantilla WordPress que tengas.

Crear una carpeta para la plantilla secundaria dentro del administrador de archivos

El primer paso para crear la plantilla secundaria Child theme es crear una carpeta con el nombre de la plantilla dentro del administrador de archivos de tu sitio, donde puedes acceder al administrador de archivos del sitio haciendo clic en File Manager desde el panel de control de la hospedería cPanel: Después de acceder al administrador de archivos, puedes entrar a la carpeta Public_html, luego a la carpeta de instalación de WordPress de tu sitio, después abre la carpeta Wp-content, y finalmente abre la carpeta Themes que contiene todas las carpetas de las plantillas WordPress instaladas en el sitio: Como se muestra en la imagen anterior, cuando accedas a la carpeta Themes encontrarás la opción para crear una nueva carpeta en la parte superior de la página Folder+, selecciónala y luego nombra la nueva carpeta como Child o cualquier otro nombre que desees. Crear archivo style.css

para la plantilla secundaria Los pasos siguientes consisten en crear los archivos básicos de la plantilla secundaria, que son el archivo style.css y el archivo functions.php. Después de crear la carpeta Child de la plantilla secundaria, accede a ella y haz clic en el botón para crear un nuevo archivo file en la parte superior izquierda de la pantalla, se abrirá una ventana

emergente, escribe en ella el nombre del archivo de estilos (style.css) y luego haz clic en el botón Create new file. Después de eso se creará exitosamente el archivo style.css dentro de la carpeta Child. Ahora haz clic derecho en el nombre del archivo y selecciona Edit o Editar, para abrir la página de edición del archivo style.css.

Pega el siguiente texto dentro de ella: /*

Theme Name:

Child Theme URI: http://example.com

Description: Esta es una plantilla secundaria de la plantilla padre base Author:

WordPress en Español Author URI: http://example.com

Template: sydney Version:

1.0.0 */ */ Una vez que pegues este texto dentro del archivo style.css y guardes el archivo, notarás que aparece el nombre de la plantilla dentro del panel de control de WordPress < Apariencia <

Plantillas. Y antes de que veamos cómo se ve la plantilla dentro del panel de control de WordPress, primero déjame explicarte brevemente el texto anterior compuesto por 7 líneas de la siguiente manera: Theme Name: Aquí escribimos el nombre de la plantilla como deseamos que aparezca dentro del panel de control de WordPress, en este ejemplo le dimos el nombre Child y puedes darle cualquier nombre que desees. Theme URI: En esta línea escribimos el enlace del sitio web de la plantilla si está disponible, y ciertamente es una línea de formato que no afecta el funcionamiento de la plantilla en absoluto.

Description: En esta línea escribe una breve descripción de la plantilla, y este texto descriptivo solo aparece en la página de información de la plantilla. Author: En esta línea puedes escribir el nombre del desarrollador de la plantilla y este nombre también aparece en la página de información de la plantilla, no afectando el funcionamiento de la plantilla de ninguna manera. Author URI: Coloca aquí el enlace del sitio web del desarrollador de la plantilla.

Template: Esta es la línea más importante de todas, donde escribimos el nombre de la plantilla padre o la plantilla base para la que deseamos crear la plantilla secundaria, y debes escribir el nombre de la plantilla exactamente como aparece en el nombre de la carpeta dentro del administrador de archivos de WordPress. Version: Aquí puedes escribir la versión actual de la plantilla.

Es una información secundaria también y no afecta su funcionamiento. Por lo tanto, a través de la explicación de las funciones de los códigos del archivo style.css, podemos decir que la línea para escribir el nombre de la plantilla Template es la línea más importante, por eso presta mucha atención al escribir el nombre de la plantilla base para la que deseas crear una plantilla secundaria, ya que esto te asegura que la plantilla secundaria aparezca correctamente.

Por eso accede a la carpeta Themes dentro del administrador de archivos del sitio, verifica el nombre de la plantilla como aparece en el nombre de su carpeta y escríbelo exactamente con la misma mayúscula y minúscula, porque si escribes el nombre en mayúsculas en lugar de minúsculas, la plantilla secundaria no funcionará contigo. Crear archivo functions.php para la plantilla secundaria De la misma manera que creaste el archivo style.css, accede nuevamente a la carpeta de la plantilla secundaria y crea otro archivo con el nombre functions.php:

Después haz clic en la página de edición Edit del archivo functions.php: Luego pega el siguiente código dentro del archivo: