Cómo personalizar páginas de error 404 en WordPress, PrestaShop…

Cuando en una web existen enlaces rotos, páginas no encontradas, errores internos o permisos denegados, se generan páginas de error, las cuales pueden tener diferentes códigos según lo que ocasiona el problema: 400, 401, 403, 404, 500
 
En esta guía aprenderemos como personalizar esas páginas, para que cuando un usuario se encuentre con ella vea un mensaje, no se asuste y acabe saliendo de tu página web.

¿Qué significa cada página de error?

Error 400: Bad Request

Al indicar caracteres especiales no admitidos en la dirección URL de la web, es muy probable que recibamos el error “Bad Request”.

Error 401: Unauthorized

Como indica el error, aparece al no tener autorización en esas páginas con usuario y contraseña donde la verificación del usuario ha fallado.

Error 403: Forbidden

Este error, junto al mensaje “You don’t have permission to access this resource.”, suele mostrarse cuando no hay recursos web que mostrar o bien, por falta de permisos (mediante algún archivo en la web, por ejemplo de usuario y contraseña).

Error 404: Page Not Found

Uno de los errores más comunes, sucede cuando la dirección URL se ha introducido incorrectamente o, la página que allí se encontraba ya no existe.

¿Por qué es importante personalizar las páginas de error?

Cuando un cliente está navegando por tu página web y, sin saber por qué, obtiene un error de los mencionados, se suelen frustrar ya que en las páginas de Error por defecto no se da la suficiente información para conocer que ha pasado y, como consecuencia, podemos perder esa visita.

Cuantas más páginas/entradas contiene tu página web, más probable es encontrar un error de este tipo.

Para evitar que el cliente se sienta frustrado y abandone la web, podemos personalizar estas páginas para darles un estilo y colores relacionados con la web para que no se sientan “fuera” de la misma.
Añadiendo un contexto más amigable junto a alguna imagen que encontremos apropiada, ya no parecerá que la web ha “dejado de funcionar”.
 
Podemos aprovechar esas páginas para aquellos clientes que no han podido acceder correctamente y facilitarles alguna vía para reincorporarse a la web. Por ejemplo, mediante un buscador, una lista con las entradas más populares de tu web o, en caso de que tu página sea una tienda online, ofrecer recomendaciones de los productos más populares.
 
También podríamos explicar brevemente el motivo por el que se ha obtenido esa página de error, para esos usuarios más curiosos.
 
O incluso, añadir un formulario de contacto para que nos puedan informar del error obtenido, y así tener un seguimiento de los enlaces rotos o páginas no indexadas correctamente.

¿Cómo establecer una página de error personalizada?

Como modificar el archivo de error dependerá también de la Aplicación Web que se use. En algunas por ejemplo, simplemente localizaremos el archivo que define la página de error para modificarlo o sustituirlo por el nuestro.
 
Para acceder a los archivos de nuestro FTP del Alojamiento, deberemos acceder al panel de gestión del dominio, desde el área de cliente, “Dominios” > «Mis dominios” y clic sobre el nombre del dominio. Una vez dentro, accederemos al apartado “Discos & FTP”. Pulsando sobre “WebFTP”, habremos accedido al gestor de archivos.

Si quieres, puedes consultar esta guía para consultar cómo subir la web mediante FTP.

Código personalizado

La forma habitual para una web desarrollada en código, sería mediante el archivo .htaccess situado en la raíz de la web. Añadiendo la siguiente línea:
 ErrorDocument 404 /errores/404.html
 Esta línea indicará a la web que cuando obtenga un error “404”, llamará al archivo “/errores/404.html”.

Ahora tenemos que situar nuestro archivo personalizado en la carpeta /errores/ dentro del directorio de la web, con el nombre «404.html» o el indicado en la línea anterior

De ahora en adelante, cuando se acceda a una ruta de la web que no exista o a un enlace roto, aparecerá nuestro mensaje de error personalizado.

WordPress

Para modificar la página de error en WordPress, podrás usar algún plugin para ello, encontrarás multitud de ellos en el buscador de plugins con la palabra “404”, o si prefieres no añadir mucha cantidad de plugins, podrás buscar el archivo que define la página 404 en la carpeta del theme usado.


 La ruta habitual de la instalación del theme es:
/public/wp-content/themes/%nombredeltema%/

La ruta exacta del archivo 404.php puede variar dependiendo del tema, en este ejemplo, usaremos el tema por defecto “twentytwentyone”. En este caso, al tener WordPress instalado en la carpeta /blogtest/, la ruta del archivo es:
 /blogtest/wp-content/themes/twentytwentyone/404.php

Podemos modificar directamente el archivo o sustituirlo por el que ya hemos creado previamente (es importante destacar que el archivo debe tener exactamente el mismo nombre).

Prestashop

En el caso de Prestashop, la ruta donde se fijan los archivos de errores es:

(Al tener instalado PrestaShop en /public/)

/public/themes/classic/templates/errors

En este caso, la página de error se divide en 2 archivos:

404.tpl

not-found.tpl


Podemos modificar o sustituir directamente el archivo “not-found-tpl” lo que conservará el estilo del tema de PrestaShop, conteniendo nuestra página de error personalizada dentro de un recuadro:

Si sustituimos directamente el archivo «404.tpl», la página de error será completamente como la hayamos diseñado en nuestro archivo:

Al igual que en WordPress, es importante destacar que si sustituimos el archivo debe tener exactamente el mismo nombre.

Otras aplicaciones web

Como vemos, es posible modificar el archivo que muestra la página de error de nuestra web, en esta guía explicamos las 3 opciones más populares a la hora de crear una web (Código personalizado, WordPress y PrestaShop).
 
Si quieres modificar la página de error de tu web realizada con otra aplicación Web, solo debes consultar por la red donde se encuentra el archivo correspondiente de los errores por defecto.

Alternativa (.htaccess)

Realmente, podríamos usar el método por .htaccess explicado para “Código Personalizado” en casi cualquier Aplicación Web. No obstante, en la gran mayoría habría que desactivar el módulo ‘mod_rewrite’ de nuestro .htaccess, lo que hace que todos los enlaces de la web sepan donde encontrar sus recursos. Es una práctica poco recomendada para Aplicaciones Web dinámicas.
 
 

2 comentarios

  1. Hola Miquel, en este caso, como añades las secciones más importantes en el fichero 404, entiendo que lo harías con html básico, ¿pero hay forma de que esos apartados como secciones más importantes, podamos incluirlas mediante hooks. por ejemplo {seccion} ?

    Gracias!

    • ¡Hola David! Sí, lo más simple sería introducirlo mediante HTML básico. Mediante PHP puedes hacer que se incluyan los enlaces de forma automática aunque la manera de realizarlo ya depende de la aplicación que utilices (WordPress, PrestaShop, …)
      Si quieres puedes contactar vía chat online o ticket desde nuestra web y el equipo de soporte te atenderá.

Los comentarios están cerrados.