Generando un nuevo Template para una Página de WordPress
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.
Artículos relacionados:
Te gustó el Artículo? Compártelo!
April 25th, 2008 - 20:39
Muy Bueno, lo voy a provar che.
April 26th, 2008 - 12:32
@Radix: Gracias por el comentario, fijate, si tenes algun problema no dudes en consultarme ya que no se si me expresé bien en todo :P
Saludos!
May 6th, 2008 - 19:22
no me va. tengo el tema fluid yellow pero no me quita el sidebar
May 7th, 2008 - 00:38
@enrique: Ahí me bajé el template fluid yellow black y tu problema pasa porque la sidebar la está cargando desde el footer.php y no desde page.php.
Si editas el footer.php vas a encontrar un código así:
<div id="sidebars">
<?php get_sidebar(); ?>
<?php get_sidebar_right(); ?>
</div>
Ahí es cuando hace el llamado que comento mas arriba que por lo general se hace en la page.php para que no sea tan restrictivo. Para modificar en tu template habría que hacer un cambio mas grande. Tendrías que analizar el código de header.php page.php y footer.php, ponerlo junto y probar sacar la parte de la sidebar del footer y llevarlo a la page.php pero también tendrías que modificar otros archivos. Sino podrías probar hacer un segundo archivo footer2.php, sacar el llamado al footer de page.php y hacer un include para llamar a este nuevo footer sin la sidebar obviamente.
Lamento no poder ayudarte mas, pero como dije en el post, depende mucho de la programación de cada template.
Saludos!
May 8th, 2008 - 19:42
creo que cambiare de tema….
Gracia de todas formas
May 14th, 2008 - 14:26
Hola diego, cambie de tema para intentar crear un template nuevo sin sidebar, y el tema que elegí no viene en la creación de la página la opción de crear un template.
He instalado este tema:
Green Lily 1.0 por Ashish sharma
Gracias
May 14th, 2008 - 17:40
@Enrique, no tengo problemas en ayudarte con el template que elijas pero no puedo encontrar ese que nombras, ni por nombre ni por autor. Si me pasas un link podré ayudarte ya que necesito bajarlo. Gracias
Saludos!
May 14th, 2008 - 19:35
http://www.wordpressthemesbox.com/2008/05/03/green-lily/
Ahí va… gracias…
May 14th, 2008 - 21:54
Estuve leyendo tu post, estoy intentando cambiar de template para una pagina en wordpress 2.5 pero no encuentro el page template que decis, te juro que ando buscando un plugin hace rato y no puedo creer que wordpress lo tiene por defecto, pero no me sale en mi administracion, que puede ser?
May 15th, 2008 - 11:15
@Enrique, bueno ahí lo revisé…jaja este template también tiene sus cositas, ahí van los pasos para que generes un template de página sin sidebar:
1. Generate una copia del archivo page.php con nombre nosidebar.php
2. Editalo y borrá la siguiente línea:
<?php include (TEMPLATEPATH . ‘/sidebar.php’); ?>
Acá ya estaría sin sidebar, pero todavía no la podés usar como template y el ancho del texto seguiría igual. Para modificar esto:
3. Acá seguís el paso que comento mas arriba, justo antes de que llama al header con la línea <?php get_header(); ?> tenes que pegar el siguiente código:
4. Por último hay que modificar el diseño CSS para poder escribir en toda la pantalla y no solo en el tamaño que tiene hoy. Primero editamos nuevamente nuestro nosidebar.php y donde dice <div id="blog"> tenes que cambiarlo por <div id="blognosid"> .
5. Guardas ese archivo y ahora vamos a editar el style.css. Ahí tenes que copiar la línea #blog completa, la podes pegar justo debajo y cambiar el nombre blog por blognosid. Luego el parámetro de 588px lo podes agrandar hasta 930px que es el total del diseño, ahí poné el tamaño que vos quieras. Andá probando hasta que alguno te guste como quede.
Espero te sirva, cualquier duda o problema avisame. Probá a ver si te aparece como template disponible en una nueva página, si no aparece subí el punto 3 mas arriba.
Saludos!
May 15th, 2008 - 11:16
@Nicolas, si te referís a cambiar el template de una sóla página, se puede hacer desde WordPress pero hay que editar el diseño que hayas elegido. Si lo que queres es hacer una página sin sidebars como comento en el artículo, decime qué template estas usando y te doy una mano para ver si lo podemos hacer.
Saludos!
May 15th, 2008 - 16:14
Vale al final lo he conseguido, me ha costado un poquito, partiendo de la base que no tengo ni idea de programacion, pero al final tengo la página sin sidebar…
Pero me sale esto: Fatal error: Call to undefined function get_footer2
De que pude ser…
Por cierto miles de gracias….
May 16th, 2008 - 02:31
@Enrique, me alegra que “parte” te haya funcionado. Ahora por el error que me decís que aparece es raro porque nunca llama a esa función a menos que se te haya escapado un 2 después de footer. Fijate que exista la siguiente línea:
<?php get_footer(); ?>
Si tiene un 2 en algún lado sacalo ya que debe quedar como la original y como la puse ahí arriba. Avisame si era eso.
Saludos!
May 16th, 2008 - 07:04
ya pero si quito el 2 no me llama al footer2 que creé.
Al final lo que hice es crearme un footer 2 y quitar la llamada al sidebar.
Instalé el tema Yellow fluid de:http://www.skinpress.com/
May 27th, 2008 - 06:45
Efectivamente al fina era una llamada al footer que no tenia porque estar ahí…
Gracias, miles
May 27th, 2008 - 10:40
@Enrique, justo me había bajado ayer el theme para revisarlo. Que bueno que hayas podido encontrar la línea que estaba de mas. Cualquier cosa avisame.
Saludos!
June 10th, 2008 - 10:08
Hola Diego, que tal. Consulta, hay algun programita editor que te ayude a editar y ver como va quedando tu template de wordpress, que no sea el dreamweaver, para los que no entendemos del desarrollo web. Gracias y espero tus comentarios.
June 11th, 2008 - 20:28
Una pregunta Diego, en el tema yellow fluid como puedo hacer para que en los post en la barra inferior del post, al lado de Read More, me ponga los comentarios que tiene el post?
June 11th, 2008 - 21:14
@Diego Alonso, te cuento que como editor yo uso Dreamweaver, tendría que investigar si hay otro un poco mas didáctico. Lo que si te recomiendo es que montes una máquina Virtual con una implementación de WordPress idéntica a la productiva y ahí juegues y realices cambios a tu theme/instalación. Luego si está ok, los pasas a producción. Por lo menos así lo hago y por ahora vengo bastante bien… salvo algún que otro error :P jaja
@Enrique, antes que nada hay dos yellow fluid en skinpress, uno yellow fluid y otro fluid yellow. Bajé el yellow fluid, así que te cuento de ese. Tendrías que agregar antes del <a class="readmore" de index.php lo siguiente:
<?php comments_popup_link(‘(0) Comments’, ‘(1) Comment’, ‘(%) Comments’); ?>
Obviamente cambiá las palabras Comments por Comentarios o lo que quieras ponerle. Si le queres dar algo de formato agregale antes <span class="lalala"> y al final </span>. Después hacé una clase .lalala en tu style.css y ponele el formato que quieras.
Cualquier duda avisame.
Saludos!
June 12th, 2008 - 17:38
Nada, da error…. Parse error: syntax error, unexpected T_STRING
June 12th, 2008 - 18:54
mmm me parece que es por el formato de las comillas como en otros posts, asegurate de pegarlo primero en un notepad y que las comillas individuales sea
'y no ´. Tal vez sea por eso el problema.Saludos!
June 30th, 2008 - 20:18
diego al final lo arreglé,pero tenia una pregunta; sabes si hay algun plugin que te indique cuantos comentarios nuevos hay cuando te logueas en el sitio?
gracias por todo
July 30th, 2008 - 11:47
tengo un problema, no aparece la opcion page template en mi en write–>page q mencionas en el principio del post, no se a que se deba, si alguien me puede hechar una mano se lo agradeceria ampliamente.
August 1st, 2008 - 01:40
@Max, qué versión de WordPress tenes instalada? Gracias
Saludos!
August 2nd, 2008 - 20:19
Thank you
August 14th, 2008 - 17:35
Hola muy buen post!
pero sabes que tengo un problema ojala me puedas ayudar resulta que instale wordpress 2.5 en ingles con el tema Default funciona todo bien, pero instale el tema BlueSensation y resulta que al crear una nueva pagina o al administrarla no me aparece la opcion de Page Template, creo el archivo php en blanco copie lo de page….etc segui todos los pasos y nada, no aparece la opcion, que puedo hacer???
espero tu respuesta y muchas gracias.
August 20th, 2008 - 11:34
muy bueno, me voy a fijar si me funciona a mi tambien, para quien le interese les comento que encontre un blogs con nuevas oportunidades de ganar dinero por internet. Muy bueno!
August 26th, 2008 - 01:37
@Gabo, me extraña lo que dices porque el ítem para seleccionar el Page Template está dentro del menú de administración del blog. Vos me decís que ese template estás cambiando o el template del blog que se muestra a los usuarios? Porque si ni siquiera aparece el botón para cambiar el page template entonces hay un problema, ahora si el botón aparece pero no aparece la página que creaste entonces puede deberse a que no estas creando los archivos donde corresponde pero si para el theme default. Revisa si los archivos lo estas creando en el root del theme que quieres usar.
Saludos!
October 7th, 2008 - 13:44
Hola!! estoy usando mandigo como theme y no se como hacer para crear una plantilla sin sidebars!! me podeis ayudar?
October 7th, 2008 - 13:45
Estoy usando Mandigo y no se com hacerlo
October 27th, 2008 - 02:20
@valentoni, pasame el link de donde descargar ese theme para poder revisarlo y te digo como hacer una página sin sidebar, pero básicamente tenes que buscar la línea que nombre mas arriba y borrarla.
Saludos!
November 28th, 2008 - 23:19
Si desdehoy consigo que mi foro de wordpress ocupe todo el ancho, te lo deberé a ti, eres un genio!! muy bueno este artículo con el cual además nos animas (almenos a mi) a experimentar probar co nuestros blogs con más confianza.
Muchas gracias por tu ayuda.
November 30th, 2008 - 21:06
@Pablo, me alegro que te animes a hacer esas modificaciones. Cualquier duda sabes que estoy acá.
Saludos!
February 10th, 2009 - 14:27
saludos diego es un buen post, tengo en mi pagina un template como lo explica y todo va bien el unico problema es que cuando se abre la pagina en el explorador en el top se escribe la llamada al template ej.
como puedo solucionar esto.
November 2nd, 2010 - 16:57
Hola, muchas gracias por tu artículo, me sirvió, para hacer los cambios que necesitaba.
Juan Schiller
7ventas.com
February 1st, 2012 - 14:40
Hola, tengo mi web alojada en wordpress y en ella se pueden consultar diferentes viajes que tengo guardados en la bd (en la tabla Viajes). Sabes si puedo mostrar cada Viaje como un post para que los usuarios puedan comentar en cada uno y así tener cada viaje con sus tags,etc…
Muchas gracias!