n este tutorial vamos a aprender a hacer modificaciones a cualquier tema sin necesidad de plugins. Para el ejemplo voy a trabajar con uno de los temas que viene por defecto en WordPress, pero sirve para trabajar con cualquier otro tema.
Hice un video también explicando todo esto en vivo.
Tabla de Contenidos
- Un poco de teoría, ¿qué es un tema hijo?
- Ahora si a la práctica, cómo crear un child theme
- Modificar el texto del footer en un tema WordPress
- Código fuente listo para trabajar
Un poco de teoría, ¿qué es un tema hijo?
Antes de ir a la práctica, es necesario algo de teoría, pero prometo que va a ser rápido. Este tipo de modificaciones se realizan con lo que se llama tema hijo o child theme.
Un tema hijo es un tema creado por nosotros, que hereda todas las características de su tema padre y en el caso de que se sobreescriba algo, tendrá prioridad lo del tema hijo.
Lo interesante de un tema hijo creado por nosotros, es que si se actualiza algo del tema padre, nuestras modificaciones seguirán intactas. Quizá tendremos que hacer algún ajuste, pero no perderemos todo como pasaría en el caso de modifiquemos directamente el tema padre del cual no tenemos control.
Ahora si a la práctica, cómo crear un child theme
Se requiere una carpeta, un archivo de hoja de estilos y un archivo php.
Crear la carpeta contenedora
La carpeta contendrá a todos nuestros archivos, por convención y para evitar confusiones, yo le suelo poner el nombre de la carpeta del tema padre + guión medio + la palaba «child». En el ejemplo quedaría twentynineteen-child.
Crear la hoja de estilos
Dentro de la carpeta creamos un archivo llamado style.css, el cual de forma obligatoria deberá tener un bloque de comentarios con algo de data, siendo lo más importante la línea “Template:” la que debe tener por valor el nombre de la carpeta del tema padre. Así WordPress sabe que nuestro tema hijo tiene relación con dicho tema.
/* Theme Name: Twenty Nineteen Child Theme URI: Author: Cesar Mansilla Author URI: https://www.cesarmansilla.online/ Description: Twenty Nineteen tema hijo personalizado Version: 1.0 License: GNU General Public License v2 or later Template: twentynineteen */
Crear el archivo PHP
Este es el último paso estrictamente necesario. Podríamos activar nuestro tema hijo pero veríamos que el sitio pierde todos los estilos, por ello es necesario indicarle a WordPress dónde están los estilos del tema padre.
Si todo está armado de forma estandar, las rutas del siguiente bloque de código les servirían, sino deberán ver adonde tienen almacenadas ustedes sus css.
<?php
function twentynineteen_enqueue_styles() {
// Tema padre
$parent_style = 'twentynineteen-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
// Tema hijo
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css', // Ruta
array( $parent_style ), // Dependencias (tema padre)
wp_get_theme()->get('Version') // Versión, la capturamos de forma dinámica
);
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_enqueue_styles' );
?>
Ahora si activamos nuestro tema hijo veremos que todo ha vuelto a la normalidad. ¿Todo esto para estar igual que al principio? Noo, es sólo la base necesaria para todo lo que se viene.
Modificar el texto del footer en un tema WordPress
Vamos a ver cómo cambiar el texto del footer de WordPress desde nuestro child theme. En mi caso dice “Orgullosamente impulsado por WordPress“.
Lo primero es detectar qué archivo contiene lo que queremos modificar, esto dependerá de cada caso, en el mio es el archivo footer.php, entonces copio el archivo tal cual a mi tema hijo respetando la ruta, en mi caso está en la carpeta principal, pero si en el tema padre se hubiera encontrado dentro de otra llamada “template-parts”, tengo que crear dicha carpeta también en la carpeta del tema hijo.
Una vez que tenemos el archivo en nuestro poder, modificamos lo que necesitemos, en nuestro caso es la línea:
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint"> <?php /* translators: %s: WordPress. */ printf( __( 'Proudly powered by %s.', 'twentynineteen' ), 'WordPress' ); ?> </a>
Lo cambio por:
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint"> <?php /* translators: %s: WordPress. */ printf( __( 'Hecho con <3 por %s.', 'Cesar Mansilla' ), 'WordPress' ); ?> </a>
Se que fué demasiado trabajo para un simple cambio de texto, pero la idea es que este artículo les sirva para tener las herramientas para modificar cualquier cosa de cualquier tema.
Código fuente listo para trabajar
https://gitlab.com/cesar-mansilla/wordpress/child-theme-base