404-imagen

Página 404 personalizada en WordPress

Una página 404 es una página generada por el servidor para informarte que el contenido, al que quieres acceder en la web, no se encuentra.

Por defecto, el mensaje de error se muestra como texto plano sobre un fondo blanco. Si la página está desarrollada en WordPress, probablemente, el tema que uses tenga un archivo 404. Si escribes /404 después de tu dominio, lo verás.


En la página de WordPress te explican cómo crear un archivo 404.php. Ponen como ejemplo el archivo 404 del tema Twenty Thirteen, para mí, mejor que el de Twenty Fourteen y el de Twenty Fifteen, que es con el que trabajaremos, es más visual.

Además, sabes que, en el repositorio de plugins de WordPress, puedes encontrar alguno a tu medida.

En el post de hoy vamos a ver cómo mejorar el aspecto de nuestra página 404 o no encontrada. Vamos a ello.

Para este tutorial vamos a usar un tema hijo del Twenty Fifteen.

Página 404 del tema Twenty Fifteen

Después de añadir el archivo 404 del tema padre, echemos un vistazo a la página no encontrada.

404-2015

No parece gran cosa, ¿Verdad?. Al menos tiene cajón de búsqueda. Pero, ¿Y si personalizamos un poco añadiendo algunos enlaces y dashicons? Así pondremos en práctica lo aprendido en otros tutoriales.

Página 404 personalizada en WordPress

Una vez que el usuario ha llegado a una página no encontrada, en lugar de ofrecerle esa triste pantalla podemos alegrarla un poco añadiendo algunos enlaces a post, que le puedan interesar.

Editando el archivo 404 de nuestro tema

Bien, hagamos algunos retoques a esta plantilla.

En primer lugar podríamos añadir una imagen.

Añadir una imagen a página no encontrada

Edita el archivo 404.php y busca el sitio adecuado donde colocar el siguiente código. En este caso, colocamos la porción de código en <section class=”error-404 not-found”>.

<div class="imagen-404">
 <img src="ruta-de-la-imagen" />
</div><!-- . Imagen error-404 -->

Para centrar la imagen usa la regla CSS:

.imagen-404 {text-align:center}

Recuerda que tu imagen sea responsive

img { max-width: 100%};

404-imagen

Bueno, tampoco es que gane mucho con una imagen pero, al menos, se ve menos triste.

Añadiendo Dashicons a página no encontrada

Si lo de la imagen no te convence, puedes usar los Dashicons para personalizar la página 404.

Observando el código de nuestro tema vemos que todo transcurre en la sección <section class=”error-404 not-found”>

Bien, pues, usando lo aprendido en el tutorial de Dashicons usaremos la siguiente regla CSS:

.error-404 h1:before {
 -webkit-font-smoothing: antialiased;
 font: normal 60px/1 'dashicons';
 vertical-align: middle;
 margin-right: 5px;
 margin-right: 3.5rem;
 content: "\f225";
}

Hemos escogido el Dashicon de enlace roto, bastante apropiado. al final del post verás la imagen de cómo queda.

La clase .error-404 la hemos sacado inspeccionado el código desde la consola de Chrome. Si estuvieras usando el tema Twenty Twelve tendrías que usar #post-0 h1:before para usar el dashicon.

Mostrando las últimas entradas en nuestra página 404

Bien, pero de lo que se trata es de tener una página 404 personalizada, pudiendo ofrecer al usuario, dentro de esa página, algún enlace a nuestras entradas o a los archivos de nuestra web.

Editando el archivo 404.php y añadiendo la función que usa WordPress para mostrar los 10 últimos posts.

Con esto ya mejora bastante la página, y así, el usuario no se encontrará tan perdido. Aunque no deja de ser visual.

Como verás, hemos tenido que escribir/copiar cierta porción de código para sólo mostrar las entradas más recientes.

Pero, ¿Qué pasa si no sabemos dónde o cómo poner ese código?. O mejor dicho:

¿Cómo se crea una plantilla de 404 que los usuarios puedan personalizar desde dentro de la administración de WordPress?

Llevando nuestra página 404 un paso más allá con las áreas de widgets

Incluyendo áreas de widgets en tu plantilla 404 te permite cambiar de forma flexible el look de tu página, arrastrando y soltando los widgets a esa área. Mucho más fácil que escribir una plantilla de página entera a partir de cero.

Creando el widget

El primer paso es crear un área de widget que luego se pueda integrar en la plantilla. La creación de un área de widget pasa por insertar el siguiente código en el archivo functions.php:

function widget_area_404() {
 register_sidebar( array(
 'name' => 'Página 404',
 'id' => '404',
 'description' => __( 'Los Widgets colocados aquí se mostrarán en la página 404 no encontrada.' ),
 'before_widget' => '<div id="%1$s" class="%2$s widget">',
 'after_widget' => '</div>',
 'before_title' => '<h4 class="widgettitle">',
 'after_title' => '</h4>',
 ) );
}
add_action( 'widgets_init', 'widget_area_404' );

404-widgetsSi ahora vas al menú Apariencia/Widgets verás una nueva área creada, donde podrás arrastrar los widgets que quieras. Para este ejemplo hemos usado los widgets de Entradas recientes y Archivos.

Edita el archivo 404.php de tu tema y añade, en el área de contenido:

<?php dynamic_sidebar( '404' ); ?>

Ahora, cualquier widget que arrastres al área creada, se mostrará en tu página 404 o no encontrada.

Y ya que estamos haciendo uso de dashicons, personalizaremos nuestros widgets, como hicimos en un post anterior.

Simplemente personaliza los widgets con los iconos que quieras. Este es el resultado.

404-dashicons

Conclusión

Personalizar una página 404 siempre es una buena práctica. Existen varios post que hablan de cómo mejorar el aspecto de tu página 404 o no encontrada.

Espero que este post te haya resultado útil.

Y Tú. ¿Personalizas tu página 404?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *