Creando un child theme para Wordpress
Escrito por: Guillermo Garron
Fecha: 2015-01-01 10:00:35 00:00
Como crear temas hijos "Child themes" con wordpress.
Introducción
Wordpress es el software CMS más utilizado para desarrollar sitios web en el momento en que esto se escribe.
Con Wordpress se puede crear sitios muy complejos así como simples blogs, se puede personalizar cada pequeño aspecto con el uso de plugins o temas con funciones incorporadas.
Mucho de la personalización puede hacerse con temas o realizando cambios en ellos, pero si realizas cambios en los temas oficiales (bajados del sitio) y estos reciben una actualización tus cambios se perderán. Para evitar esto debes crear un Child Theme o tema hijo, que va a heredar todas las funciones y aspecto del padre, y puedes cambiar cualquiera de ellos.
Creando un Child Theme
Lo primero que requieres es encontrar un tema que te guste y desees modificar.
Considerando que el tema que crees va a heredar todo del padre, debes escoger inteligentemente, busca un tema con sólido soporte para SEO, buena semántica y mejor si es liviano y posee un buen código, de este modo los cimientos para tu nueva creación serán sólidos.
Una vez que hayas aprendido lo suficiente, podrás comenzar a crear tus temas usando frameworks populares tales como:
O puedes escoger uno con código abierto:
Para este tutorial, vamos a utilizar el nuevo tema oficial de Wordpress TwentyFifteen
Instala el tema padre
Si aún no hiciste eso, necesitas bajar e instalar el tema en el que vas a basar tu creación.
Primero ve a la sección de administración, y de Apariencia -> Temas y si aún no esta instalado, ve a "Añadir Nuevo" y busca por Twenty Fifteen e instálalo.
Crea el folder para el Child Theme con sus contenidos mínimos.
Lo primero que debes hacer es crear el folder the alojará tu nuevo tema.
Lo puedes hacer de diferentes formas, FTP y ssh son las más comunes, el cómo hacerlo no es parte del contenido de este tutorial, pero debe estar localizado en wp-content/themes/
. Una vez allí crea un folder twentyfifteen-child
, como que algo obvio ¿verdad?, pero vamos, continuemos.
Dentro de ese folder vamos a poner estos dos archivos:
- style.css
- functions.php
Cuando los tengamos en su lugar, vamos a agregar esto a style.css
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://the-url-where-theme/can-be-downloaded
Description: Twenty Fifteen Child Theme
Author: Your name
Author URI: http://your-website
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: responsive, blog
Text Domain: twenty-fifteen-child
*/
Puedes cambiar cualquiera de esas lineas de acuerdo a tus necesidades, pero la línea Template debe apuntar al folder del tema padre.
También vamos a crear el archivo functions.php
el cual dejaremos vacío por el momento.
Ahora vamos Apariencia -> Temas en la página de administración y activamos nuestro nuevo tema.
Si revisas la apariencia de tu sitio, te llevaras una fea sorpresa, podrás ver que no tienes en realidad ningún tema. Así que comencemos a trabajar.
Personalizando el child theme
Lo primero que tenemos que saber es como los archivos son manejados, cualquier archivo en el folder de tu tema hijo, reemplazará al archivo con el mismo nombre en el folder del padre, con una excepción, y este es functions.php
del cual su contenido será procesado primero que el archivo del mismo nombre en el folder del tema padre.
Importando el estilo del padre
Una de las primeras cosas que debemos hacer agregar algo de estilo a nuestro tema, y para no crear todo de cero (si quieres puedes hacerlo) vamos a importar el estilo del padre, para ello vamos a agregar unas lineas al archivo functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
?>
Con esto, el tema hijo, se verá exactamente igual al padre, y ahora podemos comenzar a hacer cambios para personalizarlo.
Cambia el tipo de letra del tema
En este ejemplo, vamos a cambiar el tipo de letra únicamente, para efectos de demostración de como funciona la personalización.
Para ello vamos a editar el archivo /wp-content/themes/twentyfifteen-child/style.css
y agregar las lineas:
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
font-family: 'Raleway', sans-serif;
}
El archivo ahora se ve así:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://the-url-where-theme/can-be-downloaded
Description: Twenty Fifteen Child Theme
Author: Guillermo Garron
Author URI: http://www.garron.me
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: responsive, blog
Text Domain: twenty-fifteen-child
*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
font-family: 'Raleway', sans-serif;
}
Con esas líneas lo que logramos es importar el tipo de letra Raleway de Google, y le decimos al navegador que utilice dicho tipo en lugar de Noto que es el tipo por defecto de TwentyFifteen.
Resumen
Hemos aprendido a personalizar un tema de Wordpress de un modo en que no se pierdan nuestros cambios cuando actualicemos el tema. Para lograrlo hemos tomado los siguientes pasos:
- Crear un Child Theme
- En un nuevo folder creamos dos archivos: style.css y functions.php
- En style.css se declaró el tema padre
- En functions.php se importo el estilo del padre
- Se agregaron nuestros cambios y personalizaciones al estilo del tema hijo.
Claro que solo cambiar el tipo de letra puede ser algo trivial, y puedes hacer cambios más elaborados, pero sirve para un ejemplo.