Crear un template de página personalizado

WordPress nos permite normalmente disponer de un blog en formato “tubular”: además de las páginas de archivo que nuestras categorías y etiquetas generarán, los resultados de búsqueda, y algunas páginas estáticas donde aplicar un formulario de contacto y el típico espacio “Sobre Nosotros”.

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.

Comentarios
  1. luchosar

    Excelente.
    Me pregunto:
    Puedo usar una pagina la cual le aplique tablas y dentro de estas tablas uno o dos loop?

    Escrito el29/03/2010
  2. Hola luchosar, lo más fácil sería usar un solo loop, y crear las tablas en el mismo editor. WP no está muy pensado para manejar tablas, o sea que siempre puedes buscar algún plugin que lo haga más fácil. Éste está muy bién, a ver si sacamos una reseña.

    Escrito el29/03/2010
  3. luchosar

    Ok, muchas gracias Ignacio.
    Ummmm, antes de conocer tu tutorial ya hace algunas semanas para la elaboracion de columnas, realice algunos experimentos en el index asi: en dreamweaver pegue el codigo del index deltema, borre el loop, y este lo pegue en 4 tablas llamando una categoria diferente cada loop…la pregunta es : es esto correcto? no se si me estoy saliendo del tema, de igual forma lo posteee en el foro http://www.forowp.org/temas/puedo-hacer-esto-en-wp/msg5261/#msg5261, aqui un ejemplo de lo que hice: http://www.luchosarmiento.com/wp7/

    Grcias Ignacio.

    Escrito el29/03/2010
  4. Hola! muy bueno el blog! me sirve mucho!

    Yo empecé a usar wp como cms para un sitio corporativo q estoy haciendo. La verdad que me fue muuy bien! Previamente habia trabajado con joomla y, si bien en algunos aspectos Joomla es un poco mas “amplio” que WordPress, si uno no le tiene miedo al código se puede personalizar wp tanto como nuestra imaginación nos permita!

    Felicitaciones por el tutorial!

    Escrito el28/04/2010
  5. Fran

    Como puedo poner una contraseña a una página personalizada??

    Escrito el09/04/2013
    • dc

      El primer error que me da es:
      Fatal error: Call to undefined function get_header() in …

      Escrito el17/01/2016

DEJA TU COMENTARIO