¿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:
<?phpget_header();?><divclass="container"><divclass="page-404"><h1>404 - Página no encontrada</h1><h2><ahref="<?phpechoesc_url(home_url('/'));?>">Haz clic aquí para volver a la página principal</a></h2></div></div><?phpget_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!
Impresionante bro!
Dónde encuentras imágenes como esa? :o
Esta me encanta tmb
jajajajaja, buena onda ese 404
jajajaja, me encanta!
Mi 404:
oh que buena XD
igual opino. q buena :V
Yo por mi parte en vez de la principal retorno a la pagina anterior
`<?php get_header() ?>
<main class="container ">
<div class="pagina404 my-5">
<h1>404 PÁGINA NO ENCONTRADA</h1>
<h2> Haga <a href="javascript:history.go(-1) "> click aqui </a> para ir a la pagina anterior</h2>
</div>
</main>
<?php get_footer() ?>````
es una gran ayuda, no sabía como se hacía esto. Lo que se me ocurre como añadidura es el hacer una función y en la función validar si la url anterior pertenece a una página dentro de la web o le envía fuera, para cambiar el enlace por la página principal y así mantenerlo dentro de la web
Hola Cristian.
Quisiera que me comentaras buenas practicas de estructura de carpetas para plugins?
He visto varios tipos de estructuras de plugins profesionales pero la verdad no hay pareciera que siguen la misma regla. Hay algun standard que pueda seguir o un punto de partida.
He visto
assets (css)
include (clases, hooks,funciones )
src (clases, hooks,funciones )
admin (clases, hooks,funciones )
controllers ((clases, hooks,funciones )
podrias orientarme un poco sobre todo el las que va el codigo php, como lo clasifico en cada carpeta. que va en donde y porque?
Ya tengo un plugin desarrollado y quiero organizarlo para que pueda hacerlo mas mantenible.
gracias
Esa es una excelente pregunta. Agrego aquí mi comentario para que me llegue una notificación cuando la respondan.😁
idem
Listo mi 404:
Algo simple uwu
como subo una imagen a la pagina 404?
Comparto mi 404
No termino de entender que una pagina de error 404 no sea aprovechada. Lo veo hasta en los grandes website.
Para no perder la visita se puede colocar uno o varios de estos elementos::
_un buscador
_link a contactenos
_paginas mas visitadas
_ultimas paginas vistas
_otro q interese mucho (a la visita, no al vendedor) de acuerdo al nicho del site
He verificado el código, el nombre del archivo como recomendado así como la carpeta en la que se encuentra y por ese lado todo está en orden pero la vista de mi página 404.php no se genera. Me aparece la por defecto .
Por otro lado me pregunto si es normal que en el menu lateral "paginas" de WP no tenga una página que se relacione con el archivo 404.php ?
Hola, Dario! WordPress asigna la vista por defecto de la página 404 al archivo 404.php. Subí acá un screen de la lista de archivos de tu theme. :)
Creo tener el código correcto pero no carga la pagina 400.
Qué puede ser ?
<?php get_header()?><main class="container"><div class="pagina404 my-5"><h1>404PAGINANOENCONTRADA</h1><h2>Haga<a href="<?php echo home_url();?>">click aquí</a> para volver a la página principal</h2></div></main><?php get_footer()?>
Hola, Dario! Verificá que el archivo se llame 404.php
Hola Cristian,
Gracias por tu respuesta, he verificado el nombre del archivo, está correcto. He verificado de igual manera la carpeta en la que se encuentra y está en orden.
Al buscar una pagina me carga un mensaje de error 404 pero no es el que configuramos en la práctica.
Me pregunto si me salte algún paso en las clases anteriores y si es necesario una configuración previa en WordPress para que la pagina 404.php que creamos se visualise.
Muchas gracias por tu ayuda!
Pagina 404
Crear archivo 404.php
<?php get_header()?><main class="container"><div class="pagina404 my-5"><h2>404PAGINANOENCONTRADA</h2><!-- echo para que se pueda enviar --><h3>Haga<a href="<?php echo home_url() ?>"> click aqui </a> para volver a la pagina principal </h3></div></main><?php get_footer()?>
una duda, la pagina de error 404, ocupa llamarse asi , o que es lo que lo enlaza que cuando no se ingresa una url correcta esta salga
Cree los archivos del curso en mi carpeta de wordpress pero no funcionan cuando entro a mi localhost.
Genial en todo desarrollo web se necesita una página 404!.