• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Personalizar la página de error 404 en WordPress

Personalizar la página de error 404 en WordPress

Personalizar Página error 404 en WordPress

[ 19 julio 2018 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

El error 404 es un error que emite el servidor cuando una página no ha sido encontrada, debido a que estas usando una url que no es correcta. En este artículo aprenderás cómo personalizar la página de error 404 en WordPress y darle un mejor aspecto.

 

Generalidades

Inevitablemente tendrás casos en los que un usuario, ya sea por error de escritura o porque has cambiado la estructura de urls, obtendrá una página de error 404, esta página se puede asociar con una mala experiencia en tu sitio, pero puedes cambiar esta percepción y hacer que esta página tenga una personalización tal que resulte atractiva y amigable.

En la siguientes imágenes verás algunos ejemplos de páginas de error 404 creativas.

Algunas sólo mostrarán un diseño con un mensaje

Imagen creativa error 404 espacio

 

Otras pueden mostrar algún link para regresar al inicio del sitio

Imagen creativa error 404 espacio

 

Otras pueden mostrar opciones adicionales como un buscador

Imagen creativa error 404 espacio

 

Personalizar la página de error 404 en WordPress

En WordPress puedes usar diferentes plugins que te dan la facilidad de personalizar una página y usarla como página de error 404, por ejemplo el plugin 404page.

Sin embargo si quieres evitar usar un plugin puedes usar la funcionalidad que tiene WordPress para mostrar una página personalizada de error 404

Tomaremos como ejemplo la página de error 404 del theme Twenty Seventeen

Error 404 Twenty Seventeen

 
Para hacer las modificaciones :

1- Ubicar archivo 404.php

Primero ubica el archivo 404.php como parte de los archivos del theme que estas usando, casi todos los theme tienen uno

En caso tu theme no tenga este archivo puedes copiarlo desde un theme como Twenty Seventeen
Si tu theme es un Child Theme busca en los archivos del theme padre

2- Crea un Child theme

Crea un child theme para hacer tus modificaciones, ya que si haces cambios al archivo 404.php del theme perderás los cambios cuando el theme se actualice, una vez creado el child theme copia el archivo 404.php del theme padre al tema hijo.

Si no sabes cómo crear un child theme revisa: Crear un Child Theme en WordPress de manera correcta

3- Realiza las modificaciones

Finalmente realiza las modificaciones en el archivo 404.php copiado, en nuestro ejemplo insertaremos una imagen adicional como parte del código del archivo.

 
Al final obtendremos la siguiente página:

Página modificada error 404 Twenty Seventeen

Puedes descargar el archivo 404.php modificado con la imagen de ejemplo para el theme Twenty Seventeen, desde este enlace.
Redirecciones 301 vs página de Error 404

Si tienes urls que han cambiado su estructura y que incluso ya están indexadas en los buscadores, para una mejor experiencia de usuario y no perder posicionamiento en los buscadores, efectivamente es más útil tener redirecciones 301 a las nuevas urls equivalentes; sin embargo puedes dejar el resto de casos para que la página de error 404 se encargue.

Ya que tendrás una página de error 404 para el resto de casos, ¿por qué no mejorar la página de Error 404 para que sea más amigable y no sólo mostrar el mensaje de “No Encontrado”?

 

Conclusión

Como hemos visto puedes evitar usar un plugin y hacer la personalización de tu página de error 404 directamente en el archivo 404.php de tu theme.
 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carlos Mancebo

    26 julio, 2018

    Excelente articulo.
    Quisiera hacerles una pregunta, para ver si me pueden arrojar algo de luz.
    Manejamos un periódico digital, en el que se hacen unos 20 a 30 posts al dia.
    En varias ocasiones, al momento de intentar agregar una nueva entra o al momento de guardarla, nos arroja un ERROR 404. No lo hace siempre, sino cada 3 o 4 entradas.
    Hemos intentado regenerando .htaccess, tambien en Enlaces Permanentes, pero el error continua apareciendo.
    Alguna idea de donde podría estar el problema?.. Saludos y gracias de antemano.

    • Jhon Marreros Guzmán

      27 julio, 2018

      Hola, lo que comentas no esta relacionado con este artículo, sin embargo si a veces te aparece un error 404 en el backend, es posible que sea por algún plugin, podrías ir desactivando hasta ver cual te causa el problema, prueba también desactivar la funcionalidad de borradores de WordPress.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Crear un sitio One Page en WordPress

Agrupar los resultados de búsqueda en WordPress

Colores personalizados en la administración de WordPress

¿Qué son los Nonces en WordPress?

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados