Crear un sencillo tema hijo usando Twenty Eleven

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Una de las primeras cosas que he noté cuando empecé a usar WordPress fué el buen uso que hace del mantra de los desarrolladores, “Separación de áreas”. En el mundo de la programación, quieres que cada componente dependa de otros componentes lo mínimo posible; esto hace que cada componente sea más reusable. Un ejemplo perfecto de esto en WordPress son los temas. Estos permiten separar completamente el diseño del contenido. Podemos cambiar el tema, y el contenido permanece inalterado. WordPress hace algo similar en la forma en la que podemos construir basándonos en un tema preexistente. En lugar de modificar un tema existente (y arriesgarnos a perder los cambios en la próxima actualización), podemos crear un tema hijo, que separa nuestros cambios del tema padre. En este tutorial, te mostraré cómo crear un sencillo tema hijo.

¿Qué es un tema hijo?

Según el Códice de WordPress:

En esencia, lo que significa esto es que podemos construir basándonos en un tema padre sin modificar sus archivos. Podemos cambiar el CSS, añadir tipos de entradas personalizadas, o construir nuestro nuevo conjunto de funciones. Este es también el método recomendado para crear un tema basado en otro.

Además de los temas hijo, existen otras dos formas para crear un tema que esté basado en otro. La primera consiste en modificar simplemente ese tema. Sin embargo, si hacemos esto y el tema se actualiza, perderemos todos nuestros cambios. La segunda forma consiste en copiar ese tema en otra carpeta y partir de ese tema. No perderíamos el tema (suponiendo que lo hayamos renombrado adecuadamente), pero tendríamos duplicados de todos los archivos, incluso aquellos que no modifiquemos.

“Un tema hijo de WordPress es un tema que hereda la funcionalidad de otro tema, llamado tema padre, y que te permite modificar, o añadir a la funcionalidad de ese tema padre.”

En este tutorial, estaremos modificando el último tema predeterminado (al menos en la versión 3.2), el tema Twenty Eleven

El tema Twenty Eleven de WordPress

Paso 1. Configuración/Archivos requeridos

Lo primero que queremos hacer después de actualizar WordPress a la versión 3.2 o descargar e instalar el tema Twenty Eleven es crear nuestro propio directorio para el tema hijo. En /wp-content/themes/ crea el directorio twentyeleven-child. Ahora podemos empezar a añadir archivos a nuestro tema hijo.

Style.css

Para la creación de un tema hijo sólo se requiere un archivo: style.css. Aquí es donde declararemos nuestro tema, además de indicarle a WordPress que se trata del tema hijo de otro tema. Crea un archivo style.css en la carpeta twentyeleven-child y añade las siguientes líneas:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme 
Author:         Your Name
Author URI:     http: //your-site.com/
Template:       twentyeleven
Version:        0.1.0
*/

Gran parte de la anterior información es lo que mismo que encontraría en cualquier otro tema: su nombre, enlace, los créditos de autor, y la versión. Sin embargo, también existe una línea para Template. Aquí es donde le indicas a WordPress qué tema debería usar como tema padre. Debe ser el nombre del directorio de este último, y es sensible a las mayúsculas y las minúsculas.

Algo a destacar antes de empezar a añadir nuestro propio CSS personalizado: el archivo style.css de nuestro tema hijo sobreescribirá completamente al del padre. Por tanto, tras la declaración de la información del tema, nuestra primera línea debería importar el CSS del tema padre:

1	@import url("../twentyeleven/style.css");

Ahora estamos listos para modificar el CSS del tema padre. Aunque nosotros vamos a hacer aquí algunos cambios simples, pero si tú quieres hacer ediciones más avanzadas te sugiero que uses Firefox con Firebug o Google Chrome Developer Tools para ayudarte. ¡Son realmente útiles! Por ahora, añade las siguientes líneas a tu archivo style.css, bajo la línea @import:

a{ color: #254655; }

body{
background: #727D82;
}

header#branding{
background: #29305C;
color: #B3BDC1;
}

header#branding h1, header#branding h2, header#branding a{ color: #B3BDC1; }

#respond{ background: #E7DFD6; }

Estas líneas cambiarán el color del fondo y de la fuente del cuerpo de la página, la cabecera, y las cajas de los comentarios. Tú, por supuesto, puedes jugar tanto como quieras :-)

Esto es lo que tenemos hasta ahora…

Paso 2. Functions.php

Si tuviese que calificar los archivos del tema por orden de importancia, pondría a style.css e index.php empatados en el primer lugar ya que los necesitas para ejecutar un tema. En el segundo lugar colocaría la archivo functions.php. El archivo functions.php es aquel en el que añades funcionalidades personalizadas para tu tema: entradas personalizadas, soporte para los menús y para imágenes en miniatura, sidebars extra, y modificaciones para el bucle, entre otras cosas.

Aunque functions.php no es necesario para un tema hijo (recuerda, style.css es el único archivo requerido), esta es la mejor forma de ensuciarte las manos para añadir tu propia funcionalidad. Y a diferencia de style.css, que sobreescribe el archivo style.css del tema padre, el archivo functions.php de nuestro tema hijo se carga antes que el del padre. Vamos a crear un área de widget para el header y sobreescribiremos una de las funciones integradas en el tema Twenty Eleven.

Primero, añadiremos el área para el widget. Crea tu archivo functions.php y añade el siguiente código:

<?php
register_sidebar( array(
	'name' => __( 'Header Widget', 'twentyeleven-child' ),
	'id' => 'header-widget',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget' => "</div>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );
?>

Esto registrará el área del widget que añadiremos al header en el siguiente paso.

Ahora sobreescribiremos una de las funciones integradas en el tema Twenty Eleven. Los creadores del tema Twenty Eleven hicieron que fuese muy fácil para los desarrolladores de temas hijo sobreescribir sus funciones, ya que estas primero comprueban si ya existe una función con el mismo nombre. Echa un vistazo al ejemplo en twentyeleven/functions.php que vamos a estar modificando:

if ( ! function_exists( 'twentyeleven_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 * Create your own twentyeleven_posted_on to override in a child theme
 *
 * @since Twenty Eleven 1.0
 */
function twentyeleven_posted_on() {
	printf( __( '<span class="sep">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),
		esc_url( get_permalink() ),
		esc_attr( get_the_time() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
		sprintf( esc_attr__( 'View all posts by %s', 'twentyeleven' ), get_the_author() ),
		esc_html( get_the_author() )
	);
}
endif;

Observa cómo la primera línea comprueba primero si ya existe una función con el nombre twentyeleven_posted_on(). Al colocar una función con ese nombre en el archivo functions.php de nuestro tema hijo, sobreescribiremos la función del tema padre.

Nota para los desarrolladores de temas: Si te quieres que tu tema le ponga las cosas más fáciles a los desarrolladores de temas hijo (‘plugable’), deberías seguir las pautas del tema Twenty Eleven ¡y asegurarte también de que no exista ya una función con el mismo nombre para cada una de tus funciones personalizadas!

La función imprime una línea bajo el título de la entrada con la fecha y la información del autor oculta. Cambiaremos esta línea un poco usando la misma llamada de función. Añade el siguiente código a tu archivo functions.php:

function twentyeleven_posted_on() {
	$link= esc_url( get_permalink() );
	$title= esc_attr( get_the_title() ); 
	$time= esc_attr( get_the_time() );
	$dateGMT= esc_attr( get_the_date( 'c' ) );
	$date= esc_html( get_the_date() );
	$authorURL= esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
	$author= esc_html( get_the_author() );
	
	echo ('<span class="sep">Posted on</span> <a href="'.$link.'" title="'.$title.'" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>'.$date.' at '. $time.'</time></a> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="'.$authorURL.'" title="'.$author.'" rel="author">'.$author.'</a></span>');

}

Lo primero que hicimos fue poner todos los valores que estamos usando en variables. Esta es una preferencia personal propia ya que siento que el código es un poco más sencillo de leer. Como puedes ver, aquí no hemos cambiado demasiado. Primero, mostramos la hora así como la fecha. Después, descubrimos la linea ‘por’ que estaba oculta, de manera que la gente pueda ver el enlace a las otras entradas del autor.

Estos son nuestros nuevos datos publicados.

De nuevo, aunque no hicimos nada revolucionario, fuimos capaces de demostrar cómo sobreescribir una función del tema personalizado [adecuadamente codificada]. Ahora, ¡pasemos a las plantillas de archivo en si!

Paso 3. Archivos de plantilla

Lo último que quiero cubrir aquí son los archivos de plantilla para el tema hijo. Quizá queramos modificar la cabecera del sitio, o el bucle de las entradas individuales, e incluso añadir una página de archivo. Esto y mucho más es posible usando temas hijo. Basta con nombrar el archivo con el mismo nombre que el que tenga el archivo que queremos sobreescribir en el tema padre. Estaremos modificando la cabecera y crearemos una nueva plantilla de página.

Primero crearemos la cabecera. Crea un archivo header.php, copia el código de twentyeleven/header.php y pégalo en el archivo header.php que acabamos de crear. Una vez hecho esto, vamos a reemplazar las líneas 104 y 109 (<?php get_search_form(); ?>) con la siguiente llamada de función:

1	<?php techild_header_widget(); ?>

Ahora añadiremos el siguiente código a nuestro archivo functions.php:

function techild_header_widget(){
	if ( ! dynamic_sidebar( 'header-widget' ) ) :
		get_search_form();
	endif;
}

Este código hará que si existe algún widget en el área de widgets de la cabecera, los mostraremos, de no ser así, mostraremos la barra de búsqueda. Por último, necesitaremos un poco de CSS para hacer que nuestra cabecera sea amigable para los widgets. Añade esto a nuestro archivo style.css:

header#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}

Esto aplicará al widget un estilo similar al que usa la barra de navegación, pero ten cuidado. Este método no es a prueba de balas. Sólo es un ejemplo para mostrar los archivos de plantilla en los temas hijo. Aquí tienes nuestro resultado:

Nuestro widget de cabecera

A continuación, crearemos una nueva plantilla de página. Crea el archivo twentyeleven-child/page-welcome.php y copia el código de la plantilla page.php del tema Twenty Eleven (twentyeleven/page.php). Lo primero que necesitamos hacer es modificar los comentarios en la parte superior para hacerle saber a WordPress que se trata de una plantilla de página. Sustituye los comentarios en la parte superior con esto:

1	/**
2	* Template Name: Welcome
3	*/

Cuando creemos una nueva página, seremos capaces de usar la plantilla “Welcome”. Lo que vamos a hacer ahora es añadir un mensaje personalizado en la parte superior de la página. Tu archivo completo debería tener el siguiente aspecto:

<?php
/**
 * Template Name: Welcome
 */

get_header(); ?>

		<div id="primary">
			<div class="welcome">
				<p>Welcome to my website! I'm running a modification of WordPress' Twenty Eleven theme. Feel free to poke around a bit!</p>
			</div>
			<div id="content" role="main">

				<?php the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php comments_template( '', true ); ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

Observa que entre los divs #primary y #content, hemos añadido un div con la clase welcome. Vayamos a nuestro archivo style.css y añadamos algo de CSS para él:

.welcome{
margin: 15px 60px;
background: #fbffd8;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}

Nuestro resultado final debería parecerse a esto:

La plantilla de página de bienvenida

Debería mencionar que la mejor forma de hacer esto consiste en añadir un campo personalizado a esa plantilla, pero como dije anteriormente, quería mantener las cosas simples de manera que pudiésemos centrarnos en la creación del tema hijo.

Conclusión

Aunque la entrada me llevaría un poco más para relistar el código en cada uno de los archivos, he incluído el tema hijo para que lo descargues. Obviamente, sólo hemos arañado la superficie en lo que se refiere a la creación de temas hijo; mi objetivo era proporcionarte una idea clara sobre cómo crear una página según cómo WordPress gestiona cada tipo de archivo. Una cosa a tener en cuenta es que cuando referenciemos imágenes u otros archivos de nuestro tema hijo, necesitamos usar get_stylesheet_directory_uri() en oposición a get_template_directory_uri() ya que este último enlazará al tema padre.

Recuerda, puedes crear un tema hijo a partir de cualquier tema de WordPress. Sin embargo, también existen frameworks de temas por ahí a partir de los que podemos crear temas hijo bastante elaborados. Algunos de los más populares son Carrington, Thematic, and Thesis. Cada uno de ellos tiene una curva de aprendizaje, ¡pero son muy potentes!