Es posible que los usuarios menos experimentados en el mundo del diseño web aún no hayan escuchado hablar sobre el child theme o tema hijo en WordPress.
Pero, si te consideras un apasionado de la creación de páginas web en este CMS, prepárate para aprender una técnica que te facilitará el trabajo con tu plantilla y te permitirá ampliar sus funcionalidades.
En este artículo aprenderás qué es un child theme ,cómo crearlo para tu sitio online y las ventajas que tiene su uso. ¡Comenzamos! 👇
Contents
· ¿Qué es tema hijo o child theme en WordPress?
Nos referimos como child theme, o tema hijo, al tema creado a partir de las funcionalidades básicas de otro, denominado parent theme, y que incorpora ciertas modificaciones con el objetivo de ampliar sus funcionalidades y diseño.
Entendiendo por funcionalidad cualquier tipo de elemento interactivo como widgets,animaciones o miniaturas automáticas para cada post o entrada.
Y en cuanto a diseño, a la modificación del tamaño y estilo de los caracteres del tema, la distribución de columnas de la página y la variación del tipo de menú para móviles, por ejemplo
💡 Se trata de la versión mejorada de cualquier tema WordPress genérico que puedas adquirir en portales como Theme Forest o el repositorio de temas de WordPress.
· Ventajas de crear un tema hijo en WordPress
Como te contábamos en el apartado anterior, crear un child theme heredado de la plantilla principal, puede aportarle a tu sitio web numerosos beneficios.
Y no esto no quiere decir que los temas que vienen por defecto sean malos, nada más lejos de la realidad. De hecho, si estás buscando uno nuevo, aquí te dejo una lista con los mejores temas SEO para WordPress clasificadas por categorías.
Sino que simplemente, si puedes permitirte desarrollar y mejorar ciertas funcionalidades para que se adapte mejor a tus necesidades, pues bienvenido sea. ¿No?😀
#1 Mejora la usabilidad de tu página web
A pesar de que existen temas para prácticamente cualquier sector de actividad, es difícil encontrar una plantilla que cumpla con el 100% de los requisitos de nuestros clientes.
📝 Un cliente, cuya actividad económica estaba relacionada con el alquiler de barcos de recreo, nos pidió que el cursor de la propia web fuese un barco, o que el símbolo de carga de cualquier elemento de la web fuese el dibujo de un transatlántico surcando el mar.
Y esta rocambolesca petición ilustra la naturaleza de las demandas de muchas personas. Y quizás, tú también tengas las tuyas.
💡 El hecho de contar con un child theme permite disfrutar de un diseño web más personalizado y que conecte con el buyer persona de tu sitio web.
#2 Ahorra recursos en el servidor web
Por otro lado, el hecho de contar con un tema hijo para WordPress te permitirá evitar el uso de un número elevado de plugins que penalizan y ralentizan la velocidad de carga de tu sitio online.
Te pongo un ejemplo bastante sencillo. Para añadir el código de Google Analytics en tu página, y así poder obtener todas las métricas de navegación de tu web, debes insertarlo en el propio header de tu tema. Más en concreto, en el archivo header.php.
📝 Para llevar a cabo esta tarea, puedes hacer uso de alguno de los muchos plugins disponibles en el repositorio de plugins WordPress como podría ser GA Google Analytics.
Realmente, si simplemente añades uno, no experimentarás un cambio demasiado grande. Pero ,si para cada funcionalidad que necesites implementar haces uso de un plugin, tu hosting se saturará. Y tus clientes lo sufrirán. Y el posicionamiento web de tu sitio online caerá ❌
#3 Protección en caso de actualización fallida
Otra de las razones por las que numerosos webmaster utilizan child themes para sus páginas web tiene que ver con la seguridad.
Nos gustaría recordarte que en esta guía completa sobre seguridad WordPress tienes toda la información que necesitas conocer sobre este aspecto.
Debes ser consciente que, cuando tu tema es actualizado, los archivos son sobrescritos de forma automática. Es decir, los cambios realizados con anterioridad, se borran.
💡 Puedes utilizar este tema hijo como suerte de «caja fuerte» en la que guardar todos los cambios y funcionalidades originales del tema padre. De hecho, nosotros siempre creamos un child theme para todos y cada uno de los proyectos web que realizamos.
Sigue leyendo y te enseñamos cómo tu también puedes hacerlo.
· ¿Cómo crear un child theme en tu página WordPress?
Una vez has entendido qué es un child theme y cuáles son las ventajas de incorporarlo en tu página web, llega el momento de ponerse manos a la obra. En este caso, ¡manos al tema!
Lo primero que debes saber es que necesitas poder acceder al Cpanel y FTP de la página web. Se trata de tener acceso a los ficheros clave donde se encuentran almacenados todos los datos de tu página.
Podrás hacerlo desde la propia plataforma de tu hosting en muy pocos clics.
También es importante que entiendas que existen dos métodos principales para crear un child theme:
✔️ De forma manual
✔️ De forma automática
En primer lugar, veremos cómo crear un tema hijo para WordPress sin utilizar ningún tipo de plugin.
#1 Haz una nueva carpeta para el child theme
Sigue esta ruta para poder acceder al directorio específico donde crear la carpeta de tu tema hijo en WordPress.
👉 cPanel > Files > Public_html > Wp_content > Themes
Allí deberás crear la nueva carpeta donde irá contenida toda la información de tu child theme. Por ejemplo.
#2 Añade el style.css dentro del child theme
Debes crear una hoja de estilos [style.css] dentro de la carpeta del theme hijo. Esto es un conjunto de instrucciones anexas a un contenido, en este caso el propio child theme, y que hacen referencia al formato del mismo.
Simplemente copia estas líneas y pégalas en tu nuevo Style.css.
/*
Theme Name: hello-elementor hijo
Theme URI: http://tueliges.com
Version: 2.0
Description: Tema hijo de hello elementor
Author: Lo que quieras
Author URI: http://tueliges.com
Template: hello-elementor
*/
/*—————– Cambios a partir de aquí ——————————-*/
⚠️ Presta atención a que el apartado Theme name incluye exactamente el mismo nombre de la carpeta del child theme y que en el apartado Template incluyes el nombre exacto del theme padre. En nuestro caso: hello-elementor.
El resto de casillas pueden ser rellenadas como tu quieras, se trata de mero contenido informacional.
#3 Crea el archivo functions.php
Para poder importar todos los estilos del theme padre, es necesario que crees una nuevo archivo functions.php en la carpeta del chld theme.
Escribe allí el siguiente código:
<?php
function my_theme_enqueue_styles() {
$parent_style = ‘parent-style’; // Estos son los estilos del tema padre recogidos por el tema hijo.
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’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>
Una vez hayas concluido este paso, ya puedes comprobar que el tema hijo se encuentra instalado en tu escritorio de WordPress junto al resto de plantillas descargadas. ¡Ahora toca darle una funcionalidad!
#4 Incorpora nuevas funciones en el child theme
El funcionamiento del CMS WordPress es ciertamente particular: Primero carga el archivo functions.php del tema hijo y después el del tema padre.
✔️ Por ello, si no quieres perder ninguna de las funciones del theme padre a raíz de una actualización, tan solo tendrás que añadirlas en el theme hijo.
💡 De esta forma, te asegurarás que estas será cargadas primero y que no presentan riesgo de ser borradas o sobrescritas en una actualización general.
Por ejemplo, una función básica para generar widgets:
<?php
/* Código para crear un widget */
if (function_exists(‘register_sidebar’)) {
register_sidebar(array(
‘name’ => ‘Sidebar Widgets’,
‘id’ => ‘sidebar-widgets’,
‘description’ => ‘These are widgets for the sidebar.’,
‘before_widget’ => ‘<div id=»%1$s» class=»widget %2$s»>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’
));
}
Así, WordPress primero cargará esta función desde el tema hijo y,posteriormente, el resto de las funciones almacenadas en el theme padre.
· Plugin para crear un tema hijo de forma automática
La otra opción,orientada a perfiles menos experimentados, es la de generar este tipo de temas hijo en WordPress mediante el uso de plugins.
👉 En este otro artículo ya te explicamos qué es un plugin y los 15 mejores plugins WordPress que no pueden faltar en tu sitio web. ¡Échale un vistazo!
▷ Child Theme Configurator
Child Theme Configurator es un plugin diseñado para detectar los problemas más frecuentes de una plantilla WordPress,crear temas hijo de forma automática,así como poder personalizarlos a través de sus hojas de estilos.
Y presenta un funcionamiento realmente sencillo. Sigue este pequeño tutorial para crear tu tema hijo de forma automática 👇
#1 Instala y Activa el plugin
Tan sólo deberás dirigirte al repositorio de plugins WordPress y descargar el software. Una vez instalado, dirigete a la barra lateral de tu Escritorio > Child Theme Configurator y haz clic en activar.
#2 Haz clic en «Analizar tema padre»
Si este es el primer Child Theme que vas a crear, en el paso nº1 observarás que,únicamente, te aparece la opción «Crear un nuevo Tema Hijo». Selecciónala.
✔️ Posteriormente, debes clicar el tema principal sobre el que quieres construir la versión hijo. Asegúrate que seleccionas el tema fijo que tienes en tu página web. Por supuesto, ya sólo te queda hacer clic en «Analizar».
#3 Completa la información del child theme
De la misma forma que necesitábamos crear un hoja de estilos [style.css] donde reflejar la información principal del tema, el plugin incluye una serie de apartados para crearla de forma automática.
¡Tan sólo rellenalos con tu información!
El último paso que debes seguir para poder completar tu child theme tiene que ver con la posibilidad de clonar las modificaciones que ya hayas hecho en tu tema padre. Es decir, las funcionalidades que no venían incluidas por defecto.
📝 En caso de que te interese incorporarlas en tu tema hijo, marca la casilla del apartado nº8. Si se trata de un tema estándar básico, o no quieres incluir las modificaciones realizadas, simplemente deja la casilla totalmente vacía.
#4 Crea el Child Theme y Comprúebalo
Para finalizar todo el proceso, tan sólo debes hacer clic en «Crear nuevo Tema Hijo» y este aparecerá automáticamente en la sección de «Temas» de tu escritorio WordPress.
Si quieres comprobarlo, deberás seleccionar el tema hijo de entre todos los que tengas guardados en Apariencia>Temas y hacer clic en vista previa.
💡 Navega con total normalidad por la página y prueba las nuevas funcionalidades añadidas. De esta forma, tendrás una imagen 100% real del funcionamiento del mismo.
· ¿Cómo instalar un tema hijo ya existente ?
Es posible que ya existan diversos child themes de tu propia plantilla WordPress y que estos, también se encuentren disponibles para ser descargados
✔️ Tienen la ventaja de que no deberás completar ninguno de los dos procesos mencionados. El proces es aún más rápido.
📝 Desgarga tu tema hijo ,que vendrá comprimido en formato .zip, e instálalo en tu propio WordPress. Puedes encontrar estos themes hijo en el portal de muchos desarrolladores de temas como Avada o Divi.
¡Asegúrate que es de la plantilla correcta!
▷ Proceso completo
Al igual que la mayoría de operaciones en este CMS, instalar un tema hijo no tiene demasiada complicación. De hecho, sigue el mismo proceso que la instalación de cualquier otra plantilla normal.
👉 Sigue la siguiente ruta → Escritorio > Apariencia > Temas > Añadir nuevo. Y selecciona el archivo con la carpeta del child theme.
Si el archivo instalado no presenta ningún tipo de fallo, ya podrás disfrutar de tu nuevo tema hijo. ¡Ahora tan sólo debes activarlo y comenzar a incluir funcionalidades extra en el mismo!
Conclusión
A lo largo de este artículo, hemos intentado transmitirte las bondades crear un tema hijo en tu WordPress.
Evidentemente, el amplio abanico de conocimientos y temáticas que pueden ser incluidas en el mismo, como la creación de funciones y modificación de hojas de estilo, por ejemplo, daría para otra entrada mucho más extensa.
✔️ Además, nos gustaría que fueses consciente de otros usos que puedes darle a estos child themes, como el alojamiento de las traducciones de tu página web. Es posible configurarlas para que estas sean mostradas en función de la procedencia de visitante.
No obstante, sus usos principales son la mejora de las funcionalidades de propio tema y la conservación de la información en actualizaciones.
