Añade una página 404 a tu tema

Cuando uno de nuestros lectores clica algún link “perdido” hacia nuestro blog desde alguna otra parte (el típico link que en su día cambiamos, sin saber que ya estaba esparcido en otras páginas amigas que nos referenciaban), el host en el que estemos servirá por defecto la famosa página (casi) en blanco “404 error not found”.

Si queremos que aparezca, por el contrario, una página estilizada como el resto de nuestro tema, y en la que propondríamos un mapa de nuestro site, categorías y tags, tendremos que crear un archivo y llamarlo 404.php. Lo pondremos luego junto a los demás, y lo llenaremos, por ejemplo, con el siguiente cdigo :

<?php get_header(); ?>

<div class="container">

	<h3>Nuestro servidor no ha podido encontrar la dirección solicitada. Os invitamos sin embargo a navegar nuestro site, escribirnos un mail, o realizar una búsqueda !</h3>

	<?php get_search_form(); ?>

	<div class="columna">

		<h3>Nuestras categorías</h3>
		<?php wp_list_categories(); ?>

	</div>

	<div class="columna">

		<h3>Nuestros tags</h3>
		<?php wp_tag_cloud(); ?>

	</div>

	<div class="columna">

		<h3>Nuestras páginas</h3>
		<?php wp_list_pages(); ?>

	</div>

</div>

<?php get_footer(); ?>

Tendríamos que estilizar ahora .container y .columna :

.container{width:100%;float:left}
.columna{width:30%;float:left;margin-right:10px}

Habremos listado categorías, tags y páginas en nuestra 404, lo cual puede resultarnos muy útil para acomodar a los visitantes siempre que algo fuera mal, y el servidor fuera incapaz de servir una url determinada.

Esperamos que este pequeño truco sea de vuestro interés.

Comentarios
  1. Muy bueno aunque no entiendo muy bien que es lo que hay que hacer exactamente en la parte final del post, eso de estilizar container y .columna.
    A que os referís ¿ a que hay que poner ese pequeño código final en la hoja de estilos ?

    Escrito el21/11/2009
  2. Ignacio

    Saludos Hispania, sí hay que ponerlo en la hoja de estilos, pero cuidado, habrá que modificarlo según el resto de tu CSS.

    Yo puse aquí las anchuras en porcentages para crear 3 columnas – 30% de la anchura total para cada columna, aunque recomiendo usar píxeles, 250px por ejemplo.

    Por supuesto uno puede prescindir de las columnas y listar cada cosa una detrás de otra, ocupando toda la anchura.

    .columna{width:100%;clear:both}

    Hay que mirar también de no repetir la nomenclatura, alomejor tu tema ya tiene algún elemento llamado container o columna y se mezclarían los estilos en ambas partes.

    Saludos

    Escrito el21/11/2009
  3. OK, muchas gracias por la aclaración.

    Escrito el22/11/2009

DEJA TU COMENTARIO