WordPress: Cómo personalizar la página del error 404

¡Buenos días! Hoy vamos a ver cómo personalizar la página del error 404 en WordPress para hacerla más atractiva y sobre todo más usable. ¡Vamos allá!

YouTube video

Para modificar el resultado de esta página simplemente debemos acceder al archivo 404.php (es el que se carga cuando ocurre un error 404) en el directorio de nuestro tema y modificar el código que viene dentro.

Por defecto, el WordPress muestra un título, una pequeña descripción y un campo de búsqueda. En realidad podemos añadirle lo que queramos, como por ejemplo widgets con entradas, enlaces a otros lugares… Para ver cómo crear nuestros propios widget áreas e insertarlo en las páginas podéis consultar éste artículo: WordPress: Cómo añadir un widget area

En el ejemplo del vídeo simplemente he borrado todo lo que se encuentra entre las etiquetas <main> y he insertado el siguiente código:

<section class="error-404 not-found" style="text-align:center">
    <img src="http://empresiona.dev/wp-content/uploads/2017/08/giphy.gif">
    <h1>¡Vaya! Parece que esta página no existe</h1>
    <p>Puede buscar lo que necesita debajo o volver a la página principal dándole a <a href="/" style="color:#dd9933">éste enlace</a> :)</p>
    <div style="width:40%; margin:auto"><?php get_search_form(); ?></div>
</section>

Tened en cuenta que si queréis probar con este mismo código deberéis cambiar la URL de la imagen ya que sino no se mostrará.

Ahora si guardamos y recargamos veremos que si accedemos a una página que no existe, nos mostrará la información que le hemos especificado en el archivo 404.php.

También te puede interesar

WordPress: Cómo personalizar el texto del enlace “Leer más”
WordPress: Cómo añadir un widget area
WordPress: Cómo resolver HTTP 500 Internal server error

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web