Cómo mejorar su plantilla de página 404 en WordPress (2 formas)

¿Quieres mejorar tu plantilla de página 404 en WordPress?

Mejorar la página 404 predeterminada de WordPress puede ayudar a crear una mejor experiencia de usuario, reducir la tasa de rebote y aumentar las páginas vistas.

En este artículo, le mostraremos cómo personalizar su plantilla de página 404 en WordPress, paso a paso.

¿Por qué mejorar su plantilla de página 404 en WordPress?

La mayoría de los visitantes que acceden a la página 404 predeterminada de WordPress abandonarán su sitio web de WordPress rápidamente.

Esto aumentará su tasa de rebote, creará una mala experiencia de usuario e incluso puede afectar negativamente su clasificación en los motores de búsqueda.

Al mejorar su página 404 de WordPress, puede enviar visitantes a publicaciones populares, aumentar las páginas vistas y reducir la tasa de rebote, y convertir a los visitantes únicos en lectores y clientes a largo plazo.

Ejemplo de página 404

Cuando un visitante permanece en su sitio por más tiempo, es más probable que realice una compra, lea más publicaciones, se una a su lista de correo electrónico y más.

Además, puede mejorar su SEO de WordPress, por lo que obtendrá más tráfico en los motores de búsqueda.

Nota: Es importante crear una página 404 personalizada, pero también debe realizar un seguimiento de las URL 404 que los visitantes usan para visitar su sitio web y luego configurar las redirecciones adecuadas para mejorar la clasificación de SEO.

Para obtener más detalles, consulte nuestra guía sobre cómo rastrear fácilmente las páginas 404 y redirigirlas en WordPress.

Dicho esto, echemos un vistazo a cómo puede mejorar su plantilla de página 404 en WordPress.

Método 1. Cree una página 404 personalizada en WordPress sin código

La mejor y más amigable forma para principiantes de mejorar su plantilla de página 404 es usar el generador de páginas SeedProd plugin.

SeedProd es el mejor creador de páginas de destino para WordPress. Le permite crear, editar y personalizar sus páginas de WordPress sin escribir ningún código.

Con este plugin, puede crear fácilmente una página 404 personalizada utilizando las plantillas de página 404 incluidas.

Lo primero que debe hacer es instalar SeedProd plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Nota: hay un versión gratuita de SeedProd disponible, pero usaremos la versión Pro ya que tiene las plantillas de página 404 que necesitamos.

Tras la activación, debe navegar a SeedProd »Configuración e ingrese su clave de licencia. Puede encontrar esta información en la página de su cuenta en el sitio web de SeedProd.

Ingrese la clave de licencia de SeedProd

Después de eso, ve a SeedProd »Páginas y haga clic en el botón ‘Configurar una página 404’ en el metabox de ‘Página 404’.

Esto lo llevará a una página donde puede seleccionar su plantilla de página 404.

Configurar página 404

Hay docenas de plantillas de página 404 diseñadas profesionalmente que puede elegir para ayudarlo a comenzar rápidamente.

Para seleccionar una plantilla, coloque el cursor sobre ella y haga clic en el icono ‘Marca de verificación’. Para este tutorial, usaremos la plantilla ‘Oh No 404 Page’, pero puede usar cualquier plantilla que desee.

Seleccione la plantilla de página 404

Después de seleccionar una plantilla, será llevado al generador de arrastrar y soltar, donde puede comenzar a personalizar su página 404.

Encontrará bloques y secciones que puede agregar a su página 404 en el lado izquierdo de la pantalla. El lado derecho de la página es la vista previa en vivo. Todos los elementos de la página se pueden editar y personalizar.

Editor de SeedProd

Primero, agregaremos texto y les diremos a los usuarios qué hacer a continuación. En lugar de simplemente aterrizar en una página 404 y marcharse, puede dirigir a sus visitantes hacia contenido valioso y las próximas acciones a realizar.

Para hacer esto, arrastre el bloque ‘Texto’ a su página y haga clic en él para cambiar el texto.

Agregar bloque de texto

A continuación, cambiaremos el enlace del botón de la página de inicio y, en su lugar, enlazaremos a uno de los contenidos más valiosos.

Esta puede ser una publicación en su blog de WordPress que sea la más popular o la que le brinde la mayor cantidad de ingresos.

Primero, arrastre sobre el bloque ‘Título’ y agregue su nuevo título.

Agregar bloque de título

Luego, arrastre sobre otro bloque de ‘Texto’ e ingrese un texto que describa su artículo.

Después de eso, haga clic en el botón para abrir la pantalla del editor de botones.

Cambiar el texto del botón

Aquí puede personalizar el texto, el color, el tamaño y más.

Agregue sus publicaciones más populares a su página 404 de WordPress

A continuación, puede agregar sus artículos más populares. Dado que se ha demostrado que estos artículos son populares, es muy probable que sus visitantes encuentren algo que les guste.

La forma más sencilla de hacerlo es mediante el MonsterInsights plugin. Es la mejor solución de análisis para WordPress utilizada por más de 3 millones de sitios web.

Con este plugin, simplemente puede agregar publicaciones populares en cualquier lugar de su sitio web de WordPress.

Para obtener más detalles, consulte nuestra guía sobre cómo mostrar publicaciones populares por vistas en WordPress.

Una vez el plugin está activado y configurado, todo lo que tiene que hacer es agregar un solo shortcode a tu página.

Para hacer esto, simplemente arrastre el bloque ‘Shortcode’ a su página.

Agregar shortcode cuadra

Luego, ingrese lo siguiente shortcode para mostrar sus publicaciones más populares.

[monsterinsights_popular_posts_widget theme="beta"]

La theme=“beta” parte se refiere a cómo se mostrarán sus publicaciones populares. Si desea ver cómo se ven los diferentes temas, vaya a Insights »Publicaciones populares y haga clic en ‘Widget de publicaciones populares’.

En la sección ‘Elegir tema’, puede ver cada uno de los temas y sus nombres.

Elija el tema de las publicaciones populares

También puede agregar un título encima de sus publicaciones populares siguiendo los mismos pasos anteriores.

Agregue un formulario de contacto a su página 404 de WordPress

Después de eso, puede agregar un formulario de contacto directamente a su página 404. Esto permite que sus visitantes se comuniquen con usted si no pueden encontrar lo que estaban buscando en los enlaces de arriba.

La mejor manera de agregar un formulario de contacto a su sitio es utilizando el WPForms plugin. Es el mejor formulario de contacto plugin para WordPress utilizado por más de 4 millones de sitios web.

Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.

Una vez el plugin está activado y configurado, simplemente puede arrastrar el bloque ‘Formulario de contacto’ a su página.

Agregar bloque de formulario de contacto

Luego, todo lo que tiene que hacer es seleccionar su formulario de contacto de la lista desplegable.

Primero debe crear su formulario de contacto antes de poder agregarlo a su página 404.

Seleccione el menú desplegable del formulario de contacto

También puede agregar un bloque de ‘Título’ o ‘Texto’ encima de su formulario de contacto.

Siga los mismos pasos que el anterior para agregar esos bloques.

Bloque de título de formulario de contacto

Una vez que haya terminado de realizar los cambios, asegúrese de hacer clic en “Guardar” en la esquina superior derecha de la página.

Si desea publicar su página en vivo, seleccione la flecha desplegable junto a “Guardar” y haga clic en “Publicar”.

Guardar cambios y hacer que la página esté activa

También puede cambiar el logotipo y el menú de navegación haciendo clic en ellos y haciendo cambios con el panel de la izquierda, luego siguiendo el mismo proceso de edición que el anterior.

Siéntase libre de continuar personalizando su página, agregando nuevos bloques y probando diferentes diseños para ver qué prefieren sus visitantes.

Plantilla de página 404 final

Si es propietario de una tienda WooCommerce, puede personalizar su página 404 mostrando productos populares para ayudarlo a obtener más ventas.

Para activar su nueva página 404, vuelva a SeedProd »Páginas y luego cambie el interruptor ‘Página 404’ a ‘Activo’.

Activar la página 404

Ahora, sus visitantes verán su página 404 de alta conversión, en lugar de la opción predeterminada.

Consejo profesional: puede realizar un seguimiento del rendimiento de su página 404 de WordPress para ver cómo se está convirtiendo y qué cambios son los más útiles. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar Google Analytics en WordPress.

Método 2. Cree una página 404 personalizada en WordPress agregando código

Este método no es tan fácil de usar para principiantes porque tendrá que agregar código y modificar los archivos de tema de WordPress.

Si no ha hecho esto antes, consulte nuestra guía para principiantes para pegar fragmentos de la web en WordPress.

Primero, debe crear un nuevo archivo en su carpeta de temas de WordPress y nombrarlo 404.php. Si tu tema ya tiene un 404.php archivo, entonces deberá editar ese archivo en su lugar.

Para editar este archivo, debe conectarse a su cuenta de alojamiento de WordPress con un cliente FTP o su herramienta de administración de archivos.

Archivo FTP 404.php

Una vez que esté conectado a su sitio web, podrá ver su 404.php archivo en la carpeta de su tema de WordPress.

Nota: antes de personalizar su tema de WordPress, le recomendamos que haga una copia de seguridad de su sitio de WordPress. Para obtener más detalles, consulte nuestra guía sobre cómo realizar una copia de seguridad y restaurar su sitio de WordPress.

Mostrar publicaciones más populares en la página 404

Lo primero que debe hacer es instalar y activar la aplicación gratuita. Publicaciones populares de WordPress plugin. Es una de las mejores publicaciones populares. plugins para WordPress.

Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Tras la activación, debe agregar esta etiqueta de plantilla en su 404.php archivo donde desea mostrar las publicaciones populares.

<?php wpp_get_mostpopular(); ?>

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

Para agregar las publicaciones más comentadas a su página 404 de WordPress, usaremos el mismo plugin activaste arriba.

Simplemente agregue la siguiente 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 mostrar las publicaciones más comentadas en WordPress.

Mostrar publicaciones recientes en la página 404

Hay varias formas de mostrar publicaciones recientes en WordPress.

La forma más fácil es agregar esta etiqueta de plantilla en su plantilla 404 para mostrar sus publicaciones recientes.

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

Mostrar publicaciones aleatorias 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>

Agregar archivos mensuales con archivos compactos

Si tiene mucho contenido en su sitio web, una excelente manera de organizarlo es mostrando sus archivos mensuales.

Aquí en , mostramos nuestros archivos mensuales en nuestra página 404 usando el Archivos compactos plugin. Esto plugin es desarrollado y mantenido por nuestro equipo.

Para obtener más detalles, consulte nuestra guía sobre cómo crear archivos compactos en WordPress.

Una vez el plugin está activado y configurado, simplemente agregue el siguiente código a su 404.php expediente.

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

Cuando un usuario llega a su página 404, verá sus archivos de publicaciones compactos.

Así es como se muestra en nuestra página 404.

Archivos compactos

Una plantilla 404 de muestra para WordPress

Aquí tienes una muestra 404.php archivo basado en la plantilla de página 404 predeterminada del tema de WordPress Twenty Twenty-One.

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

    <header class="page-header alignwide">
        <h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
    </header><!-- .page-header -->

    <div class="error-404 not-found default-max-width">
        <div class="page-content">
            <p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
            <?php get_search_form(); ?>
            
            <h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
            
        </div><!-- .page-content -->
    </div><!-- .error-404 -->

<?php
get_footer();

Compare esta plantilla 404 con la plantilla predeterminada en Twenty Twenty-One.

Notará que justo después del formulario de búsqueda hemos agregado nuestro código personalizado para mostrar publicaciones populares, más comentadas y recientes.

Después de eso, agregamos CSS personalizado a la hoja de estilo del tema de WordPress para dividirlo en columnas.

Para obtener más detalles, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.

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

Este es el resultado final después de agregar el código de página 404 personalizado anterior.

Ejemplo de página 404 personalizada

Esperamos que este artículo le haya ayudado a mejorar su plantilla de página 404 en WordPress. Es posible que también desee ver los mejores ejemplos de diseño de páginas de error 404 de WordPress y nuestras selecciones de expertos del mejor software de notificación push web para aumentar el tráfico de su sitio web.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

Cómo mejorar su plantilla de página 404 en WordPress (2 formas) .

Fuente: wpbeginner

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *