Personalizar la página 404

18

JULIO, 2016

Hoy vamos a rescatar y actualizar un post de los más visitados de nuestra web. Antes de empezar a personalizar nuestra página de error 404 tienes que saber de qué hablamos cuando nos referimos a este error.

El error 404 es un mensaje que recibirá el usuario cuando no se encuentra una página. Esto está incluido dentro de WordPress por defecto, pero no con todas las plantillas.

Estos errores suelen aparecer cuando, por ejemplo, colocamos un enlace incorrecto en nuestro sitio web, bien porque lo hemos eliminado o porque hemos cambiado la ruta que tenía en un primer momento. También puede surgir cuando un usuario que accede a nuestra web escribe mal la dirección y entonces también aparecerá el error.

Ahora que ya sabes de qué hablamos te vamos a dar una serie de consejos antes de meternos en faena.

Personalizar la página 404

Página 404 personalizada.

CONSEJOS Y TRUCOS PARA PERSONALIZAR LA PÁGINA 404 EN WORDPRESS

No trates de ocultar que ha habido un error. Algo ha ocurrido y el usuario debe saberlo. Tanto si es culpa tuya como de tu visitante, menciona que lo que busca no se puede encontrar.

Mantén el diseño de tu sitio web. A menudo, cuando llegamos a una página de error 404 obtenemos directamente una página web en blanco con el texto “Error 404, Page not found”. Estás dando la sensación a tu visitante que ya no está en tu web y corres el riesgo que abandone y se vaya a otro lado. Lo que debemos hacer es diseñar y modificar nuestra página de error mantiendo el diseño principal. Podríamos mantener la cabecera y el pie de página (header y footer en WordPress) y si disponemos de un logo o imagen de marca estaría bien incluirlo también.

Ayuda a tu visitante a encontrar lo que busca. Tu visitante pudo haber llegado a tu web desde una dirección o enlace externo o por el contrario pudo haber escrito mal la dirección. En cuanto al primer término, es de utilidad incluir un buscador o una lista de nuestros últimos posts. Si por el contrario el usuario ha introducido mal la dirección debemos tener cuidado en la forma en la que le digamos que compruebe si lo ha escrito bien.

En relación a esto último, puedes utilizar algo de  humor con una imagen o frase ocurrente… Pero sin pasarte.

Aunque no es un consejo directo sobre personalización de esta página si ves que tienes muchas visitas en esta página debes comprobar los enlaces rotos que pueden provocar la llegada a esta página.

Ejemplo error 404

«Puedes utilizar el humor con tu página 404 pero recuerda, ayuda a tu visitante a encontrar lo que busca»

PERSONALIZAR LA PÁGINA 404

Después de repasar todo lo escrito anteriormente ya es hora de meterse en faena y empezar a personalizar nuestra página 404 de manera que perdamos los menos visitantes posibles cuando tengan el infortunio de llegar a dicha página.

Tal y cómo vimos en nuestra lista de consejos podríamos decir que lo primero que debemos introducir en nuestra página es el “header” y el “footer” de manera que el usuario sepa que no ha salido de nuestra web. Obviamente, esto es opcional. Mucha gente prefiere una pantalla completa con algún mensaje o imagen.

<?php get_header(); ?>

<h2>Error 404 – Página no encontrada</h2>

<?php get_sidebar(); ?>

<?php get_footer();?>

Con este código aparecería en nuesta página la cabecera, un título h2 con el texto arriba mencionado, el sidebar y el footer. Si no queremos la barra lateral podemos omitirla. Sencillo, ¿no?

Incluír un buscador en la página de error 404

Si quieres agregar un buscador en el cual tu visitante pueda introducir un término de búsqueda lo podemos hacer de una manera sencilla.

<?php get_search_form(); ?>

Con esta pequeña línea de código aparecerá un buscador dentro de la página.

pagina 404 con buscador

Página 404 con buscador.

Incluír entradas en la página de error 404

Vamos a ir un poco más allá. Con unas pocas líneas podemos incluír, por ejemplo, nuestras últimas entradas, por lo que llenaremos un poco más el vacío de nuestra página 404.

<ul>
<?php
$postsRecientes= new WP_Query();
$postsRecientes->query(‘posts_per_page=5’);
?>
<?php while ($postsRecientes->have_posts()) : $postsRecientes->the_post(); ?>
<li><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

¿Qué cosa rara es esa que has puesto, te estarás preguntando? Básicamente, lo que estamos haciendo es crear un lista con las últimas 5 entradas que hemos creado en nuestro blog mostrando el título de cada una de ellas.

Otras opciones para vuestra página de error 404

  • Si, por ejemplo, no incluyes la cabecera y el footer y prefieres tener la pantalla limpia estaría bien crear un botón o enlace a tu página de inicio o a un formulario de contacto. Hay que darle opciones a tu visitante y no llegar a un callejón de salida.
  • Los «call to action» también pueden ser de utilidad.
  • Añade un video sobre por qué ha llegado ahí.
  • Un juego en tono de humor también suele funcionar bien.
pagina 404 con CTA

Página 404 con CTA.

Aunque nos centramos en reglas para WordPress, muchos de estos consejos para personalizar la página 404 son aplicables a cualquier web por lo que esperamos que si no usas WordPress también te sea de utilidad.

Puedes echar un ojo al Codex de WordPress sobre las páginas 404 aquí.

Y para terminar, te mostramos algunas páginas 404 ingeniosas que nos hemos encontrado por la web para que te inspiren a la hora de diseñar la tuya. Ejemplos páginas 404

Share This

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar