7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Theme Development

Como crear una simple página de error 404 para temas de WordPress

Read Time: 7 mins

Spanish (Español) translation by Marilu (you can also view the original English article)

Un visitante puede encontrarse con un error 404 por varias razones. Como propietario de un sitio web, debes asegurarte de que la experiencia de usuario de tu sitio web no deje a tu visitante sintiéndose perdido o confundido cuando esto ocurra. Crear una página 404 personalizada es fácil usando la plantilla 404.php en tu tema de WordPress, y puede ser muy útil para asegurar que un visitante permanezca en tu sitio web, incluso después de encontrar un error 404.


¿Qué es una página 404?

A classic default 404 pageA classic default 404 pageA classic default 404 page

Añadir una página 404 personalizada a tu tema de WordPress es sencillo. Todo lo que necesitas es tener un archivo llamado '404.php' en el directorio de tu tema...

Una página de error 404 'No Encontrado' es una página generada por el servidor para informarle que el contenido al que intentaba acceder en el sitio web no puede ser encontrado. Típicamente encontrarás un error 404 cuando algo ha sido movido o borrado, o cuando haces clic en un link/type (enlace/escribir) una dirección de sitio web con un error tipográfico.

Me encuentro con 404 páginas todo el tiempo, normalmente porque tecleo muchas direcciones web en lugar de usar marcadores, y tengo dedos torpes. Esto a menudo me lleva a solicitar www.google.com/mial, en lugar de la página de GMail que pretendía. ¡Es muy frustrante! Hace unos años, las páginas 404 no eran más que la página 404 estándar del servidor, pero en los últimos tiempos los desarrolladores y diseñadores se han encargado de crear páginas 404 más fáciles de usar, para que sepas dónde estás, por qué llegaste allí y dónde puedes ir ahora.


Como añadir una página 404 personalizada a tu tema

Ahora veamos cómo agregar una página 404 personalizada según el tema. Agregar una página 404 personalizada es simple; todo lo que necesitas es tener un archivo llamado '404.php' en el directorio de tu tema. Por supuesto, si tu archivo "404.php" está vacío, entonces la página "404 No Encontrado" que se muestra a los usuarios estará en blanco.

Un método rápido para hacer una página 404 personalizada que se ajuste bien al tema es copiar el contenido del archivo "page.php" del tema en el nuevo archivo "404.php". Una vez que hayas hecho eso, elimina todo el código que se refiere a The Loop (El Bucle) y reemplázalo con el siguiente código:


Como hacer que tu página 404 sea genial

Si un usuario ha llegado a una página 404 de tu sitio web, lo que realmente quieres hacer es ayudarle a llegar al contenido al que pretendía llegar. Si se muestra la página 404 por defecto del servidor, lo más probable es que el usuario pulse "Atrás" y encuentre el contenido que buscaba en otro lugar.

Para ayudar al usuario a encontrar el contenido que buscaba, debes implementar los siguientes elementos en tu página 404 personalizada. Estos elementos pueden ser ya parte de tu tema, y por lo tanto ya existen en tu página 404 (si ha copiado el código de tu archivo 'page.php', por ejemplo), en cuyo caso debes señalarlos al usuario.

  1. Mostrar un mensaje de disculpa explicando que el contenido que el usuario solicitó no ha sido encontrado. Mencionar el código de error "404" no es realmente necesario, pero puedes ponerlo ahí si quieres.
  2. Sugiere que el usuario compruebe su barra de direcciones para asegurarse de que no hay errores de escritura en la dirección web.
  3. Display/point (Mostrar/señalar) un cuadro de búsqueda que permite al usuario buscar en tu sitio web el contenido que estaba buscando.
  4. Sugerir artículos que el usuario podría haber buscado basándose en la página que solicitó/entradas populares en tu sitio web.
  5. Da al usuario una lista de opciones de "lo que puede hacer ahora", como ir a tu página de inicio o navegar por tus archivos.
  6. Por último, permite que el usuario te informe del error incluyendo un mail link/contact form/Tweet button (enlace de correo electrónico/formulario de contacto/botón de tweet) para que puedas corregir el error cuando corresponda.

En mi tema imaginario, implementaría lo anterior algo como esto:

Tutsplus 404 pageTutsplus 404 pageTutsplus 404 page

Los elementos clave

Si puedes captar la parte "útil" de tu página 404, eres bienvenido a añadir humor y ventajas de diseño después del hecho... No pongas el carro delante del caballo.

Ahora vamos a desglosar los elementos clave que usamos:

  • Lo más básico: Estamos usando el nombre de archivo 404.php, para que WordPress sepa usar esto como plantilla de la página de error.
  • El título de nuestra página (dentro de una etiqueta H1) indica claramente que una página no fue encontrada.
  • Ofrece una breve explicación en forma de texto y ofrece algunas soluciones alternativas (revisa la URL).
  • Proporciona una barra de búsqueda (utilizando la función del formulario de búsqueda de WP por defecto)
  • Proporciona, como mínimo, un enlace a los archivos. Los usuarios avanzados podrían querer incluir una página, categoría o lista de etiquetas aquí mismo en esta página también.
  • Proporciona un contacto para que la gente informe de los errores.

Aunque a menudo es muy tentador dejar una imagen y una nota humorística en tu página 404, intenta ser lo más útil posible primero, y divertido después. A pesar del hecho de que hay sitios web enteros dedicados a la hilaridad de ciertas páginas 404, asegurar que un visitante se quede y regrese a tu sitio web es tu primera prioridad (a menos que tengas la intención de aparecer en uno de esos sitios web, en cuyo caso, ¡vuélvete loco!)


Otras consideraciones

Cuando un usuario llega a una página 404, y no es porque haya un error de escritura en la URL (la mayoría de los usuarios no escriben las URLs directamente), por lo que las posibilidades de que hayas movido o borrado algo son buenas.

Redirecciona el contenido antiguo

Al mover el contenido, siempre debes redirigir la antigua URL a la nueva, ya que es una forma sencilla y eficaz de garantizar que todos los visitantes que pretendan acceder a ese contenido puedan hacerlo. Redireccionar es una tarea bastante simple en WordPress cuando usas el popular plugin, Redirection. Este plugin también te permite monitorear los errores 404 generados por tu servidor, y qué URL fue solicitada cuando se generó el 404. Esto te permite redireccionar esa URL a la ubicación correcta, mejorando así tu experiencia de usuario en general.

Da un paso extra

Como mencionamos anteriormente, una página 404 realmente genial ni siquiera necesita parecerse a una página 404... al incluir cosas como una página completa, una categoría y un listado de etiquetas, no sólo puedes ayudar a rellenar el diseño de la página, sino que puedes proporcionar enlaces inmediatos para que los usuarios naveguen en lugar de esperar que pasen el tiempo intentando refinar su búsqueda. También considera proveer una lista de contenido "popular"... a veces el contenido popular puede ser mejor que el contenido relevante si tu objetivo es mantener 404 visitantes en el sitio.

No borres los mensajes; borra el contenido.

Por último, cuando elimines el contenido, considere la posibilidad de eliminar simplemente el contenido de la page/post (página/post), en lugar de todo el post/page (post/página), e informa a tus visitantes por qué has eliminado el contenido. Podrías dar un paso más y recomendar fuentes alternativas en las que un usuario pueda encontrar un contenido similar al que tu has eliminado. Esto ayuda a prevenir la "rotación de enlaces" en tu sitio mientras se elimina el contenido que deseas desaparecer.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.