Diferentes páginas en WordPress

Diferentes páginas en WordPress

Publicado por Helmer Galvis0 Comentarios
miércoles, marzo 30, 2011

Muchas veces en nuestros proyectos basados en WordPress, necesitamos crear una página diferente a la que viene por defecto en el sistema, es decir, los post ordenados cronológicamente y una columna a la derecha o izquierda y en algunos casos dos columnas.

Lo que vamos a hacer es una página-plantilla que ocupe todo el ancho de nuestra web sin que muestre la barra lateral de widgets y podamos aprovechar para poner lo que queramos, un foro, una imagen de todo el ancho de la web, algún tipo de slider, etc.

Imaginemos que cuando alguién entre en nuestra web la página de inicio sea una presentación de nuestros productos o servicios, sin columnas, utilizando todo el ancho de la página.

En este ejemplo vemos a la izquierda, el blog normal y en la derecha una página modificada sin columnas y mostrando lo que queramos, que es lo que vamos a intentar hacer.

Debemos seguir unos cuantos pasos para lograr nuestro objetivo. Claro está que hay plantillas que traen por defecto diferentes estilos de página. Este ejemplo sería para una plantilla que estes haciendo o una que uses y no tenga estas funcionalidades.

1. Duplicamos por ejemplo el archivo pages.php de nuestro theme o plantilla, lo nombramos como queramos, por ejemplo, pages-full.php y procedemos a abrirlo con nuestro editor de textos preferido. Ejemplo

2. Lo primero que hacemos es ponerle el nombre a la plantilla, hay que añadir este código al inicio de todo:

<?php
/*
Template Name: El nombre que queramos poner

*/
?>

3. Ubicamos las etiquetas que contienen la información del post o página en este caso están entre “<div id=”content”> y </content>” Aquí es donde está contenida la información que publicamos en la página cuando la creamos en nuestro editor de wordpress.  Ahora lo que hacemos es cambiar la eqtiqueta del div, por ejemplo le ponemos “<div id=”content full-width”>”

4. Eliminamos la función PHP que llama a la barra de widgets o sidebar, sería está línea o líneas si tenemos más de un sidebar

<?php get_sidebar(); ?>

Nos quedará algo así, ejemplo

5. Ahora vamos a nuestra hoja de estilos CSS y para indicarle que nuestra etiqueta “” será del ancho total de nuestra web. Abrimos nuestro CSS e incluimos está nueva orden:

#full-width {
width: 940px;
margin: 5px;
}

6. Guardamos nuestros ficheros, el CSS modificado y el nuevo  pages-full.php y los subimos a la carpeta de nuestro theme o plantilla.

7. Ahora vamos a nuestra sección de páginas en WordPress, añadimos una nueva y en la zona de  “Atributos de la página” tenemos un desplegable con las plantillas que vamos creando o ya vengan por defecto, en este caso tendría que estar la que acabamos de crear con su nombre correspondiente, la seleccionamos, procedemos a editar nuestra página y cuando la publiquemos tendremos algo así:

Todo el contenido aprovechando el máximo ancho de la web sin el sidebar que viene normalmente.

Espero que sea de utilidad, además esta es una base para hacer volar tu imaginación y crear páginas totalmente personalizadas y sacarle todo el potencial a WordPress como sistema de gestión de portales.

Cualquier duda, exponla en los comentarios!