En nuestro anterior tutorial: «Cómo y dónde agregar código PHP personalizado a WordPress y Divi», vimos que una de las formas más utilizadas de agregar código PHP personalizado es hacerlo en el archivo functions.php de un tema hijo. Hoy vamos a profundizar un poco más en el tema de los Child Themes o Temas Hijos en WordPress.
¿Qué es un tema hijo o Child Theme en WordPress?
Un tema hijo o «Child Theme» en WordPress es un tema que hereda todas las funcionalidades y características de otro tema principal o «Parent Theme». Sin embargo, permite al usuario modificar o personalizar ciertos aspectos del tema original sin afectar a los archivos del tema principal.
¿Por qué crear un tema hijo?
Al modificar el código principal del tema, corremos el riesgo de perder nuestros cambios cuando actualizamos el tema en el futuro. También existe la posibilidad de que la modificación del código del tema cause conflictos con otros plugins o temas instalados en nuestro sitio web.
Para evitar estos problemas, un tema hijo funciona como una extensión del tema principal que se utiliza para realizar cambios sin modificar el tema principal. Esto permite que los cambios se realicen sin riesgo de perderlos cuando se actualiza el tema principal.
Además, se vienen tutoriales donde vamos a hacer cosas geniales en WordPress y Woocommerce con fragmentos de PHP. Así que ten listo tu Child Theme y suscríbete a mi lista de correo…
Cómo crear un tema hijo para Divi
En realidad, los procedimientos son los mismos tanto si queremos crear un tema hijo para Divi, como si queremos crearlo para cualquier tema. Así que vamos a detallar las formas generales de hacerlo a continuación.
Cómo crear un tema hijo o Child Theme en WordPress
Vamos a ver dos formas de hacerlo. Ambas son igual de válidas, depende ya del gusto de cada uno. Primero veremos cómo hacerlo al modo Victor, creando los archivos y carpetas con nuestras propias manos. Luego, veremos cómo hacerlo con la ayuda de un plugin.
¡Vuélvete un miembro Premium!
Si te gusta el contenido y deseas apoyar el proyecto, puedes volverte un miembro Premium y acceder a tutoriales exclusivos, como los que se muestran a continuación, y más beneficios.
Creando un tema hijo en WordPress desde cero
Bien, crear un tema hijo no es nada del otro mundo. Simplemente implica crear una carpeta y un par de archivos. Prefiero que aprendan a hacerlo de éste modo porque así se familiarizan con manejar los archivos y les parecerá más sencillo cuando más adelante necesiten agregar código PHP personalizado al archivo functions.php de su tema hijo.
Paso 1: Crear una carpeta para su tema hijo
Deben entrar a los archivos de la instalación de su WordPress. Personalmente se me hace más fácil hacerlo desde el File Manager que viene en el panel de control del hosting. En mi caso, Rapihosting (Excelente opción para hospedar tu web por cierto) utiliza cpanel y su file manager se ve de ésta manera:
Dentro, simplemente debes entrar a la carpeta que contiene a tu web. Mayormente, el contenido de tu web se encontrará en la carpeta public_html, esto pasa cuando tu web es el dominio principal de la cuenta de hosting. Si es un dominio adicional, se encontrará en una carpeta con el nombre del dominio.
Una vez ingreses a la carpeta de tu web, verás la organización de archivos clásica de WordPress, sigue la siguiente ruta para llegar a los temas: wp-content -> themes
Ahora que estás dentro de la carpeta «themes», deberás crear allí una carpeta para tu tema hijo. La carpeta que crees debe tener un nombre único y descriptivo que identifique el tema hijo. Por ejemplo, si desea crear un tema hijo del tema «Divi», podríamos nombrar a la carpeta «Divi-child».
En cPanel hay una opción superior para añadir carpetas o archivos.
Pssst si te está gustando el artículo, éstos otros te van a encantar
Paso 2: Crear un archivo style.css para su tema hijo
El siguiente paso es crear un archivo que se llame style.css en la carpeta que acabamos de crear. Para ello, así como había una opción de +Folder para agregar carpetas, hay una de +File para agregar archivos.
Ahora deberás editar éste archivo style.css para agregarle una referencia que conecte nuestro tema hijo (Child Theme) con el tema principal (Parent Theme).
Para editar un archivo, se debe hacer click derecho y elegir la opción de editar.
Una vez dentro, simplemente copia y pega el siguiente código. Al final, no te olvides de guardar cambios.
/*
Theme Name: Divi Child (Nombre de nuestro tema hijo)
Theme URI: https://yourdomain.com/twenty-twenty-one-child/ (URL del tema- Opcional)
Description: Child theme para Divi (Descripción del tema hijo)
Author: Victor Aquino (Nombre del autor)
Author URI: https://yourdomain.com/ (URL del autor- Opcional)
Template: Divi (IMPORTANTE nombre del tema padre o principal)
Version: 1.0 (Versión)
*/
Paso 3: Agregar una referencia al archivo style.css
Así como creamos el archivo style.css anteriormente, vamos a crear otro archivo, pero ahora deberá llamarse functions.php (Sí, es el famoso functions.php donde vamos a poder pegar nuestro PHP personalizado ).
Dentro de éste archivo, vamos a pegar lo siguiente: (No olvides guardar cambios)
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
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')
);
}
Lo que hace éste código es que se carguen los estilos del tema padre y luego del tema hijo sin problemas.
Más adelante, debajo de éste código puedes agregar todo el PHP que quieras
Paso 4: Activar nuestro nuevo tema hijo
Ahora, vamos a volver al panel de WordPress. Nos dirigimos a Apariencia-> Temas. Dónde se encuentra nuestro tema activo, y vamos a ver que ahora nuestro tema hijo creado aparecerá ahí. Y lo vamos a activar.
¡Ya tenemos un tema hijo!, ¡ Y hecho con nuestras propias manos!
Crear un tema hijo con plugins
Vamos a ver cómo podemos crear un tema hijo fácilmente con un plugin gratuito del repositorio de WordPress. El plugin en cuestión es : «Child Theme Configurator«.
Child Theme Configurator
Child Theme Configurator es uno de los plugins de tema hijo más populares en WordPress. Vamos a ver cómo crear un tema hijo con él, paso a paso.
Paso 1: Instalar y activar el plugin
Lo primero que debes hacer es instalar y activar el plugin Child Theme Configurator en tu sitio web de WordPress. Puedes hacerlo yendo a «Plugins» en tu panel de administración de WordPress y buscando «Child Theme Configurator». Una vez que lo encuentres, haz clic en «Instalar ahora» y luego en «Activar».
Paso 2: Crear un nuevo tema hijo
Una vez que hayas instalado y activado Child Theme Configurator, ve a «Herramientas» en tu panel de administración de WordPress y selecciona «Child Themes».
En la siguiente pantalla, elige el tema padre que deseas utilizar como base para tu tema hijo. Puedes seleccionar cualquier tema que esté instalado en tu sitio web. En mi caso aparece por defecto el tema Divi porque es el que tengo activo, pero puedes generar un Child Theme de cualquier tema.
También verificar que esté marcada la opción de «CREAR un nuevo tema hijo».
Luego, debes hacer clic en «Analizar».
Si te está gustando el artículo, éstos otros te van a encantar:
Paso 3: Personalizar tu tema hijo
Después de analizar el tema padre, verás una lista de opciones de personalización disponibles. Es recomendable dejar la mayoría en su opción por defecto. Quizá observar que la sección 4 se refiere al nombre que tendrá la carpeta del tema hijo, puedes usar cualquier nombre. Y en la sección 6 marcar «Utilizar cola de stilos de WordPress».
Si haces click en la sección 7, donde dice «Click para editar los atributos del tema hijo», se abrirán unas opciones para configurar el nombre de Child theme, así como su descripción, entre otros datos.
Paso 4: Guardar y activar tu tema hijo
Y finalmente hacer click al botón: «Create new Child Theme»
Y cuando cargue la página, ya estará creado tu Child Theme con todos los archivos necesarios.
Recuerda que a pesar que tu Tema hijo ya está creado, aún no está activo. Así que debes ir a Apariencia -> Temas para activar, como se hace con cualquier tema.
Ya tienes un tema hijo, así que ya puedes empezar a agregarle código personalizado!
Conclusión
Crear un tema hijo en WordPress es una forma segura y efectiva de personalizar la apariencia de su sitio web sin perder sus cambios cuando actualiza el tema principal.
Espero que hayas disfrutado éste artículo tanto como yo disfruté hacerlo 😉
0 comentarios