Cómo crear un tema hijo en WordPress (3 métodos)

Si eres un usuario frecuente de WordPress, probablemente estés familiarizado con los temas hijo. Si eres nuevo en WordPress, o si no has usado temas hijo antes, ¡este post es para ti!

En este artículo, explicaremos el propósito de los temas hijo y cómo crear rápidamente el suyo propio.

¿Qué son los temas infantiles?

Un tema hijo le permite realizar cambios en su tema de WordPress y mantenlos separados de tu tema normal ("padre"). Son útiles por varias razones, pero sobre todo porque te permiten mantener tu tema actualizado sin borrar tus modificaciones en el proceso.

En pocas palabras:

• A tema principal es tu tema habitual de WordPress. Por ejemplo, Astra.
• A tema infantil es una copia de ese tema padre que ayuda a mantener las modificaciones y actualizaciones separadas de él.

¿Por qué utilizar un tema hijo?

Hay varias buenas razones para utilizar un tema hijo:

• Protege su tema principal contra los errores. Si realiza una modificación en su tema y rompe su sitio en el proceso, es fácil de arreglar. Simplemente borra el archivo del tema hijo y copia uno nuevo del tema padre. Si modificas el tema padre directamente, te llevará mucho más tiempo y esfuerzo arreglarlo.
• Mantiene tus personalizaciones separadas. Siempre es una buena práctica mantener cualquier adición o modificación separada del archivo original, ya que facilita ver y ajustar los cambios. La mayoría de los temas de WordPress tienen una sección designada "CSS personalizado" precisamente por esta razón.
• Tus cambios no se borrarán si se actualiza el tema. Mantener tu tema actualizado es esencial por motivos de seguridad. Pero si realizas cambios en tu tema principal, podrían desaparecer tras cualquier actualización. ¿Cuál es la solución? Utiliza un tema hijo. Los temas hijo no cambiarán aunque actualices el tema principal.

Guía paso a paso para crear un tema hijo

Para este tutorial, utilizaremos nuestro tema, Astra. Independientemente del tema que utilices, el proceso debería ser prácticamente el mismo.

Hay tres formas de crear un tema hijo:

1. Utilizando nuestro generador de temas Astra para niños
2. Instalando un plugin de tema hijo
3. Creando manualmente archivos y carpetas en el directorio de WordPress

Método 1: Utilizar el generador de temas Astra para niños

En Astra disponemos de una potente herramienta que te permite crear un tema hijo para nuestro tema Astra. Generador de temas infantiles Astra le permite crear un tema hijo con sólo pulsar un botón.

Para utilizar el generador, vaya a este enlace y rellene el formulario. Si haces clic en "Opciones avanzadas", puedes añadir detalles adicionales como Autor, Descripción y Nombre de la carpeta. Si lo desea, también puede añadir una captura de pantalla.

A continuación, haga clic en Generar. El tema hijo se descargará en su ordenador.

Puede añadirlo a su sitio como cualquier otro tema: vaya a Apariencia > Temas y haga clic en Añadir nuevo.

Ya está. Ahora tiene un nuevo tema hijo, que puede editar directamente en el Editor de temas.

Método 2: Utilizar un plugin

Existen varios plugins gratuitos que permiten crear un tema hijo. Todos funcionan más o menos de la misma manera, aunque algunos tienen características únicas.

Configurador de temas infantiles

Con más de 300.000 instalaciones, este plugin es el plugin de tema hijo más popular disponible. Tiene más de una docena de opciones que te permiten personalizar tu tema hijo.

Veamos cómo usar este plugin para crear un tema hijo.

1. Descargue el plugin desde este enlace y súbalo a su sitio web WordPress.

2. Después de activar el plugin, vaya a Herramientas > Temas hijos para utilizar el plugin.

3. En la primera pestaña, verás un asistente para crear un tema hijo. Selecciona tu tema padre y haz clic en el botón Analizar para que el plugin lo evalúe.

Si su tema es adecuado (como el Tema Astra ), recibirás un mensaje de confirmación.

Debajo del mensaje de confirmación hay una serie de ajustes. En primer lugar, asigne un nombre al directorio del tema. Tenga en cuenta que este es el nombre de la carpetay no el nombre del tema en sí.

A continuación, elija dónde desea guardar los estilos. Puede utilizar la opción predeterminada style.css o guárdelo en una hoja de estilo independiente.

En el siguiente paso, elija cómo se accederá a la hoja de estilos del Tema Padre. Lea la Poner en cola la hoja de estilo para más información sobre este proceso.

Abra el panel de atributos del tema haciendo clic en el botón . Aquí puede añadir el nombre del tema hijo, el sitio web, el autor y el sitio web del autor.

En el último paso, puede copiar menús, widgets y otros ajustes del tema principal al tema secundario.

Por último, haga clic en el botón para crear su nuevo Tema Hijo. ¡Listo!

Otros plugins

Estos otros plugins funcionan de forma similar.

Asistente para temas infantiles: Este plugin tiene un "asistente" que te guía paso a paso por el proceso.

Generar tema hijo: Este es un plugin estándar para crear un tema hijo. Es más simple y tiene menos funciones que otras opciones, lo que le permite crear el tema hijo más rápidamente.

Childify Me: Otro plugin sólido con diferentes opciones de personalización.

Creador de temas infantiles de Orbisius: Otro plugin popular, con más de 30.000 instalaciones.

Generador de temas infantiles: Un plugin sencillo pero muy valorado.

Método 3: Crear un Tema Hijo Manualmente

Si prefieres crear un tema hijo tú mismo, también puedes hacerlo.

Paso 1: Acceda a su sitio a través de FTP/SFTP, SSH o el explorador de archivos de cPanel

En primer lugar, tendrás que conectarte a tu sitio para poder subir algunos archivos. La forma más sencilla de hacerlo es mediante FileZilla (FTP/SFTP), Putty (SSH) o el explorador de archivos del panel de control de tu host (cPanel o Plesk).

¿No sabes cómo hacerlo? Lea una de las siguientes guías.

• Para acceder a su sitio a través de FTP/SFTP, lee esta guía.
• Para acceder a su sitio a través de SSH, lee esta guía.
• Para acceder a su sitio a través del Administrador de archivos en su panel de control con cPanel, lee esta guía.
• Para acceder a su sitio a través del Administrador de Archivos en su panel de control con Plesk, lee esta guía.

Una vez que haya iniciado sesión en el sitio, vaya a la sección /wp-contenido carpeta. A continuación, vaya a /temas.

Allí, cree una carpeta para el tema hijo y llámela astra-niño. La primera parte del nombre debe ser el nombre del tema principal, seguido de un guión y la palabra niño.

Paso 2: Crear el archivo Style.css

Ahora tenemos que crear un style.css para contener el código CSS. CSS, acrónimo de Cascading Style Sheets (hojas de estilo en cascada), es el lenguaje de hojas de estilo utilizado para diseñar elementos en los sitios web.

Si no está familiarizado con CSS, consulte algunas de estas guías para principiantes:

• Codecademy - Aprende CSS
• Escuelas W3 - Tutorial CSS
• Trucos CSS
• Smashing Magazine - Cómo aprender CSS

¿Ya te sientes cómodo utilizando CSS? Abre tu editor de texto favoritocrea un nuevo archivo y guárdalo como style.css.

A continuación, copie y pegue el texto que aparece a continuación. Asegúrese de cambiar el contenido para que coincida con su propio sitio web o nombre de la empresa.

/*
 Theme Name:   Astra Child
 Theme URI:	http://example.com/astra-child
 Description:  Astra Child Theme is an awesome theme.
 Author:   	Brainstorm Force
 Author URI:   https://www.wpastra.com
 Template: 	astra
 Version:  	1.0.0
 License:  	GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     	astra
 Text Domain:  astrachild
*/

A continuación, añada el archivo a la carpeta astra-niño de su sitio a través de FTP/SFTP, SSH o el gestor de archivos cPanel/Plesk.

Paso 3: Poner en cola la hoja de estilo

Ahora necesitamos añadir una pequeña línea de código que conecte el tema padre con el tema hijo.

Hay dos formas de hacerlo; la primera es fácil pero ineficiente, mientras que la segunda lleva más tiempo pero es la recomendada por WordPress.

Método 1

Este primer método se considera anticuado, ya que aumenta el tiempo que tarda en cargarse la hoja de estilos. Sin embargo, es mucho más sencillo de hacer y, si tu sitio no es especialmente grande, tiene muy pocos inconvenientes prácticos.

Esto es especialmente cierto si sólo realiza un pequeño número de modificaciones en el tema hijo.

Simplemente añada el siguiente código al final de su archivo style.css:

@import url(“../astra/style.css");

Método 2

El segundo método es el recomendado por WordPress.org, pero requiere un poco más de conocimiento técnico. Es el método preferido, especialmente si tienes un sitio más grande y estás tratando de optimizar el tiempo de carga de la página.

En la barra lateral de administración de WordPress, vaya a Apariencia > Editor de temas.

Seleccione su tema hijo y busque la opción funciones.php archivo. Si no lo tiene, créelo.

La primera línea de este archivo debe ser una etiqueta PHP de apertura (<?php), seguida del código siguiente:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( ' astra-child', get_stylesheet_uri(),
        array( astra ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

Asegúrese de sustituir astra-niño con el nombre de su tema hijo y matriz(astra) con el slug del tema principal.

Tenga en cuenta que, a diferencia del style.css (o cualquier otro archivo), la versión del tema hijo de functions.php no sobrescribe el archivo del tema padre. En su lugar, simplemente añade el código del archivo hijo al archivo padre. Por lo tanto, no es necesario copiar todo el archivo del tema principal.

Paso 4: Activar el tema

Una vez que haya cargado el tema, abra el panel de administración de WordPress y vaya a Apariencia > Temas. Tu tema debería aparecer ahora en la lista. Actívalo.

Como aún no hemos añadido ningún código nuevo, el tema hijo será exactamente igual que su tema padre.

Paso 5: Añadir personalizaciones

Ahora, vamos a añadir algunas personalizaciones. Para ello, necesitarás estar familiarizado con HTML y CSS. Si no lo estás, consulte nuestros enlaces.

La forma más sencilla de realizar un cambio específico en el tema de tu sitio web es con la herramienta de inspección de tu navegador. En la mayoría de los navegadores, incluidos Google Chrome, Mozilla Firefox y Apple Safari, puede hacerlo haciendo clic con el botón derecho en un elemento. Al hacerlo, aparecerá un panel de desarrollador en el lateral de la ventana del navegador.

Por ejemplo, haga clic con el botón derecho del ratón en el encabezamiento superiory seleccione Inspeccione. Aparecerá la barra lateral de desarrolladores.

Dado que inspeccionamos específicamente la rúbrica, se puede ver el <h1> HTML. Como queremos modificar este encabezado (y todos los encabezados), queremos apuntar al elemento H1.

Para ello, vaya a Apariencia > Editar temas. En la parte derecha, seleccione su tema hijo. A continuación, añada el siguiente código a la sección style.css archivo.

h1 { color: blue; }

Guarde el archivo y vuelva a la página de su sitio. El título del encabezado debería ser azul.

¡Buen trabajo! Has creado un tema hijo. Cada vez que desee hacer modificaciones a su tema, añadir a este style.css y no el archivo style.css de su tema principal.

También puede cargar el archivo modificado directamente a través de FTP/SFTP, SSH o el Administrador de archivos.

Otros consejos sobre tematización de WordPress

Cómo cambiar otros archivos del tema

Todos los temas de WordPress (incluidos nuestro tema Astra) se compone de varios .php archivos. Estos incluyen comments.php, header.php, body.php, footer.phpetc.

Estos archivos se denominan archivos "plantilla" y no deben modificarse directamente, por la misma razón por la que no debe modificar style.css. Si quieres cambiar alguno de ellos, puedes seguir un proceso similar al que hicimos anteriormente.

Para este ejemplo, utilizaremos el header.php archivo.

Abra el archivo y copie todo el contenido. A continuación, pega ese contenido en un nuevo archivo de texto en tu ordenador. Modifícalo, asegurándote de no cambiar nada más.

Cuando hayas terminado, guárdalo como header.php y súbalo a la carpeta del tema hijo mediante FTP/SFTP, SSH o el Administrador de archivos.

Para realizar modificaciones en el futuro, edítelo directamente en el editor de WordPress (yendo al Editor de temas) o vuelva a cargar el archivo actualizado.

Funciones.php

También podemos hacer algo similar para funciones.phpel archivo que controla muchos de los procesos de su sitio. A diferencia del style.css (o cualquier otro archivo), la versión del tema hijo de funciones.php no sobrescribe el archivo del tema padre.

Más bien, simplemente añade el código del archivo hijo al archivo padre.

1. En primer lugar, abra el funciones.php de su tema.
2. Copia todo el texto y pégalo en un nuevo documento de texto.
3. Realice los cambios necesarios y guárdelo como functions.php.
4. Por último, suba el archivo a la misma carpeta del tema hijo.

Conclusión

Eso es todo. Como recordatorio, siempre debes intentar usar un tema hijo cuando hagas modificaciones a un tema de WordPress. Aunque pueda parecer más fácil modificar rápidamente el tema principal, a la larga tendrás más problemas.

Si está abonado a uno de nuestros Planes de pago Astra, nuestro equipo de soporte puede ayudarle a configurar un tema hijo en su sitio web WordPress. Ponte en contacto con nosotros.

¿Estás utilizando un tema hijo? ¿Qué método utilizas para realizar cambios? Háznoslo saber en los comentarios.