Cómo editar una página 404 en WordPress (Guía de personalización) | Mejoras de WP

Todos los creadores de contenido y administradores de sitios saben que los pequeños detalles son muy importantes y que no hay una segunda impresión en Internet. Una hermosa combinación de colores, un excelente efecto de animación o una atractiva página 404 son detalles que hacen o deshacen la experiencia del usuario.

Una página 404 es la expresión técnica que describe situaciones en las que no se encuentra una página. Por ejemplo, podría deberse a que el usuario escribe mal una URL en la pestaña del navegador o que la página web ya no está en línea.

En los siguientes párrafos, aprenderá cómo editar una página 404 en WordPress. Una página 404 atractiva es la mejor solución para superar un momento embarazoso. En lugar de decepcionar a los visitantes del sitio, una excelente página 404 contribuirá a una mejor imagen de su marca.

Qué es una página 404

Hace clic en un enlace o escribe una dirección URL en la pestaña del navegador. A continuación, el navegador comienza a solicitar datos del servidor que aloja el sitio web que desea visitar. Esta es una explicación básica de la navegación por Internet. El intercambio de información entre navegador y servidor implica, entre muchos otros, algunos códigos de estado. Además, hay estados para describir la redirección de la página web, los errores del cliente o del servidor, o con fines informativos.

Todos los códigos de estado con el formulario 4XX se refieren a errores del cliente. Por ejemplo, 403 Prohibido es cuando el servidor entiende la solicitud del navegador pero se niega a proporcionar los datos. De lejos, la página 404 es el código de estado más famoso. Obtiene una página 404 cuando hace clic en un enlace roto, ingresa una URL incorrecta que conduce a una página web inexistente o si el recurso que solicitó nunca existió.

Incluso los sitios esenciales, como grandes noticias de revistas o tiendas muy visitadas, pueden contener un error de página 404. Por supuesto, es inevitable, pero debes saber cómo pasar por alto la situación embarazosa. Por lo tanto, ayudaría si hiciera todo lo posible para crear una página de error 404 atractiva para su sitio.

La anatomía de una buena página 404

Algunos sitios web obtienen un vínculo de retroceso y reconocimiento público al mencionarlos en listas con páginas 404 geniales. Los visitantes del sitio aprecian un buen diseño o un mensaje humorístico en una página 404. Esto debería convencerlo de que una página de error 404 atractiva es una prioridad para sus negocios en línea. Esto es lo que debe incluir una buena página 404:

● El mensaje de error: los usuarios deben darse cuenta de un problema desde el momento en que aterrizan en una página 404. Hazlo explícito para que todos entiendan.

● Vínculos a su contenido: no desea que los usuarios abandonen su sitio. Proporcionarles enlaces a contenido relevante. Ya sea tu mejor contenido o algo relacionado con la página que falta, depende totalmente de ti. Lo que importa es mantenerlos en su sitio.

● Disculpas: permite que las personas sepan que lamentas las molestias. Utilice el humor si es posible: es el mejor método para alentarlos a que le den una segunda oportunidad a su sitio.

● Buen diseño : las personas se sienten decepcionadas cuando llegan a una página 404 y tienden a reaccionar de forma exagerada. Una impresionante pieza de diseño, además de un contenido atractivo, puede hacerles cambiar de opinión. Haz tu mejor esfuerzo para crear una excelente página 404.

Cómo editar una página 404 en WordPress

Por suerte, tenemos varias opciones para editar una página 404 en WordPress. Los usuarios más experimentados pueden optar por editar el archivo 404.php. Este es el archivo responsable de mostrar la página de error 404. Los administradores web que prefieren usar un creador de páginas como Elementor pueden crear una página 404. Finalmente, algunos complementos para hacer páginas 404 están disponibles para aquellos que no tienen habilidades de codificación. Analicemos todas las formas de crear y editar una página 404 en WordPress.

Editar una página 404 a través de un cliente FTP

Una buena regla general es realizar una copia de seguridad de su sitio antes de editar el código. Nunca omita este paso: en la mayoría de los casos, no necesitará una copia de seguridad del sitio, pero suceden cosas malas cuando no está preparado. ¡Así que haz esa copia de seguridad para estar seguro!

Supongamos que realizó una copia de seguridad completa del sitio y está listo para profundizar en el asunto. Utilice el cliente FTP de su elección y conéctese al sitio localhost. Busque un archivo llamado archivo 404.php: es el archivo responsable de mostrar la página web de error 404. Por lo general, los temas de WordPress tienen un archivo 404.php dedicado, pero algunos pueden perder este archivo. Vuelva a verificar si el código de su tema incluye un archivo 404.php. Si su tema no tiene un archivo 404.php, deberá crear uno. Cree un nuevo archivo y copie las siguientes líneas de código:

Plantilla de página 404

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div 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'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(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

Fuente : Creación de una página de error 404 en WordPress Codex

Este es el código detrás del tema 404 Page of Twenty Thirteen: es una página básica adecuada para editar y usar para su proyecto. Por supuesto, puede echar un vistazo a otros temas predeterminados de WordPress y consultar sus páginas 404. La página 404 del tema Twenty Thirteen llama el encabezado y el pie de página de su sitio, por lo que la página está en línea con el estilo de su sitio. No importa cómo se vea su sitio, la página de error 404 tendrá un diseño similar. Sin embargo, debe adaptar el contenido que se muestra en esta página. En esta etapa, interviene el talento de tu creador de contenido.

Opcionalmente, puede editar el archivo 404.php para mostrar el contenido publicado en su sitio. Las opciones son infinitas, así que veamos algunas posibles modalidades para mejorar el error de la página 404.

• Muestre los títulos de las últimas siete publicaciones: todo lo que tiene que hacer es pegar este fragmento de código en el archivo 404.php:

 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>

• Mostrar los títulos de siete publicaciones aleatorias Pegue el siguiente código para mostrar siete publicaciones aleatorias:

 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

Agregue su logotipo o una imagen divertida (los gatos y los perros siempre funcionan) para hacer sonreír a los espectadores y darle una segunda oportunidad. Luego, pruebe la página 404 después de terminar el trabajo de edición. Para mostrar su página 404, escriba la dirección de su sitio en la barra del navegador y agregue una cadena aleatoria de letras después. El resultado debería ser algo como esto:

 https://example.com/dfdfddfd

Si no funciona, es porque el servidor no puede encontrar su archivo 404.php personalizado. En este escenario, debe ir al archivo .htaccess del sitio y pegar la siguiente línea de código:

ErrorDocumento 404 /index.php?error=404

Importante : si edita un sitio web nuevo o lanzado recientemente, es posible que no tenga el archivo .htaccess. No es un gran problema: cambie los enlaces permanentes de su sitio y guarde su operación. Luego, vuelva a su formato de enlaces permanentes preferido inmediatamente después de eso. De esta forma habrás generado el archivo .htaccess.

Editar una página 404 a través del editor de temas (no recomendado)

Un número significativo de artículos relacionados con la edición de una página 404 en WordPress mencionan el editor de temas como una solución viable. ¡No es! Aunque es conveniente y sencillo editar el código del sitio directamente desde el panel de administración de WordPress, es peligroso y puede terminar en un fiasco. Sin mencionar que no es profesional en absoluto editar el sitio mientras está en línea y accesible para todos. Además, su edición desaparece una vez que actualiza el tema (a menos que use un tema secundario).

Editar una página 404 a través de constructores de páginas

Este método es seguro, simple y efectivo. Probablemente esté familiarizado con los creadores de páginas como Elementor, Divi Builder, Beaver Builder, SeedProd o Themify Builder. Lo que elija no es relevante, siempre y cuando lo tenga bien entendido. Estos constructores le permiten crear una excelente página 404 sin escribir una sola línea de código. Esta es la mejor solución si le preocupa pegar fragmentos de código en los archivos de su sitio.

Consulte el blog y la documentación de su creador de páginas favorito y, muy probablemente, encontrará un tutorial que explica cómo crear una página 404. Además, algunos creadores de páginas tienen plantillas dedicadas para páginas 404. Elija una plantilla y personalícela para que coincida con su marca.

Complementos de WordPress de 404 páginas

No tiene muchas alternativas para crear una página 404 con un complemento dedicado. Sin embargo, algunos complementos merecen su atención. Su gran ventaja es que no tienes que escribir código para crear y editar páginas 404. Los complementos son simples, efectivos y livianos.

404 página  

Puede sentirse tentado a creer que tiene que ser un codificador para crear una buena página de error 404. Gracias a este complemento, todos pueden concebir una atractiva página de error 404. Además, el complemento 404page no es tan complejo como lo son los creadores de páginas. Te enfocas en tu producto final: una buena página de error 404.

Instalar y activar el complemento. A continuación, cree una página 404 de la misma manera que lo hace con el resto de las páginas de su sitio. Desde su panel de administración de WordPress, vaya a Apariencia > Página de error 404 y elija la página que acaba de crear para que sea la página de error 404 personalizada de su sitio.

Este complemento no permite redirigir páginas web; simplemente le dice a los robots de búsqueda que falta la página web. 404page es un proyecto personal de un desarrollador, por lo que no hay ninguna agencia detrás de este complemento. Tenga en cuenta que el complemento tiene 100 000 instalaciones activas y una calificación casi perfecta: 4,9 estrellas sobre 5. En estas circunstancias, ¡el desarrollador del complemento merece nuestro reconocimiento!

Redirección 404 a la página de inicio y redirección de imágenes rotas  

El nombre del complemento no es muy impresionante, pero es muy sugerente. El complemento maneja los errores de la página 404 de manera diferente a la alternativa anterior. En lugar de deleitar a los visitantes con una página 404 bien diseñada, este complemento redirige todos los errores 404 a la página de inicio u otra página web. La mayor ventaja de este complemento es que tiene control sobre los enlaces rotos en su sitio. Además, puede usar este complemento para redirigir a los usuarios. Por ejemplo, en lugar de permitir que las personas visiten una publicación de blog no actualizada, use este complemento para llevarlos a la versión actualizada.

Colorlib 404 Personalizador  

Este complemento es fácil de usar y realmente lo ayuda a crear páginas 404 atractivas. Viene con plantillas 404 diseñadas profesionalmente que puede personalizar para satisfacer sus necesidades. El complemento Colorlib 404 Customizer permite insertar botones de redes sociales, cambiar el color o la imagen de fondo y configurar los encabezados de texto. Los usuarios más avanzados pueden agregar un código CSS personalizado. El complemento es de código abierto, por lo que puede contribuir a mejorarlo.

Utilice un generador de páginas o hágalo a través de su tema .

Si ya usa un creador de páginas, ya tendrá la opción de personalizar su 404 a través de él. Casi todos los creadores de páginas te permiten editar tu página 404. Aquí hay una lista de complementos en los que estamos seguros de que puede hacerlo:

● ventoso

● Elementor

● Constructor de castores

● Creador de divisiones

● Origen del sitio

Si está utilizando un tema como OceanWP, GeneratePress o Astra, puede hacerlo a través de sus opciones de tema. Obtendrá una página 404 de aspecto excelente si importa contenido de demostración. El único inconveniente de importar contenido de demostración y usar diseños preconstruidos es que su sitio web se verá más o menos exactamente como la demostración. Tome, por ejemplo, este sitio web y la demostración de Astra. Cualquiera que haya consultado la biblioteca de sitios de inicio de Astra reconocerá rápidamente que los propietarios del sitio web no lo han creado ellos mismos. Esto podría perjudicar la confianza de los usuarios en su sitio.

En el lado positivo, Astra, OceanWP y los otros temas con más de 500.000 usuarios amplían más su biblioteca de sitios de inicio cada mes.

A ti

Ahora tiene una idea clara sobre cómo editar una página 404 en WordPress. Hay muchas soluciones para hacerlo, y debe seleccionar la adecuada para sus habilidades y necesidades. Lo que importa es tener una emocionante página de error 404 para deleitar a sus espectadores. El método y las herramientas que utiliza para diseñar e implementar esa página 404 no conciernen a sus clientes. ¡No tienes excusa para carecer de una excelente página de error 404! ¡Vaya al tablero de dibujo y comience a crear una página de error personalizada!