Diego Cabai | Blog

A veces tenemos un theme para nuestro Blog instalado en Wordpress que satisface todas nuestras necesidades. Pero qué pasa si el theme tiene 2 sidebars, por ejemplo, como el mio y queremos escribir una página pero con una sola sidebar? O bien queremos escribir una página con otra sidebar diferente a las 2 por default que vienen con el theme? O mejor aún, qué pasa si queremos generar una página sin sidebars para poder aprovechar todo el ancho del theme? Algunos themes ya vienen con esta opción para poder hacerlo, pero otros no. La idea de este artículo es contarte cómo tenes que hacer para generar un nuevo template para poder utilizarlo en las páginas. En este caso vamos con el mas sencillo, SIN sidebars.

Cuando generamos una nueva página en Wordpress vamos al menú Write » Page (Escribir » Página). Si hacemos scroll hacia abajo vamos a encontrar una sección donde podemos cambiar el template que vamos a usar para dicha página. Si tu theme no viene con templates adicionales vas a tener como opciones el Default Template y el de Archives. Ahora bien, cómo agrego un template adicional?

Para esto vamos a necesitar generar un nuevo archivo .php y ponerlo en el mismo path o en la misma ruta donde se encuentran el resto de los archivos del theme que tengo instalado. En este caso vamos a generar un archivo en blanco llamado nosidebar-page.php. Lo subimos a nuestro hosting por medio del cliente de FTP que mas prefieras y luego lo podremos editar directamente desde Wordpress.
Una vez subido vamos a Design » Theme Editor. A la derecha debería estar listado nuestro archivo recien copiado "nosidebar-page.php". En caso de no estar revisá el haberlo copiado correctamente a la ruta de tu theme, en caso de si estar hacele un click para poder ver su contenido.

Obviamente está en blanco, así que primero miremos el contenido del default template actual. Por lo general, el archivo que maneja el formato de las páginas se llama page.php, esto puede variar, si varía te recomiendo que revises la documentación de tu theme a ver qué archivo utiliza para las páginas. Una vez abierto vamos a ver el contenido y parte de ese contenido hay que mantenerlo, ya que nosotros queremos hacer un template sin sidebars, pero si queremos mantener el resto del formato.

Hay ciertas secciones que se pueden identificar:

<?php get_header(); ?> : Esto hace que cargue el header de nuestro theme, un punto a mantener si queremos que lo contenga nuestra página.
Luego de este punto viene el contenido de la página, a veces llamado por un <div>, también es el momento de cargar el menú, etc.
<?php get_sidebar(); ?> : Esto es lo que llama a que cargue las sidebars.
<?php get_footer(); ?> : Esto hace que cargue el pie de página del theme.

Creo que está claro, debemos copiar todo el contenido excepto el que llama a la o las sidebars y pegarlo en nuestro archivo nosidebar-page.php. Ojo, ahí no termina todo, así que seguí los pasos que vienen porque es importante.
Una vez que pegaste ese código, arriba de la línea que llama el header debes pegar algo como lo siguiente:

<?php
/*
Template Name: NO Sidebar
*/
?>

Eso le va a dar el nombre al template cuando lo seleccionemos en el menú de escritura. Es importante que definas un nombre sino no aparecerá como disponible.

Hasta acá todo bien, ya tenemos un template que podemos seleccionar y que no tiene sidebars, el problema es que el texto que uno escribe todavía se mantiene con el formato del template anterior, quiero decir, que si el ancho de este texto son 500px eso no lo cambiamos y vamos a tener todo vacío donde estaban las sidebars. Eso es porque debemos definir un nuevo código de formato para una página mas ancha.

Supongamos, nuestra sección de texto es de 500px, una sidebar de 100px y una segunda sidebar de 150px, eso haría una sección SIN sidebars de 750px disponibles para texto. Muy bien, recordemos este valor porque lo vamos a necesitar.

Busquemos en nuestro nosidebar-page.php la sección donde llama al texto, generalmente <?php the_content(); ?>. Sobre esta sección debe haber una línea con el título de la entrada y superior debe haber una línea que le da el formato al texto, generalmente <div class="nombreclase">. Ese nombre de clase lo necesitamos, pero por ahora cambiémoslo a nosidebar.

Guardamos lo realizado hasta ahora y vamos a editar el archivo style.css desde el mismo Editor de Theme. Acá buscamos la clase con el nombre que tenía mas arriba. Es clase va a definir varias cosas, pero principalmente el formato general del texto, ya sea tamaño de espacio a escribir, fuente, color, links, etc.

Hacemos un Find y buscamos .nombreclase (reemplazando con el nombre de la clase correcta). Copiamos y pegamos las líneas que encontremos con .nombreclase y las pegamos todas abajo de todo del archivo style.css, luego cambiamos el .nombreclase por .nosidebar.  Ya tenemos la clase definida, ahora podemos modificarla, en alguno de los parámetros de la clase vas a encontrar:

.nombreclase {width:500px;……}

Esos son los 500px que mencionábamos mas arriba, bueno ese es el valor que habría que cambiar por 750px. Luego de modificarlo, guardamos y vamos a generar una nueva página con el nuevo template sin sidebars y todo el espacio entero.

Si algún formato no te agrada o no te gusta como queda, todo eso se controla desde la clase .nosidebar que acabás de generar y eso es totalmente modificable así que sentite libre de hacerlo a tu gusto. Cualquier duda o consulta dejame un comentario.

Compártelo

 Email |  Imprimir |  PDF