Creación de Página 404 Personalizada en WordPress

Contenido del curso

Comenzar con WordPress

Armar estructura del Theme

Contruir vistas

Personalizar el Loop de WordPress

Extra

Cierre del curso

31
Fundamentos de WordPress: Creación de Catálogo de Productos
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:41

Creación de Página 404 Personalizada en WordPress

Curso de WordPress Práctico

Clase 30 de 31

Clase 30 / 31

Recursos

¿Cómo crear una página de error 404 personalizada en WordPress?

Para todo desarrollador web, es importante crear experiencias de usuario efectivas, incluso cuando los visitantes aterrizan en una página inexistente. La página de error 404 personalizada no solo indica que el contenido buscado no se encuentra, sino que también ofrece una oportunidad para redirigir a los usuarios de vuelta a un lugar útil dentro de tu sitio. Aprenderás a construir una página de error 404 y cómo integrarla apropiadamente en tu tema de WordPress. ¡Sigamos adelante!

¿Qué necesitamos para empezar?

Antes de comenzar con la implementación técnica, asegúrate de tener acceso a la carpeta principal de tu tema de WordPress. Serás responsable de crear un archivo específico que controlará la visualización de la página 404.

¿Cómo generamos el archivo 404.php?

Para insertar una página 404 personalizada, debemos crear un archivo específico:

Navega a la carpeta principal del tema de WordPress que estés utilizando.
Crea un nuevo archivo llamado 404.php.
Al igual que con otros archivos plantilla de WordPress, este archivo debe incluir las secciones de encabezado y pie de página, las cuales se gestionan mediante funciones PHP.

¿Cómo estructurar la página de error en HTML y PHP?

En la creación de la página, la estructura HTML y el uso de PHP son esenciales. Vamos a generar un mensaje de error dentro de un contenedor específico:

<?php get_header(); ?>

<div class="container">
    <div class="page-404">
        <h1>404 - Página no encontrada</h1>
        <h2><a href="<?php echo esc_url(home_url('/')); ?>">Haz clic aquí para volver a la página principal</a></h2>
    </div>
</div>

<?php get_footer(); ?>

¿Cómo darle estilo a la página de error?

Asegúrate de que tu archivo de estilos (CSS) ya tenga definidas clases como .page-404 que puedas utilizar para estilizar el contenedor de error. Siempre es buena práctica comprobar que los estilos están siendo aplicados mediante un control de calidad visual en el navegador.

¿Cómo verificar el funcionamiento de la página de error?

Una vez que tu archivo 404.php está configurado correctamente:

Abre tu navegador web.
Intenta acceder a una URL en tu sitio que no exista.
Deberías ver la nueva página de error 404 que has creado.
Haz clic en el enlace proporcionado y verifica que redirija efectivamente a la página principal de tu sitio.

Este proceso no solo mejora la usabilidad de tu sitio, sino que también es una excelente manera de mostrar un toque de profesionalismo y cuidar la experiencia del usuario.

Importancia de una página de error 404 personalizada

Crear una página 404 personalizada no solo ayude en temas de usabilidad y estética para el usuario, sino que también puede impactar positivamente en la optimización SEO del sitio al tratar de manera más amigable los posibles errores de navegación. Además, es una buena oportunidad para:

Ofrecer enlaces a contenido importante o comúnmente utilizado.
Incluir una barra de búsqueda para facilitar el acceso al contenido.
Mostrar creatividad o humor para mitigar la frustración del visitante.

Implementa tu propia página 404 personalizada y observa cómo mejora la interacción del usuario con tu sitio web. ¡No olvides compartir tus experiencias!