SummArg | Cursos y recursos para webmasters

Clase 11: La plantilla de página

Las páginas en WordPress se utilizan para publicar contenido estático, fuera del ordenamiento de las entradas, y soportan una estructura de páginas y subpáginas, con un ilimitado número de hijos. También soportan los templates personalizados que nos sirven para aplicar variaciones en el layout con muy pocas modificaciones a nuestras plantillas. Es importante saber que no aparecen en los feeds del sitio.

En la clase 8 y la clase 8 anexo, dedicadas a las sidebars, jugamos un poco con la plantilla page.php y le dejamos la siguiente estructura.

Esa página es nuestra plantilla por defecto según la última actualización al theme. Por eso vamos a aprender a agregar páginas personalizadas y veamos que opciones tenemos para ello.

Por último, vale la pena destacar que las plantillas de páginas soportan comentarios y si bien en esta clase no vamos a colocarlos, pueden seguir los mismos pasos que realizamos en la clase 10 para agregarlos.

Páginas personalizadas

Por un lado podemos optar por colocar desde el nombre del archivo la directiva para que se aplique la plantilla a una determinada página ya sea por su ID o por su slug.

  • page-{id}.php
  • page-{slug}.php

De este modo, por ejemplo, si colocamos una plantilla con nombre page-10.php, WordPress intentará aplicar dicha plantilla automáticamente a la página con ID 10. Lo negativo de este método es que no permite aplicar una plantilla en particular a varias páginas de forma práctica, pero suele resultar bastante práctico para aplicar un estilo determinado a una única página.

Para crear una plantilla que luego se pueda aplicar a diferentes páginas según le indiquemos desde el editor, primero debemos dar al archivo un nombre descriptivo. Nosotros vamos a crear una plantilla de página en donde el contenido abarcará 3/4 del layout y el restante lo usaremos para una sidebar. También removeremos la sidebar horizontal, siendo nuestro objetivo lograr la siguiente estructura.

Primer paso: El archivo

Creamos un archivo llamado page-unasidebar.php. No es obligatorio colocar el prefijo page- en el nombre del archivo, simplemente lo hacemos para ser lo mas descriptivos posibles. Para evitar conflictos con el nombre, recuerden revisar el cuadro de Template Hierarchy y verán cuales son los nombres que WordPress se reserva para plantillas en particular. Colocamos en su encabezado el siguiente código comentado dentro de llaves de php.

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

Segundo paso: El código

La mayoría del código ya lo tenemos, podemos copiar el contenido anterior de page.php, eliminar las dos sidebars extras y modificar el ID del contenedor del texto de #wrapper-dos a #wrapper que ya tiene las medidas necesarias.

<?php get_header(); ?>
 <div id="wrapper">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
 </div><!-- end of wrapper-->
 <?php get_sidebar(); get_footer(); ?>

Tercer paso: Aplicar la plantilla a una página existente

Generar una plantilla por si misma no se refleja en ningún cambio en nuestro WordPress hasta que no asignamos la plantilla a una página existente. Para esto, nos dirigimos a nuestro panel de control y a una página existente le añadimos la plantilla. Guardamos la página al finalizar el cambio.

Páginas y subpáginas

Como mencionamos al principio, las páginas pueden tener subpáginas para ayudarnos a organizar mejor nuestra información. Para generar una subpágina, desde nuestro editor asignamos una página superior a nuestra página actual.

Guardamos y vamos a la sección de Páginas en el escritorio. Allí observaremos como se refleja el sistema de jerarquías de página según la página superior asignada en cada caso.

Por último, en la sección de Atributos de Página, cuando estamos en el editor de la página, podemos ver un casillero llamado Orden. El mismo soporta valores numéricos para asignar un orden a las páginas que tengan la misma jerarquía. Ya que las páginas no se destacan por su orden cronológico, como las entradas, es muy útil poder asignar mediante este método el orden en el que deseamos que se muestren nuestras páginas.

Mostrar las subpáginas que tiene una página

La ubicación mas utilizada para mostrar subpáginas generalmente es en algún sitio de la sidebar, por lo que vamos a colocar un condicional para nuestra sidebar.php. En el mismo necesitamos comprobar si existen hijos de la página actual, caso contrario no debe mostrarse nada. Si el condicional resulta afirmativo (es una página y no una entrada o una categoría, y además resulta tener hijos), entonces se mostrará el título “Subpáginas” y desplegamos debajo el resultado de $children, en donde usamos la función wp_list_pages. El código debe ir luego de abrir el div #sidebar.

<?php
 $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
 if ($children) { ?>
 <div class="widget">
 <h3>Subp&aacute;ginas</h3>
 <ul class="subpages">
 <?php echo $children; ?>
 </ul>
 </div>
 <?php } ?>

Agregaremos un poco de estilo para que se muestre un poco mas prolijo.

ul.subpages {
 margin:0;
 margin-left:10px;
 }
.subpages li {
 list-style-type: circle;
 margin: 4px 0 4px 10px;
 text-indent:-5px;
 border-top: 1px solid #f9f9f9;
 padding: 2px 0 0 5px;;
 }
ul.subpages li ul {
 margin:0;
 }
.subpages li a {
 text-decoration:none;
 }

Realizamos un cambio en la plantilla de estilos en donde eliminamos los elementos #sidebar ul y #sidebar li, y creamos la clase .sidebarNews en nuestra lista de noticias en la Sidebar.

<h3>Ultimas noticias</h3>
 <ul class="sidebarNews">
 <?php query_posts('category_name=Blog&posts_per_page=4' );
 while ( have_posts() ) : the_post(); ?>
 <li><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a> <br /> Por <?php the_author(); ?></li>
 <?php endwhile; wp_reset_query(); ?>
 </ul>

La nueva clase en el CSS.

ul.sidebarNews {
 list-style-type:none;
 margin-bottom:20px;
 }
ul.sidebarNews li {
 padding: 5px 10px;
 border-bottom: 1px solid #7b7b7b;
 color: #7b7b7b;
 }
ul.sidebarNews li a{
 text-decoration:none;
 color: #7b7b7b;
 }

De ese modo podemos dar estilos diferentes a los listados que aparezcan dentro de la sidebar.

Añadimos varios elementos hijos y nietos a la página con la que iniciamos las pruebas de esta clase y obtuvimos el siguiente resultado.

Pueden ver el ejercicio en funcionamiento en el demo online.

Plantillas de página con query_posts

Nada nos impide que usemos las plantillas de página para colocar consultas con query_posts, tal como vimos en la clase 5, y en esta oportunidad vamos a ver como crear una página en donde mostrar una categoría de productos de un modo diferente al que usaremos luego en las plantillas de categoría.

Primero generamos una categoría llamada “Productos”. Antes de subir contenidos a dicha categoría, vamos a establecer en el functions.php el tamaño de la miniatura, para no tener que regenerarlas luego.

add_image_size( 'producto', 195,195,true );

Subimos los artículos que necesitemos para ir probando nuestro theme y recordamos marcar como destacadas las imágenes que asignemos. Creamos un archivo llamado page-misproductos.php y en su interior colocaremos el código que explicaremos por partes.

Primero el encabezado del template.

<?php
 /*
 Template Name: Mis productos
 */
 get_header(); ?>

Abrimos un contenedor con id #wrapper-full y colocamos el primer bucle, destinado a buscar el contenido de la página y tomar de él el título y el contenido. Cerramos el bucle.

<div id="wrapper-full">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h1><?php the_title(); ?></h1>
 <div class="descripcion"><?php the_content(); ?></div>
 <?php endwhile; endif;

Luego arrancamos con el bucle para mostrar los productos, en donde indicamos que queremos mostrar de a 8 productos y añadimos la variable de paginación (leer más sobre paginación y query_posts aquí). El producto estará en un contenedor con la clase .producto y mostramos primero la imagen y luego el nombre del producto con su link.

query_posts(
 array (
 'category_name' => 'productos',
 'showposts' => 8,
 'paged' => get_query_var('paged')
 )
 );
 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="producto">
 <?php the_post_thumbnail('producto'); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 </div>
 <?php endwhile; endif; ?>

Finalmente colocamos los links de navegación, cerramos el contenedor y llamamos al footer.

<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
 </div><!-- end of wrapper-full -->
 <?php get_footer(); ?>

Ahora vamos a darle un poco de estilo a la página. Primero definimos las propiedades que va a tener el contenedor de la página, que ocupa todo el ancho, el título y la descripción.

#wrapper-full {
 width:920px;
 float:left;
 margin: 20px;
 }
#wrapper-full h1 {
 text-align:center;
 padding: 20px 0 5px 0;
 border-bottom: 3px solid #7ec5ff;
 font-size:32px;
 }
.descripcion p{
 text-align:center;
 font-size:13px;
 line-height:18px;
 color: #7ec5ff;
 font-weight:bold;
 }
.descripcion {
 margin: 0 0 10px 0;
 }

Ahora daremos forma a los contenedores de producto añadiendo color de fondo, de bordes, sombras y un tamaño específico para el título.

.producto {
 float:left;
 width: 205px;
 height:225px;
 padding: 5px;
 margin: 6px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid /*#2d435a; #7ec5ff;*/ #e9e9e9;
 background-color: #f4f4f4;
 -webkit-box-shadow: 0px 0px 1px 1px #999;
 box-shadow: 0px 0px 1px 1px #999;
 }
.producto img {
 border: 1px solid #b4b4b4;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
.producto h2 {
 font-size:14px;
 text-align:center;
 line-height:22px;
 font-weight:bold;
 }
.producto h2 a {
 color: #999;
 }

Finalmente damos estilo a la paginación para que aparezca siempre abajo.

.navigation {
 width: 920px;
 margin:20px 0;
 height:20px;
 display:block;
 float:left;
 }

El resultado será el siguiente.

Encontrarán el ejercicio en nuestro demo online.

Pueden descargar el theme completo desde aquí: themeTaller11 (886)

 

Dejar un comentario

  1. Gran tutorial!! Espero ansioso los siguientes capítulos

  2. Pablo

    Es genial el tutorial! espero los proximos capitulos!

  3. Increible nekko, increible!! Tengo una pregunta, queria saber como podemos implementar una especie de panel del theme, es decir, lo típico para que el usuario ponga sus redes sociales, en lugar de que tengan que tocar el codigo, no se si me explico y no se si eso va en algun capitulo futuro del curso 😀

    Saludos

  4. Marcia

    Es el mejor tutorial que encontré! vengo buscando hace muchísimo y la verdad que sólo con éste logre lo que necesitaba! MUCHISIMAS gracias!!!

  5. @Adrian_gcia

    Genial, gracias por preparar un taller tan completo.
    Sigo sin que me funcione el slider, quizás sea problema de permisos, a ver si subiéndolo al servidor funciona.

    Esperando más…

  6. oye men excelente tutorial genial en vdd me ha servido mucho el unico inconveniente k tengo esk kree en mi menu una seccion k se llama BLOG y hay kiero k cargue todos los post k aya escrito pero no me carga nada no se si me falte algo o pork no me cargue todos los post juntos ya buske intente una y mil cosas pero sigo sin solucionar eso no se si te hizo falta algo en el tutorial porfavor urgente espero me puedas ayudar

  7. Diego

    Me parece muy buen tutorial y me gustaría saber para cuando tendreis listos los siguientes capitulos.
    Muchas gracias.
    Diego

  8. Chicho

    Muchas gracias por este gran tutorial, de grandísima utilidad, un punto de partida perfecto para empezar a trabajar seriamente con WP.

  9. HRChilpo

    Hola, muchas gracias por compartir este genial taller, es de los mejores cursos que he visto en internet, la forma que explicas y el echo de poner el codigo funcional como ejemplo, hacen de éste un exelente material, estare pendiente del siguiente material, te deseo mucho exito, salud y tiempo para seguir con este proyecto 😉

  10. Como han comentado otros usuarios, este taller es buenisismo y super practico, gracias por la aportación y espero ansioso el siguiente tema.

    Saludos

  11. Hebenmartz

    Me parece fabuloso que hasta esta altura del tutorial no hayan bajado la calidad. Sigan Así!!! – Muchas Gracias

  12. mangakami

    @Adrian_gcia: creo que el problema es con la ruta, por lo menos así lo resolví yo.
    el tutorial dice que llamas al jquery de ‘/wp-content/themes/themetaller/scripts/jquery-1.7.2.min.js’, intenta solo con ‘/scripts/jquery-1.7.2.min.js’ y ve como anda.

  13. Adriel

    Wow! no conocia esta serie de tutoriales!! muchas gracias, escribo aqui en el ultimo pero aun no veo ninguno, me voy directo al primero para alcanzar este ultimo post.

  14. Hebenmartz

    ¿Que pasa que hace 4 meses no se avanza con el resto de los tutoriales?

  15. Nekko

    Simplemente falta de tiempo. Ni bien pueda, volveré para terminar la serie.

  16. Nightrain

    muchas gracias por el tutorial!!

  17. Muchas gracias por el curso, es, de largo, el mejor que he visto. Estoy ansioso por que continues!

  18. Ezequiel

    Muy bueno y muchas gracias por ayudar a los que no conocen de estos temas y por hacerlo muy fácil y sencillo. De verdad gracias y por favor no dejes de terminar este fabuloso curso sería una lástima…

  19. Hola Nekko,
    Me gustaría poder darte algo de mi tiempo para que siguieras con el mejor tutorial WP que he visto hasta ahora en español. Si puedo hacer algo por ti, no dudes en ponerte en contacto. Un saludo.

  20. Hola excelente contenido esta guía me esta ayudando mucho a interiorizarme con wordpress. Espero que puedas finalizar el curso.
    Saludos.

  21. Estoy siguiendo este fantástico taller y solo puede decir que mil gracias!!! Es muy didáctico y está muy bien explicado.

    Estaré encantado de seguir con las siguientes clases!

    Un saludo

  22. fabar

    Gracias, es justo lo que estaba buscando. Ánimo con el resto del curso, cuando sigas lo leeré con ilusión.
    Saludos

  23. Fantástico tutorial. Sencillo y claro. Dan ganas de ponerse a crear temas. Enhorabuena

  24. hola solo se manejar html y un poco se php estoy utilizando xampp cuando corro el sitio web me sale el siguiente error en index.php Fatal error: Call to undefined function get_header() in C:\xampp\htdocs\a\wp-content\themes\themetaller\index.php on line 1 me salvarias la vida

  25. Hola Nekko, esta buenissimo el taller, me gusta como explicas, como vas mostrando paso a paso, los prints que soles usar, no es un copiar pegar o descargar y modificar, de esta forma logre aprender mucho con tu curso, espero a que tengas tiempo para poder terminar el taller para asi llevar a modo extendido, hasta ahora se ve buenissimo mi theme pero me gustaria poder trabajarlo lo maximo posible, un saludo desde Paraguay.

    Hugo

  26. excelente che, ojala tengas tiempo para seguir desarrolando el tut.
    Saludos y gracias por toda la data que brindas.

  27. Grande!!! al fin empiezo a comprender muchas cosas, espero que puedas disponer de tiempo y seguir abriéndonos los ojos.

    Gran tutorial, gracias.

  28. […] Clase 11: La plantilla de página […]

  29. Harry

    Excelente tutorial. Yo por mi parte inserte la imagen dentro de la etiqueta del link para que se pueda hacer clic en la imagen e ir al articulo de igual forma.

    <a href="” title=””>

Dejar un comentario