Cómo mejorar su plantilla de página 404 en WordPress

Los errores 404 no son útiles para la experiencia del usuario. Le mostramos cómo recibir alertas por correo electrónico para errores 404 en su sitio para que pueda corregirlos rápidamente. En este artículo, le mostraremos cómo mejorar su plantilla de página 404 en WordPress, para que pueda crear una página 404 más útil que realmente ayude a los usuarios.

¿Cómo se ven la mayoría de las páginas 404 de WordPress?

La página 404 es a menudo la página que más se pasa por alto en la mayoría de los sitios. A menudo, la página 404 de los temas de WordPress se ve así:

Esta página 404 en WordPress es administrada por un archivo de plantilla llamado 404.php.

Si su configuración está realmente desordenada, la página 404 se vería así:

Ninguna de las páginas 404 anteriores es realmente útil.

Cuando un usuario llega a una página 404, ya se siente frustrado. ¿Porque? Porque no pueden encontrar lo que buscaban.

Tienes que ayudar al usuario a encontrar la página correcta. Puede ayudar a mejorar esta experiencia informando correctamente el error y proporcionándoles un curso de acción adecuado (por ejemplo, qué hacer a continuación).

Esto se puede hacer mostrándoles otras secciones de sus sitios que pueden visitar, dándoles una forma de comunicarse con usted, etc.

Cómo crear una página 404 personalizada en WordPress

Lo primero que debemos hacer es comenzar creando una plantilla de página 404 personalizada. Esto se puede hacer editando el archivo 404.php en su tema de WordPress.

Si está editando su tema directamente, le recomendamos que al menos haga una copia de seguridad de su tema de WordPress.

Para hacer que su página 404 sea más útil, le mostraremos cómo agregar elementos útiles como publicaciones populares, publicaciones más comentadas, publicaciones recientes, archivos de fechas, lista de todas las categorías, etc.

Esto permitirá a los nuevos usuarios echar un vistazo rápido a lo que tiene para ofrecer.

Ver las publicaciones más populares en la página 404

Usaremos uno de los mejores plugins de publicaciones populares de WordPress para mostrar publicaciones populares en nuestra página 404.

Lo primero que debe hacer es instalar y activar el archivo. Publicaciones populares de WordPress plugin en su sitio web. Tras la activación, debe agregar esta etiqueta de plantilla en el archivo 404.php donde desea mostrar publicaciones populares.

<?php wpp_get_mostpopular(); ?>

Mostrar las publicaciones más comentadas en la página 404

La sección Publicaciones más comentadas también se basa en el plugin de publicaciones populares que activamos en el último paso. Simplemente agregue esta etiqueta de plantilla donde desea mostrar sus publicaciones más comentadas.

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

También puede consultar nuestra guía sobre cómo ver las publicaciones más comentadas en WordPress.

Ver publicaciones recientes en la página 404

Hay varias formas de ver publicaciones recientes en WordPress. La forma más fácil es agregar esta etiqueta de plantilla en su plantilla 404 para ver sus publicaciones recientes.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Mostrar mensajes aleatorios en la página 404

Si desea mostrar una lista aleatoria de publicaciones en WordPress, simplemente puede agregar este código en su plantilla 404 donde desea mostrar una lista aleatoria de publicaciones de su sitio.

<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post) { ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php } ?>
</ul>

Agregue archivos mensuales con archivos compactos

Si observa la página de TrucosWP 404, notará que estamos viendo nuestra lista de archivo mensual usando un plugin Archivos compactos. Tenga en cuenta que hemos adoptado este plugin y lo mantenemos.

Instale y active este plugin, el plugin Compact Archives. Después de activar el plugin, agregue el siguiente código en su archivo 404.php:

<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($style="block"); ?>
</ul>

Mostrará sus registros mensuales así:

Un ejemplo de plantilla 404 para WordPress

Aquí hay un archivo 404.php de muestra basado en la plantilla Twenty Thirteen 404 del tema predeterminado de WordPress.

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Not found', 'twentythirteen' ); ?></h1>
			</header>

			<div class="page-wrapper">
				<div class="page-content">
					<h2><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentythirteen' ); ?></h2>
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>

					<?php get_search_form(); ?>
					
					<h3>Check out some of our popular content:</h3>

<div class="col1">
<div class="col-header">			
<h3>Popular Posts</h3>
</div>
<?php wpp_get_mostpopular(); ?>
</div>

<div class="col2">
<div class="col-header">			
<h3>Most Commented</h3>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>

<div class="col3">
<div class="col-header">			
<h3>Recent Posts</h3>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
				</div><!-- .page-content -->
			</div><!-- .page-wrapper -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Compare este modelo 404 con el modelo predeterminado en Twenty Thirteen. Notarás que justo después del formulario de búsqueda hemos agregado nuestro código personalizado para mostrar las publicaciones más populares, más comentadas y recientes. Luego agregamos algo de CSS para dividirlo en columnas.

.col1, .col2, .col3 { 
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header { 
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}

Así es como se veía el resultado final:

Esperamos que este artículo le haya ayudado a mejorar la página 404 de su sitio de WordPress. Siéntase libre de jugar con el código y experimentar con diferentes etiquetas de plantilla para satisfacer sus necesidades.