Te enseño de forma rápida, concisa y técnica cómo crear un tema hijo (child theme) en WordPress, sin usar plugins, consiguiendo así no degradar el rendimiento de WordPress.
- Tiempo de implementación: 7/10 min
- Nivel de dificultad: Fácil
1. Conectar a tu sitio via FTP
Abre tu cliente FTP y conecta a tu sitio web utilizando las credenciales proporcionadas por tu proveedor de hosting.
2. Navega al directorio de temas
Una vez conectado, navega al directorio de temas de WordPress. La ruta común es:
public_html/wp-content/themes/
3. Crea una nueva carpeta para tu tema hijo
Haz clic derecho en el directorio themes
y selecciona «Crear nuevo directorio» o «Nueva carpeta». Nombralo basándote en el nombre de tu tema principal, por ejemplo, si tu tema principal es «twentytwentyone», nombra tu tema hijo como «twentytwentyone-child».
4. Crea un archivo style.css
Haz clic derecho en tu nueva carpeta de tema hijo y selecciona «Crear nuevo archivo». Nómbralo style.css
.
Ahora, necesitas editar este archivo. Haz clic derecho en el archivo y selecciona «Editar». Inserta el siguiente código:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: http://example.com/twentytwentyone-child/
Description: Child Theme for Twenty Twenty-One
Author: Tu Nombre
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
*/
La línea más crítica aquí es Template: twentytwentyone
, que indica a WordPress el tema padre de este tema hijo.
5. Crea un archivo functions.php
En el directorio de tu tema hijo, crea un nuevo archivo llamado functions.php
.
Edítalo y añade el siguiente código para encolar el archivo de estilos del tema padre:
<?php
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
?>
Este código se asegura de que el archivo de estilos del tema padre se cargue antes de cualquier estilo o función que añadas a tu tema hijo.
6. (Opcional) Importa el archivo de estilos del tema padre
Si prefieres importar los estilos en vez de encolarlos, añade esto a tu style.css
:
@import url("../twentytwentyone/style.css");
Sin embargo, usar functions.php
para encolar estilos es generalmente considerado una mejor práctica.
7. Activa tu tema hijo
Después de subir todos los archivos necesarios mediante FTP, inicia sesión en tu sitio WordPress. Ve a Apariencia > Temas. Aquí, deberías ver tu nuevo tema hijo listo para ser activado.