WordPress es la plataforma perfecta para aquellos usuarios que desean tener el control total de su web, ya que hace muy fácil su personalización. Si tienes algún conocimiento de HTML, CSS y/o PHP, no hay nada que no se pueda modificar. Aquí te enseñaré como crear un child theme en WordPress.
Es completamente normal que quieras adaptar el aspecto de tu web para que se adapte a tu empresa o a tu gusto personal, con tu logotipo y tus colores corporativos. Sin embargo, es posible que surja alguna duda… podrías estar haciéndolo mal.
Es asombroso la cantidad de usuarios, tanto profesionales como aficionados, que optan por editar el tema directamente. Lo cual significa que están modificando o añadiendo archivos en la carpeta del tema, sin tener en cuenta que esto les puede acarrear graves problemas.
El problema más importante que conlleva hacer esto es que todas las modificaciones se perderán en cuanto se actualice el tema. En consecuencia, los usuarios o bien decidirán no actualizar el tema (lo cual creará un problema en la seguridad de su web), o cuando lo actualicen, se encontraran con que han perdido todos los cambios que habían hecho.
Para evitar este problema lo ideal es crear un theme child o tema hijo.
Qué es un child theme?
Como es obvio, todo hijo tiene un padre. De la misma manera, todo theme child o tema hijo tendrá un parent child o tema padre.
Pero, ¿qué es un parent theme? Un parent theme es cualquier tema de WordPress al que se le cree un child theme. Cualquier tema de WordPress que incluya todos los archivos necesarios para que se considere un tema completo puede ser un tema padre.
La relación entre ellos es que el child theme depende por completo del parent theme para poder funcionar. Un child theme no es una identidad independiente, si no que modifica o añade archivos a un tema ya existente, utilizando los archivos del parent theme para funcionar.
Esto permite modificar estilos, funciones, diseño, plantillas y más. De hecho, se puede personalizar el parent theme hasta que sea irreconocible. Un child theme puede contener carpetas de imágenes, javascript, CSS, archivos de plantilla y otras muchas cosas. O puede no tener nada de esto. De hecho, como veremos un poco más adelante, un child theme solo necesita tres cosas para funcionar: una carpeta, una hoja de estilos y un archivo functions.php.
A pesar de esta relación de dependencia padre-hijo, desde el administrador de WordPress un child theme se comporta de la misma manera que cualquier otro tema. Se puede encontrar y activar en «Apariencia > Temas «, igual que haríamos con cualquier otro tema.
Entonces, ¿siempre que quieras modificar una web de WordPress deberías crear un Child Theme?
No, esto depende.
Si lo que se plantea es hacer pequeñas modificaciones, como cambios de color o usar alguna tipografía diferente, instalar un plugin para personalizar el CSS sería más que suficiente. Hoy en día muchos temas ofrecen la posibilidad de añadir código personalizado.
Sin embargo, si lo que vas a hacer son grandes cambios como un nuevo diseño, cambios en múltiples plantillas o cualquier otra cosa de gran magnitud, lo ideal es utilizar Child Themes.
Ventajas de usar Child Themes
Usar child themes ofrece numerosas ventajas:
- Acelera el tiempo de desarrollo. En lugar de tener que crear un tema completo desde cero, se puede construir sobre uno que ya existe, lo que permite un gran ahorro de tiempo de desarrollo.
- Todas las funcionalidades con un diseño personalizado. Se pueden aprovechar todas las funcionalidades de los parent themes, mientras que se personaliza totalmente el diseño.
- Permite la actualización del parent theme sin pérdidas. Se puede actualizar el parent theme sin perder su diseño personalizado.
- Fácilmente reversible. Si no estás satisfecho con el diseño personalizado, sencillamente tienes que desactivar el child theme y todo vuelve a ser como en el parent theme.
Configurar un Child Theme básico
Bien, ahora vamos a ver cómo crear un child theme paso a paso.
Como ya he dicho antes, un child theme necesita tres cosas: su propia carpeta, una hoja de estilo y un archivo functions.php.
¡Empecemos!
1. Crear una carpeta en wp-content/themes
Como cualquier otro tema, los child themes se encuentran en wp-content/themes de la instalación de tu WordPress. Por lo tanto, ves allí y crea una nueva carpeta para tu child theme.
Una buena práctica sería dar a la carpeta de tu theme el mismo nombre que el tema padre y añadir al final -child. Pero puedes utilizar cualquier nombre siempre y cuando no incluya espacios, ni acentos. Para este ejemplo cogeré el tema genérico de WordPress Twenty Fifteen y llamaré a mi carpeta twentyfifteen-hijo.
2. Crear una hoja de estilos
Ahora que tenemos nuestra carpeta, vamos a necesitar una hoja de estilo.
Hacer una hoja de estilo es fácil: basta con crear un nuevo archivo de texto y llamarlo style.css.
Sin embargo, con el fin de que funcione en nuestro Child Theme, vamos a tener que pegar el siguiente código al principio del archivo. Este código lo puedes encontrar en el Codex de WordPress:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
Esto es lo que significa cada línea :
- Theme name: Este es el nombre con el que se mostrará tu tema de WordPress en el administrador de WordPress.
- Theme URI: Esto apunta a la página web o a la demo del tema. Esto o el Author URI deben estar presentes para que el tema sea aceptado en el directorio de WordPress.
- Description: Esta es la descripción del tema. Se mostrará en el menú del tema cuando se haga clic en «Detalles del tema.»
- Author: Este es el nombre del autor.
- Author URI: Esta es la dirección de la web del autor.
- Template: Aquí va el nombre del tema padre, es decir, el nombre de su carpeta. Ten en cuenta que es case sensitive, es decir, que diferencia entre mayúsculas y minúsculas, y si no pones escribes en nombre correctamente recibirás un mensaje de error.
- Version: Esto muestra la versión de tu child theme. Por lo general, debe comenzar con 1.0.
- License: Esta es la licencia de tu child theme. Los temas que aparecen en el directorio de WordPress por lo general están publicados bajo una licencia GPL; deberían mantener la misma licencia que su tema padre.
- License URI: Esta es la dirección donde se explica la licencia de tu tema. Una vez más, seguir con lo que dice tu tema padre.
- Tags: Las etiquetas ayudan a otros a encontrar tu tema en el directorio de WordPress. Por lo tanto, si incluyes alguna etiqueta, asegúrate de que sea pertinente.
- Text domain: Esta parte se utiliza para hacer el tema traducible. Debe ajustarse al «slug» de tu tema.
De todo esto, lo realmente importante es Theme Name y Template. El resto solo es necesario si finalmente vas a publicar tu tema. En nuestro caso, la cabecera de nuestro CSS quedaría similar a esto:
/*
Theme Name: Twenty Fifteen Child Theme
Description: A child theme of the Twenty Fifteen default WordPress theme
Author: Nick Schäferhoff
Template: twentyfifteen
Version: 1.0.0
*/
3. Crear el archivo functions.php
El siguiente paso es crear el archivo functions.php . El archivo functions.php te permite cambiar y añadir funcionalidades a tu tema. Puede contener tanto las funciones de PHP y funciones nativas de WordPress. Y además, puedes crear tus propias funciones . La creación del archivo es tan fácil como crear una hoja de estilo. Todo lo que necesitas es un archivo de texto llamado functions.php.
En este archivo es donde vamos a indicar cuáles son las hojas de estilo que debe utilizar nuestro tema. debe heredar el child theme. Asegúrate de pegar esto al comienzo de su archivo functions.php
Aquí lo que estamos indicando es cuál es el CSS del tema padre que debe heredar el tema hijo. Y cuál es el CSS del tema hijo que se debe cargar. Además, con esta configuración nos aseguramos de que el CSS del tema hijo siempre domine sobre el del tema padre.
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // este es el CSS del tema padre
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' );
?>
Este código lo puedes encontrar en el Codex de WordPress.
Y ya está hecho. Añádelo a la carpeta de tu tema también.
4. Activar el theme child
Ahora tenemos que activar el tema. Ves a «Apariencia > Temas» en el administrador de WordPress y allí encontrarás tu child theme.
Si te fijas, al hacer clic en «Detalles del tema«, podrás ver el toda la información que hemos escrito en la cabecera de la hoja de estilo en el paso 2.
5. Extra: añade una imagen del tema
Si quieres ir un poco más allá, puedes añadir una imagen de tema. Esta imagen se mostrará en el menú del tema en WordPress y sustituirá a esos horribles cuadraditos.
Todo lo que necesitas hacer es crear un archivo PNG, llamado screenshot.png, ponlo en el raiz de la carpeta de tu tema ( en nuestro caso , twentyfifteen-hijo).
El tamaño recomendado es de 880 × 660 píxeles. Los formatos de imagen JPEG y GIF también funcionan, pero PNG es el recomendado.
Ahora puedes ir al navegador y comprobar cómo se ve tu web con el nuevo tema hijo.
Se ve bien, ¿verdad? ¡Pero… es exactamente igual que el tema padre!
No te preocupes, en otro post veremos cómo modificar el tema hijo para personalizar su diseño.
No hay comentarios para este post