En WordPress un tema hijo es aquel que hereda todas las funcionalidades del tema padre y además nos va a permitir modificar o añadir nuevas funcionalidades sin necesidad de tocar el tema padre.
Crear un tema hijo es la forma más adecuada de modificar un tema de WordPress que no sea de tu propiedad ya que este podría actualizarse y perderíamos todos los cambios realizados. Es recomendable usar un tema hijo:
- Cuando el tema no haya sido creado por nosotros mismos para evitar que una actualización sobrescriba todos nuestros cambios.
- Y cuando estamos empezando a aprender sobre desarrollo de temas de WordPress.
Cómo se crea un tema hijo
Para crear un tema hijo nos ubicamos en el directorio wp-content/themes/ y vamos a crear una carpeta con el mismo nombre del tema padre y seguido de un sufijo child/hijo.
|
1 2 3 |
|- wp-content/themes/ |- mi-tema/ |- mi-tema-hijo/ |
El archivo más importante que necesitamos crear dentro del tema hijo es el fichero style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: Fusion Child Theme URI: https://blog.artegrafico.net Description: Fusion Theme for Wordpress Author: José Luis Rojo Sánchez Author URI: http://www.artegrafico.net Template: wordpress-fusion-theme Version: 1.0 License: MIT License License URI: https://opensource.org/licenses/MIT Tags: two-columns, right-sidebar Text Domain: wordpress-fusion-theme-child Updated: 2019-07-01 23:18:08 */ |
De un simple vistazo al fichero style.css podemos destacar lo siguiente:
- El nombre de mi tema padre es wordpress-fusion-theme
- El nombre de mi tema hijo es wordpress-fusion-theme-child
Por lo que es muy importante indicar que el valor de «Template» será el nombre del tema padre.
Una vez hecho esto podemos activar el tema hijo desde el menú de apariencias en el gestor de WordPress para comprobar que funciona correctamente y que hereda todas las características del tema padre.
El fichero functions
El fichero functions.php es otra parte fundamental en un tema hijo. Hemos visto anteriormente que el fichero style.css sobrescribe el fichero style.css del tema padre, mientras que la finalidad del fichero functions.php es incluir nuevas funcionalidades al fichero functions del tema padre.
Lo primero que se suele hacer en un tema hijo es incrustar una nueva hoja de estilos. Esta hoja de estilos del tema hijo la vamos a ubicar dentro del directorio assets/css/ para así tener todos los componentes de nuestro tema hijo bien organizados.
Veamos como podemos hacer desde el fichero functions del tema hijo que acabamos de crear:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php if ( !defined( 'ABSPATH' ) ) exit; // denied for direct access if ( !function_exists( 'setup_child_theme' ) ) { function setup_child_theme() { wp_enqueue_style( 'fusion-child', // handle trailingslashit( get_stylesheet_directory_uri() ) . '/assets/css/style.css', // source [ 'main' ] ); } } add_action( 'wp_enqueue_scripts', 'setup_child_theme', 10 ); |
El siguiente paso es añadir tantas funcionalidades al tema hijo como deseemos. Imaginemos que queremos cambiar o añadir un favicon al tema. En el mismo fichero functions vamos a agregar un nuevo hook que agrega contenido en la cabecera de la página (wp_head)
|
1 2 3 4 5 6 7 8 9 |
/** * favicon link */ if ( ! function_exists( 'favicon_link') ) { function favicon_link() { echo '<link rel="icon" type="image/png" sizes="192x192" href="'.get_stylesheet_directory_uri().'/assets/img/favicon/icon-192x192.png">'."\n"; } } add_action( 'wp_head', 'favicon_link' ); |
Incluyendo nuevos ficheros
Cuantas más modificaciones hagamos en el tema hijo, se nos creará la necesidad de agregar nuevos ficheros que contendrán nuevas funcionalidades.
Para ello vamos a usar la función get_stylesheet_directory() y la ruta donde está ubicado el fichero que necesitamos incluir.
Por lo que si por ejemplo queremos incluir cambios que van a afectar formulario de login podemos incluir un nuevo fichero para así tener todo mejor organizado.
|
1 |
require_once get_stylesheet_directory().'/inc/admin/login.php'; |
Internacionalización de un tema hijo
Al igual que el tema padre, el tema hijo también puede traducirse por lo que recuerda el nombre de la etiqueta Text Domain que incluimos anteriormente.
Para ello incluiremos el siguiente código a nuestro fichero functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * load_child_theme_textdomain */ if ( ! function_exists('artegrafico_load_plugin_textdomain')) { function artegrafico_load_plugin_textdomain() { load_child_theme_textdomain( 'wordpress-fusion-theme-child', // text-domain basename( dirname( __FILE__ ) ) . '/languages/' ); } } add_action( 'after_setup_theme', 'artegrafico_load_plugin_textdomain' ); |
