Quizá una de las primeras cosas que solemos hacer nada más instalar nuestro Wordpress es añadirle un tema o diseño gráfico que se ajuste a nuestros fines y gustos. Pero siempre será necesario realizar una serie de ajustes o cambios para que éste se adecue verdaderamente a la imagen de nuestra organización. Es en este momento cuando debemos crear un tema hijo o child theme para poder realizar estos ajustes.
La pregunta que todos nos hemos hecho llegado este momento es si es necesario crear un tema hijo o no. En el caso de que no se vaya a hacer ninguna modificación de la apariencia del tema no será necesario, pero esto se da en pocas ocasiones. Si vamos a realizar cambios ya sea en los css o en las plantillas, dos son las razones de peso por las que debemos crear un tema hijo:
- Un tema, aunque sea gratuito y de código libre, es la obra de un autor la cual debe ser respetada. Si queremos hacer cambios en ese código debemos reflejar dichos cambios y citar la autoría del código fuente, lo cual se consigue mediante la creación de un tema hijo.
- En el caso de que el tema gráfico sufra una actualización, todos los cambios que hayamos hemos hecho en el código fuente se perderán, por lo que si queremos seguir conservando dichos cambios, éstos se deberán realizar en el tema hijo.
El primer paso que debemos realizar es crearnos una carpeta dentro del directorio themes de nuestra distribución de WordPress (midominio.com > wp-content > themes) con el nombre de nuestro tema, mi_tema_hijo. Para ello utilizaremos cualquier cliente ftp o el gestor de archivos de nuestro hosting.
Dentro de la carpeta de nuestro tema hijo debe haber dos archivos, uno llamado style.css y otro functions.php. El archivo style.css contendrá la información relativa a la tema padre y los estilos modificados o creados por nosotros, mientras que functions.php contendrá el código necesario para que se carguen los estilos del tema padre y establece que nuestro style.css sobreescriba los anteriores en el caso de que así sea necesario.
Archivo style.css
El archivo style.css contiene la información vital del tema hijo, como puede ser el nombre del mismo y los datos relativos al tema padre. Así mismo contendrá todos aquellos estilos que hayamos introducido los cuales sobreescribirán los del tema padre. Este archivo debe contener al menos la siguiente información:
/*
Theme Name: mi_tema_hijo
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: tema_padre
Version: 0.1
*/
La línea Template: tema_padre es propia de los temas hijo y es la que vincula nuestro tema con su padre y hace que se carguen todas sus plantillas y estilos. Es importante destacar que en esta línea, tema_padre hace referencia al nombre de la carpeta que contiene el tema padre y no su nombre, el cual puede diferir en algunas ocasiones.
Archivo functions.php
El archivo functions.php tiene como misión establecer la secuencia en la que se cargan los diferentes estilos del sitio y lo cual tiene una importancia superlativa si queremos que verdaderamente se apliquen los cambios que estemos realizando en el tema. Si vamos a crear un tema hijo y no vamos a utilizar el archivo style.css para realizar cambios, este archivo debe contener el siguiente código:
<?php
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' );
}
?>
Pero esta circunstancia no se suele dar si hemos llegado a tener la necesidad de crear un tema hijo. Cuando, además de la información que ya hemos mencionado anteriormente, queremos introducir estilos personalizados en este archivo, el código que introduzcamos en functions.php debe ser algo más complejo:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
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' );
?>
Aún así, en algunas ocasiones, los temas establecen varias capas de estilos y dependencias entre ellos que son difíciles de emular por los temas hijo. En el caso de que esto suceda y el resultado no sea del deseado ya que haya algún estilo del tema padre que no se nos esté cargando, podemos probar con el siguiente código:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);
function child_enqueue_styles() {
$parent_style = 'parent-style';
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 ) );
}
if ( get_stylesheet() !== get_template() ) {
add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
update_option( 'theme_mods_' . get_template(), $value );
return $old_value; // prevent update to child theme mods
}, 10, 2 );
add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
return get_option( 'theme_mods_' . get_template(), $default );
} );
}
Visto todo lo anterior, todavía puede ser que no se creen todas las dependencias necesarias para clonar el tema padre y cargar sus estilos. Es estos casos puede sernos de utilidad visitar la sección About dentro del menú apariencia de nuestro panel de administrador y acceder a la sección de cómo crear un tema hijo.
Añadir nuevo comentario