SummArg | Cursos y recursos para webmasters

Clase 14: Paginación, breadcrumbs y página de error 404.php

Esta clase podría considerarse la última en lo que a detalles para construir un theme completo y funcional respecta. La paginación, los breadcrumbs (camino de migajas) y la página de error dan la terminación justa a nuestro proyecto. Claro que nos quedan cinco clases mas en donde abordaremos temas mas complejos, como los custom post types y la instalación de un framework que nos permita insertar opciones a nuestro theme. Por favor chequeen el temario y si consideran que quedó fuera algún tema importante, háganlo saber mediante un comentario o un mensaje privado desde nuestro formulario de contacto.

Comenzaremos reemplazando la paginación por defecto que WordPress nos ofrece (que consiste en links de anterior y siguiente) y colocaremos algo mas vistoso.

pagination

Actualmente el plugin mas utilizado para lograr esto es wp-pagenavi, pero en esta oportunidad insertaremos una paginación sin utilizar ningún plugin. Meramente creamos la función y la insertamos en nuestro functions.php

function wp_pagenavi() {
 global $wp_query, $wp_rewrite;
 $pages = '';
 $max = $wp_query->max_num_pages;
 if (!$current = get_query_var('paged')) $current = 1;
 $args['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
 $args['total'] = $max;
 $args['current'] = $current;
$total = 1;
 $args['mid_size'] = 3;
 $args['end_size'] = 1;
 $args['prev_text'] = '<img src="'.get_bloginfo('template_url').'/images/arrow-left.png" />';
 $args['next_text'] = '<img src="'.get_bloginfo('template_url').'/images/arrow-right.png" />';
if ($max > 1) echo '<div class="wp-pagenavi">';
 if ($total == 1 && $max > 1) $pages = '<span class="pages">P&aacute;gina ' . $current . ' de ' . $max . '</span>';
 echo $pages . paginate_links($args);
 if ($max > 1) echo '</div>';
 }

Las dos imágenes que mencionamos en los argumentos se entregan en el RAR que pueden descargar al pié del tutorial. La función lo que hace es obtener las cantidades máximas de páginas existentes en la query y darle un formato que contenga mas información y nos permita navegar salteando páginas si lo deseamos.

Ahora abrimos nuestro archive.php y reemplazamos estas líneas:

<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>

Por esta:

<div class="navigation"><?php wp_pagenavi(); ?></div>

Este reemplazo lo debemos ejecutar 5 veces en total. Luego continuamos con el estilo, en nuestro CSS colocamos:

.wp-pagenavi span.pages,
 .wp-pagenavi a.page,
 .wp-pagenavi .page-numbers,
 .wp-pagenavi span.extend,
 .wp-pagenavi a.first,
 .wp-pagenavi a.nextpostslink,
 .wp-pagenavi a.previouspostslink,
 .wp-pagenavi a.last {
 padding:5px;
 height:20px;
 margin-right:5px;
 background: #7ec5ff;
 color:white;
 border:1px solid #5995c6;
 text-decoration:none;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 display:block;
 float:left;
 }
 .wp-pagenavi span.current,
 .wp-pagenavi a:hover {
 padding:5px;
 height:20px;
 margin-right:5px;
 background:#fff;
 color:#7ec5ff;
 border:1px solid #5995c6;
 text-decoration:none;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 display:block;
 float:left;
 }
 .wp-pagenavi a.next,
 .wp-pagenavi a.prev {
 padding-top:1px 0;
 height:20px;
 margin-right:5px;
 background: #7ec5ff;
 color:white;
 border:1px solid #5995c6;
 text-decoration:none;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 display:block;
 float:left;
 }
 .wp-pagenavi img {
 height:20px;
 width:25px;
 margin-top:0px;
 }

Y con ello bastará.

Breadcrumbs, migajas de pan

breadcrumbs

El breadcrumb es útil para permitirle al usuario volver a una instancia anterior dentro de un árbol de categorías, o para saber en donde está y su relación con el inicio. Existen varios plugins para insertar breadcrumbs que ya vienen con estilos y son muy bonitos, pero nosotros crearemos la función en nuestro functions.php, ya que esto nos dará la oportunidad de personalizarlo si lo deseamos.

Básicamente lo que hace la función es preguntarse en donde se encuentra mediante conditional tags y en base a ello muestra diferentes funciones, ya sea el título, el árbol de categorías, la fecha, etc.

/*Breadcrumbs*/
function the_breadcrumbs() {
 echo '<p>';
 if (!is_front_page()) {
 echo '<a href="';
 echo get_option('home');
 echo '">';
 echo 'Inicio';
 echo "</a> &raquo; ";
 if (is_category() || is_single()) {
 the_category(' &raquo; ');
 if (is_single()) { echo the_title(); }
 } elseif (is_page()) { echo the_title(); }
 elseif (is_tag()) { single_tag_title(); }
 elseif (is_day()) { echo "Archivo de "; the_time('F jS, Y');}
 elseif (is_month()) { echo "Archivo de "; the_time('F, Y'); }
 elseif (is_year()) { echo "Archivo de "; the_time('Y'); }
 elseif (is_author()) { echo "Archivo de Autor"; }
 elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { echo "Archivo"; }
 elseif (is_search()) { echo "Resultados de b&uacute;squeda";}
 elseif (is_404()) { echo "Error 404";}
 }else{
 echo '<a href="';
 echo get_option('home');
 echo '">';
 echo 'Inicio';
 echo "</a>";
 }
 echo '</p>';
}
/*End of Breadcrumbs*/

Añadimos un estilo muy básico.

.breadcrumb {
width: 100%;
float:left;
display:block;
}
.breadcrumb p a {
text-decoration:none;
}
.breadcrumb p {
font-size:12px;
}

E insertamos la función en archive.php debajo del div id#wrapper y debajo de cada apertura de un div contenedor de modo de atender todos los condicionales:

<div class="breadcrumb"><?php the_breadcrumbs(); ?></div>

Es un código muy sencillo y no es del todo completo, pero sirve a nuestros propósitos. La función puede insertarse en la plantilla single.php, page.php, search.php, incluso en el home aunque no parece necesario. Es a criterio del desarrollador.

Finalmente necesitamos elaborar una página de error 404. Esta página se visualiza cuando el usuario solicita una URL inexistente, ya sea porque se cambió la URL adrede, o bien se borró dicha entrada, o cualquier otro motivo.

La plantilla que debemos crear es: 404.php

<?php get_header(); ?>
<div id="wrapper">
<h2>Error 404</h2>
<p>Lo sentimos, el contenido que est&aacute; intentando visualizar no se encuentra o fue movido a otra parte. Por favor utilice nuestro formulario de b&uacute;squedas</p>
 <div id="searchInner">
 <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 <input type="text" value="Buscar..." onclick="this.value='';" name="s" id="q" class="searchtxt"/>
 <input name="" type="button" onclick="submit();" value="Buscar" class="btn" />
 </form>
 </div>
</div><!-- end of wrapper-->
<?php get_sidebar(); get_footer(); ?>

El formulario es el mismo que el del header, pero debemos cambiar leves detalles (por ejemplo, cambiar el posicionamiento absoluto a un float) y además no podemos usar un id dos veces, así que lo reemplazamos.

#searchInner {
width: 185px;
border:1px solid #7ec5ff;
float:left;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#searchInner form input#q {
width:180px;
height:20px;
font-size:11px;
font-style:italic;
padding: 0 0 0 5px;
background-image:url(images/lupa.png);
background-position:right center;
background-repeat:no-repeat;
border:none;
}
#searchInner form input[type=button] {
display:none;
}

Si ingresamos una url cualquiera (ej. http://www.summarg.com/demos/themetaller/asdasdasd) Obtendremos el siguiente resultado:

404

Si googlean imágenes de “error 404” van a encontrar ideas muy divertidas y originales para utilizar en este tipo de páginas.

Pueden descargar la clase de hoy desde aquí: themeTaller 14 (170)

Dejar un comentario

  1. […] Clase 14: Paginación, breadcrumbs y página de error 404.php. […]

  2. Hola, soy nuevo en wordpress, tengo código php, para mostrar datos de una tabla de un bd en una página. El problema es que sale una página largísima. Como puedo hacer para que se muestren x registros de la tabla en una página, y poner siguiente y que salgan más registros y en anterior que muestre los registros de la página anterior.
    Muchas gracias

Dejar un comentario