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

¡Buenos días! Hoy vemos cómo personalizar la página de error 404 de nuestra web hecha con un tema para Genesis Framework.

La buena optimización de esta página puede mejorar notablemente la experiencia del usuario en nuestra web, ya que podemos redirigirlo a otros lugares de la misma y mostrar otro contenido que le puede interesar. Y como me gusta ir la grano, no me voy a extender más con la introducción. ¡Vamos allá!

YouTube video

Paso 1: Creamos el archivo 404.php

Para personalizar la página del error 404 necesitamos modificar el archivo 404.php de nuestro tema. Así que el primer paso sería encontrarlo en la carpeta de nuestro tema. En muchas ocasiones el tema no tiene un archivo 404.php propio, y se carga el que viene por defecto de Genesis. Así que procederíamos de la siguiente manera:

1. Accedemos a la carpeta de Genesis en wp-content/themes/genesis.

2. Copiamos el archivo 404.php y lo pegamos a la carpeta de nuestro tema.

3. Realizamos todas las modificaciones futuras en ese nuevo archivo, y no en el archivo de Genesis. Esto es muy importante.

Paso 2: Modificamos la función que muestra el mensaje de error

Dentro del archivo 404.php hay una función que se encarga de mostrar el mensaje de error cuando se accede a una página que no existe. Esta función se llama genesis_404(). Así que todo lo que hay dentro de esta función es lo que se mostrará en caso del error.

Para personalizar la página podemos modificar la función existente , si sabemos algo de php, o simplemente borrar todo lo que hay dentro y ponerlo a nuestro gusto. En este caso haremos de la segunda manera:

1. Borramos el contenido de la función para que quede así:

2. Insertamos el contenido que nos interese. El contenido final de esta página ya depende de vosotros y de los propósitos de vuestra web. pero os he preparado unas pocas líneas de código para poneros un ejemplo sencillo:

echo '<div style="text-align:center">';
echo '<img style="height:300px" src="http://www.elcorreogallego.es/img/noticias/20170513/sorpresa_793570_manual.jpg">';
echo '<h1>¡Vaya! Parece que esta página no existe</h1>';
echo '<p>Puedes seguir navegando por el menú o <a href="/">volver a la página principal</a></p>';
echo '</div>';

Lo que hará este código es:

  1. Abrir un div con todo el contenido alineado al centro
  2. Añadir una imagen concreta con la altura de 300px
  3. Añadir un título
  4. Añadir una pequeña descripción con un enlace a la página de inicio
  5. Cerrar el div

Como veis, personalizar esta página no tiene nada de complicado. Solo hay que saber dónde están las cosas, qué es lo que se puede tocar y saber un poco de php y html para personalizar nuestro mensaje. A partir de aquí creatividad al poder.

También te puede interesar

Cómo modificar el título en la casilla del autor en Genesis
Genesis Framework: Cambiar el tamaño del avatar
Genesis Framework: Mostar el año de manera dinámica en el copyright
Genesis Framework: Cómo mostrar la imagen destacada en un post

¿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