Child theme en wordpress: ¿Qué son y cómo crearlos?
Equipo editorial de IONOS9 mins
A lo largo de los años, WordPress ha pasado de ser un simple sistema de blogs a una plataforma CMS fácil de usar y se ha vuelto omnipresente en la web. Gracias a su popularidad, muchos profesionales se han especializado en proporcionar temas de WordPress como plantillas para sitios web. Estas ya incluyen casi todas las funcionalidades de un sitio web y son muy parecidas a como debe ser el producto final, pero no idénticas. Normalmente hay que realizar ajustes en el código para adaptar el sitio al diseño corporativo, o se debe cambiar la estructura. Pero ¿qué pasa con los cambios cuando se actualiza el tema? Para esto sirven los temas hijo en WordPress.
¿Qué es un tema hijo de WordPress?
Si quieres evitar que tus cambios se sobrescriban al actualizar, debes usar un tema hijo de Wordpress. Los child themes de WordPress son, como su nombre indica, los hijos de un tema padre. Estos están ligados al tema padre de manera que heredan su apariencia y funciones. Si haces ajustes individuales en el tema hijo de WordPress, estos se sobrescriben automáticamente en las instrucciones del tema padre. Por lo tanto, los cambios no tienen ningún efecto sobre el tema principal. Si el tema padre se actualiza, los cambios en el tema hijo de WordPress permanecen en su lugar.
Durante los principales ajustes o actualizaciones, pueden aparecer mensajes de error en el sitio web. Para no molestar a los usuarios, debes activar el modo de mantenimiento de WordPress.
¿De qué se compone un tema hijo de WordPress?
Un child theme de WordPress puede tener diferentes componentes. En este sentido, los cambios y los archivos donde estos se realizan son decisivos. Sin embargo, para que los temas hijo de WordPress funcionen correctamente, hay ciertos archivos que debes crear para cada uno de ellos:
- Archivo de hoja de estilo CSS style.css
- function.php
- screenshot.png (opcional)
¿Por qué el child theme de WordPress necesita estos tres archivos?
Child themes en WordPress: cómo funcionan
Como ya hemos mencionado, un tema hijo de WordPress necesita tres archivos para funcionar. Los archivos tienen las siguientes funciones:
- style.css: contiene todas las reglas y declaraciones del CSS que controlan la apariencia del tema. Lo más importante es la sección del encabezado. Aquí es donde el archivo CSS le dice a WordPress que se trata de un tema hijo con un tema padre específico, y proporciona otra información básica.
- function.php: determina el orden en el que se cargan las hojas de estilo de los temas padre e hijo de WordPress. Para que los cambios del tema hijo anulen las instrucciones del tema padre, el navegador debe cargar la hoja de estilo del tema hijo de WordPress después de la hoja de estilo del tema padre.
- screenshot.png es opcional, pero se recomienda reconocer directamente el tema hijo de WordPress en el backend de WordPress. WordPress mostrará automáticamente los archivos screenshot.png en el menú de temas de la plantilla correspondiente.
Si solo vas a hacer cambios menores en el tema, hay soluciones más sencillas como Simple Custom CSS Plugin o el personalizador integrado directamente en WordPress a partir de la versión 4.7.
Ventajas e inconvenientes del child theme de WordPress
Usar un tema hijo de WordPress tiene muchas ventajas. Sin embargo, también tiene algunos inconvenientes, por lo que debes sopesar si vale la pena crear un tema extra solo para implementar pequeños cambios en el CSS:
| Ventajas | Inconvenientes |
|---|---|
| Los cambios no se sobrescriben cuando se actualiza el tema principal. | La actualización de la plantilla original solo corrige las vulnerabilidades de seguridad en los archivos de plantilla que se encuentran en la carpeta de temas principales. Para los archivos de plantilla en la carpeta de temas hijo de WordPress, estas lagunas permanecen. |
| Un tema hijo de WordPress ofrece más libertad en comparación con las posibilidades del backend de WordPress. Por ejemplo, se puede adaptar el diseño y la estructura del sitio web o ampliar el tema con ciertas funciones. | Puede haber una pérdida de rendimiento, porque el navegador carga dos hojas de estilo simultáneamente. |
| Los ajustes extensos de CSS se mantienen claros en comparación con el personalizador de WordPress en el style.css. | |
| Los temas hijo de WordPress son ideales para principiantes que quieran conocer mejor WordPress. Si se produce un error, siempre se puede volver al tema padre. | |
| Los temas hijo de WordPress permiten acelerar el trabajo de desarrollo. |
- Almacena, comparte y edita datos fácilmente
- Respaldado y altamente seguro
- Sincroniza con todos tus dispositivos
Cómo crear un tema hijo en WordPress: instrucciones
Después de explicar las funciones, aquí te contamos cómo crear un tema hijo funcional en WordPress:
Paso 1: crear la carpeta del child theme de WordPress:
Usando un cliente FTP, como FileZilla, conéctate a tu servidor y navega dentro de la instalación de WordPress hasta la siguiente carpeta:
tu ruta hacia la instalación de wordpress/wp-content/themes/Allí creas una carpeta para el tema hijo de WordPress. Conviene usar el nombre del tema padre añadiendo “-child” al final.
Paso 2: crear una hoja de estilo para el tema hijo de WordPress
Crea un archivo style.css y añade la siguiente información en el área del encabezado usando un editor de texto:
/*
Nombre del tema: [Nombre del tema padre] Child
URI del tema: [http://example.de/parent-theme/]
Descripción: [Nombre del tema padre] Tema hijo
Autor: [Tu nombre]
URI del autor: [El URL de tu sitio web]
Plantilla: [Nombre de la carpeta del tema padre]
Versión: 1.0.0
Dominio de texto: [Nombre del tema padre] -child
*/Sustituye los marcadores de posición entre corchetes con tus especificaciones. No tienes que introducir todos los elementos; solo es obligatorio añadir los siguientes dos datos para que los temas hijo de WordPress funcionen:
- Nombre del tema: todos los temas necesitan un nombre, y lo mismo pasa con el tema hijo de WordPress. Este nombre debe ser único y no debe compartirse con ningún otro tema de la instalación de WordPress.
- Plantilla: con esta información, WordPress sabe que es un tema hijo del tema padre especificado.
Cuando el archivo esté listo, usa el cliente FTP para subirlo a la carpeta del tema hijo de WordPress.
Paso 3: cargar la hoja de estilo correctamente en function.php
En el mejor de los casos, el tema padre ya contiene la instrucción de cargar la hoja de estilo del tema hijo de WordPress. Pero no todas las plantillas de diseño hacen esto. Por lo tanto, es importante echar un vistazo a las funciones del tema padre. Se aplica uno de los tres escenarios siguientes:
- El tema padre ya carga las dos hojas de estilo. En este caso, no hay que hacer nada con el tema hijo de WordPress.
- Si el tema padre carga su propia hoja de estilo a través de get_template_directory() o get_template_directory_uri(), el tema hijo de Wordpress solo tiene que cargar su propia hoja de estilo con el nombre correspondiente de la hoja de estilo del tema padre como parámetro en function.php.
- Si el tema padre carga su propia hoja de estilo a través de get_stylesheet_directory() o get_stylsheet_directory_uri(), el tema hijo de WordPress tiene que cargar ambas hojas de estilo en function.php. Asegúrate de usar exactamente el nombre de la hoja de estilo del tema padre.
Si se produce el segundo caso, function.php tiene este aspecto:
<!--?php</codesnippet-->
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'Nombre de la hoja de estilo del tema padre'),
wp_get_theme()-> get('Version') // Solo funciona si el elemento version también se especifica en el área del encabezado de la hoja de estilo
);
}
?>Si el tema hijo de WordPress debe cargar ambas hojas de estilo a través de function.php, el código tiene este aspecto:
<!--?php</codesnippet-->
function child_theme_styles() {
wp_enqueue_style( 'Nombre de la hoja de estilo del tema padre', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle 'Nombre de la hoja de estilo del tema padre'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>Introduce function.php en el archivo style.css en la carpeta del child theme en WordPress.
Opcionalmente, también puedes colocar un archivo de imagen con el nombre de archivo screenshot.png en la carpeta de temas hijos de WordPress. WordPress muestra esta imagen en el fondo del tema, para que puedas asignar mejor la plantilla.
Paso 4: activar el tema hijo de WordPress
Después de crear el tema hijo de WordPress, actívalo como cualquier otro tema en el backend de WordPress. Para hacerlo, simplemente entra en el backend y selecciona el tema hijo en Diseño > Temas.
Si ya has hecho ajustes en el tema padre a través del personalizador de WordPress, estos cambios se perderán al activar el tema hijo de WordPress. Con el plugin Customizer Export/Import, puedes exportar los ajustes del personalizador y, luego, importarlos de nuevo.
Ahora el tema hijo de WordPress está completamente listo para su uso. Si quieres realizar cambios en otros archivos de plantillas, copia el archivo del tema principal y guárdalo en la carpeta del tema secundario. La ruta debe corresponder exactamente con la ruta del tema principal. El archivo del tema principal es automáticamente sobrescrito por el archivo de la carpeta de temas hijo de WordPress.
Con el alojamiento WordPress de IONOS, tendrás una plataforma de alojamiento especialmente optimizada para WordPress que te facilitará la creación de tu propio sitio web en WordPress.