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.
