Pensemos sin embargo en los sites clásicos “corporativos”, donde una empresa se presenta y donde se construyen páginas estáticas que siguen todas un patrón reconocible, pero que disponen, a la vez, de distintos elementos comparadas una a una (cambios en la posición de la columna lateral, en la creación de columnas de contenido o respecto a imágenes estratégicamente alojadas, etc).

WordPress, siguiendo la estela de estos sites más clásicos y corporativos (o más “creativos”, puesto que un diseñador o un colectivo podría dar un uso similar a su web, “página a página”), ofrece la posibilidad de asignar a cada página publicada (o bien por conjuntos) lo que viene a ser llamado un template personalizado.

El template personalizado lo podemos aplicar a grupos de páginas. Por ejemplo, las que tengan que ver con la introducción (introduccion.php), las que tengan que ver con una explicación más detallada (explicacion.php) y las que tengan que ver con horarios, resumen, contacto e información legal (informaciones.php).

Una web organizada de este modo nunca usaría posts, sino páginas maquetadas de tres formas distintas según su contenido.

Es al ir a publicar una página que, si hemos añadido los archivos especiales que aquí os poníamos como ejemplo (introduccion.php, explicacion.php, informaciones.php), podremos elegir cuál vamos a asignar al contenido recién escrito.

Vamos hoy a mostrar cómo crear un template de página para aquellos de nosotros que nos hemos topado con la necesidad de darle este tipo de uso a WordPress. Recordemos para empezar que tendremos que tener un mapa del web que habrá que reflejar en nuestro menú (vamos a escribir sobre ello en breve en TodoWP).

Recordemos también que reservamos para más tarde otro artículo que dedicaremos al aspecto del diseño (CSS y HTML), porque hoy aquí nos vamos a focalizar en el funcionamiento de los templates de página, con lo que el diseño y la estructura usados seran casuales y minimalistas.

Siguiendo nuestro ejemplo, vamos a tomar introduccion.php como primer template personalizado a crear.

Nos haremos con Notepad++, un excelente editor de texto, y crearemos un nuevo archivo. Lo guardaremos con el nombre introduccion.php junto al resto de archivos de nuestro tema en uso.

Empezaremos a escribir en él:

<?php
/*
Template Name: Introducción
*/
?>

Lo que pongamos aquí será encontrado cuando, al ir a publicar una página, busquemos entre los templates personalizados disponibles a escoger en nuestro editor. Le podemos dar el nombre que queramos. Aquí, siguiendo con el ejemplo, lo que estamos creando es una template para un par de páginas o tres que usaremos para describir nuestra empresa y que el usuario encontrará en primer lugar.

Seguimos ahora con el PHP de WordPress y el HTML que nos convenga. Esto ya es un trabajo de desarrollo y diseño, de modo que vamos a mostrar un ejemplo mínimo:

<?php
/*
Template Name: Introducción
*/
?>

<?php get_header(); ?>

	<div id="container">

		<div id="contenido-principal">

		<?php
		if (have_posts()) :
		while (have_posts()) :
		the_post();
		?>

		<div id="titulo">
		<h3><?php the_title(); ?></h3>
		</div>

		<div id="tetxo">
		<?php the_content(); ?>
		</div>

		<?php
		endwhile;
		endif;
		?>

		</div>

		<div id="barra-lateral">
		<?php get_sidebar(); ?>
		</div>

	</div>

<?php get_footer(); ?>

Los elementos que hemos incluido son la llamada al header de nuestro site, que convoca las hojas de estilo y el encabezado (logo, gráficos, etc) y que es constante, un container general, una “div” para el título de la página, una para el texto, otra para la barra lateral y la llamada al pie de página, que también se mantiene constante.

Ahora tocaría el trabajo de diseñador: abrir nuestro style.css y reflejar ahí estos elementos, para darles forma:

#container{
	font-family:georgia;
	font-size:14px;
	color:#999;
	min-height:600px;
}

#contenido-principal{
	width:60%;
	float:left;
}

#titulo h3{
	color:#333;
}

#texto{
	padding: 20px;
	margin-bottom:60px;
}

#barra-lateral{
	width:40%;
	float:left;
	min-height:600px
}

Estos estilos que damos aquí son bastante arbitrarios, en artículos posteriores intentaremos crear un ejemplo más “realista”.

Ahora sería el momento de crear los otros dos tipos de template personalizado: explicacion.php e informaciones.php.

Puesto que lo que queremos es que sean distintos para dar algo de variedad a nuestro site, tendríamos que añadir HTML y CSS “fresco”: más divs, múltiples parrafos, imágenes, llamadas especiales a la base de datos para la barra lateral, etc.

La existencia de los campos personalizados por un lado, y de los widgets por otro, nos va perfectamente en estos casos: en cada template personalizado tendríamos espacios de distinto tipo y forma.

Esperamos haberos introducido esta posibilidad de usar WordPress como un CMS más tradicional. No dudéis en comentar, y estad atentos a los artículos relacionados que ofreceremos próximamente.

Empecemos por el principio:

1- Typebased

Limpio y eficaz tema, con varias opciones en la administración: widgets, espacio para publicidad, cinco esquemas de color para escoger… La administración estará en inglés, pero vale mucho la pena. En la demo podéis echar un vistazo a cómo se estructura, lo bien que se entiende el diseño y el uso que hace de la tipografía.

2- Bueno

Otro template de la factoría WooThemes (cuyos temas son normalmente de pago), que yo he bajado sin dudar para estudiarlo y reservarlo para algún proyecto que requiera tan sólo algunos arreglos extra. “Bueno” es un tema extraordinariamente bien estructurado, limpio y directo para propiciar una buena lectura. Para olvidarse de todo y simplemente escribir en tu blog. Como siempre, unos arreglos en el CSS (para cambiar la imagen de fondo por ejemplo) nos pueden venir muy bien si queremos otro esquema de color. Mirad aquí la demo.

3- Compositio

Para mí, un buen tema por antonomasia. Fresco, sencillo y completo. En DesignDisease, la factoría en cuestión, podréis encontrar muchas otras perlas gratuitas.

4- Magazeen

Presentado en exclusiva para Smashing Magazine y realizado por un grupo de diseñadores especialmente para la ocasión, Magazeen nos irá perfecto para empezar un site con el enfoque de revista online, una idea que siempre es muy atractiva cuando tenemos un proyecto de escala considerable.
La demo está aquí.

5- Color Paper Theme

Para los que os gusten las texturas y el detalle, Color Paper Theme puede ser una muy buena opción. Está ofrecido en Free Themes Layout, desde donde os lo podéis bajar (está en la segunda página de la lista) y encontrar algunos otros temas, aunque éste para mí es de los mejores. Demo aquí.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

El tener separados estos tres archivos, que tratan los distintos espacios gráficos y funcionales del blog (encabezado, pie de página, barra lateral…), nos servirá para tenerlos bien accesibles cuando necesitemos editar alguno de ellos.

Ahora bien, si los tres tags señalados son usualmente suficientes, a veces necesitamos incluir archivos de template especiales, con un nombre único, puesto por nosotros. Por ejemplo: un script de Google Ads que debería aparecer en los archivos y el template de artículo, pero no en el índice.

Para incluír templates especiales, PHP dispone de una fórmula que podemos usar allí donde queramos :

<?php include( TEMPLATEPATH . '/nombre-del-template-a-incluir.php' ); ?>

Sin embargo, si estamos en pleno proceso de elaboración de un site complejo, existe una forma más memorable que nos permite distinguir entre templates a incluir. Es la siguiente (funciona a partir de WP 2.7):

<?php get_header('header-cine'); ?>

<?php get_sidebar('sidebar-cine'); ?>

<?php get_footer('footer-cine'); ?>

Imaginando un site que hable sobre cine y teatro, nos podría interesar tener un header especial en el apartado de teatro, y otro distinto en el de cine. Podríamos incluso querer header, sidebar y footers distintos en cada sección del site.

Para jugar con esta posibilidad, podremos añadir “tags condicionales”, como aquí :

<?php

if ( is_category('Cine') ) {

get_footer('footer-cine');

} elseif ( in_category('Cine') ) {

get_footer('footer-cine');

} else {

get_footer();

}

?>

Si el usuario llegara a un post de la categoría “Cine”, o a un archivo de la misma, el footer que mostraremos es el que se llame footer-cine.php, y, si es cualquier otra página de nuestro site en la que el internauta aterriza, tendremos el footer normal.

En Blog and Web reseñaron hace tiempo este Videotutorial para instalar una plantilla en Blogger, con las instrucciones precisas para poder tener el aspecto deseado en tu blog. El vídeo pertenece a una web (Tutoriales.de) que ya no actualiza pero en la que todavía se puede encontrar mucha información interesante.