Cómo hacer una página 404 personalizada en un tema hijo de WordPress

No importa qué tan bien diseñado y estructurado esté su sitio web, los usuarios encontrarán una página 404 en algún momento. Puede ser algo tan simple como escribir una URL con un error ortográfico. Por ejemplo, si tiene una página de contacto en www.website.com/contact y alguien intenta acceder a www.website.com/contacts, existe una buena posibilidad de que sea redirigido a la página 404. Además, es posible que los ajustes del contenido del sitio web no siempre tengan en cuenta las páginas que podrían haberse movido sin que se redirigiesen los enlaces. Con suerte, esta experiencia no les sucede a sus usuarios con demasiada frecuencia, pero cuando sucede, es una oportunidad para ofrecer ayuda y hacer algo único para su marca.

Lo más probable es que no sea ajeno a las páginas 404 en la web, por lo que es posible que ya tenga un diseño en mente. Si no, al buscar en Google "páginas 404 geniales", encontrará todo tipo de inspiración. El diseño puede ser cualquier cosa, desde serio a divertido, con mucho texto o minimalista, o algo intermedio.

Debajo están algunos de mis favoritos. Son buenos ejemplos de cómo se utiliza la creatividad en el diseño de la página.

figma

Figma es una página 404 simple, pero el gráfico encaja muy bien con los puntos vectoriales. Me gusta lo simple y audaz que es; es realmente todo lo que se necesita.

airbnb

Este ejemplo ofrece un poco más en términos de contenido. El enfoque ilustrativo añade un elemento de humor. Esto incluye algunos de los enlaces principales. Si un usuario ha escrito algo mal, es posible que pueda encontrar lo que está buscando en la lista.

MailChimp

El diseño siempre es divertido en el sitio de MailChimp, especialmente con el reciente rediseño. Tiene un elemento de humor tanto en el texto como en la ilustración.

¡Obtenga temas de Genesis Framework y StudioPress gratis!

Cuando aloje sus sitios en Flywheel, tendrá acceso a más de 30 temas premium de WordPress (¡incluido Genesis!) Directamente desde nuestro encantador tablero. ¡Eso es más de $ 2,000 en valor con el que puede comenzar por solo $ 15 / mes! Aprende más aquí.

Creación de una página 404 personalizada

Lo primero es lo primero: todas las personalizaciones deben realizarse en un tema secundario. De esa forma, las modificaciones no se anularán con las actualizaciones del tema normal. Esta página 404 será un archivo en el tema hijo, el archivo llamado 404.php para ser exactos.

Cómo agregar variables CSS para personalizar temas secundarios de WordPress

Las variables CSS, también conocidas como propiedades personalizadas de CSS, permiten una fácil reutilización en sus hojas de estilo CSS. Si ha trabajado con temas secundarios de WordPress, probablemente se encuentre haciendo un montón de pocilga...

Además, recuerde hacer esto en un entorno de prueba. Cuando se modifican los archivos de temas, siempre existe la posibilidad de que se produzcan errores de sintaxis que pueden provocar la caída del sitio.

1. Crear un nuevo archivo

Cuando tenga el tema hijo, el primer paso es crear un nuevo archivo para comenzar a trabajar. Deberá abrir la carpeta donde creó el tema secundario y agregar un archivo 404.php .

2. Edite el archivo

Ejemplo básico

Este ejemplo representa una página que tiene texto y una imagen. La idea de diseño aquí es crear algo simple que requiera un gráfico ilustrado.

Pegue el siguiente código en la página 404.php . Es un comienzo básico. Puede modificar las cosas a una estructura diferente para personalizarla (es decir, si no desea una barra lateral, puede eliminarla).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Hay un par de modificaciones que tendrás que hacer. Una es cambiar la ruta a la imagen e incluir el título que quieras. No olvides escribir un mensaje personalizado y luego guardar tus cambios.

Si siguió las instrucciones hasta aquí, creó una plantilla personalizada con una imagen, un mensaje y un encabezado, una barra lateral y un pie de página estándar. (Es posible que también tenga esto en las otras páginas).

Enfoque de widget

Esto es opcional, pero muchos diseñadores prefieren trabajar con áreas de widgets. Es más fácil hacer cambios y más fácil de mantener. Por ejemplo, un widget es una forma eficiente de mostrar los artículos de blog más recientes y populares.

Agregar el widget

Para agregar el widget al 404.php file , deberá crear una nueva área de widgets. Un tema secundario necesita un archivo functions.php , así que ahora es el momento de verificar que el tema secundario tenga uno.

En el archivo functions.php , se necesitará un fragmento para agregar un nuevo widget en la página.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Este fragmento solo agrega el widget. Para comenzar a usarlo, se debe llamar a esta función. Se llamará en el archivo 404.php . Esté atento a la ubicación en la que desea esta área de widgets.

Copia y pega el siguiente código donde quieras mostrar nuevos widgets (por ejemplo, después del título y el texto):

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

Ahora que ha establecido dónde mostrar la nueva área de widgets, es hora de agregar el contenido del widget yendo a Apariencia > Widgets . Aquí es donde puede elegir cosas como un bloque HTML, publicaciones populares o cualquier otro widget para la página 404.

Ya sea que esté creando algo simple o una página con muchos enlaces, crear una página 404 personalizada es bastante sencillo. Mediante el uso de un tema secundario y la utilización de widgets, existen posibilidades de diseño ilimitadas.

¿Está buscando más formas de personalizar su sitio? Mira estos tutoriales:

• Cómo agregar variables CSS para personalizar temas secundarios de WordPress
• Personalizaciones simples para su tema hijo de Génesis
• Cómo crear y usar campos personalizados en WordPress