Introducción
Personalizar la página 404 de WordPress no es solo una cuestión estética: es una oportunidad para retener visitantes, mejorar la experiencia de usuario y guiar a la audiencia hacia contenido útil. Este tutorial muestra paso a paso cómo diseñar una 404 atractiva usando HTML y CSS directamente desde la plantilla del tema (o child theme), incluyendo ejemplos prácticos de código y recomendaciones de accesibilidad y rendimiento.
Requisitos previos
- Acceso al directorio del tema activo (preferible usar un child theme para no perder cambios con actualizaciones).
- Conocimientos básicos de PHP en WordPress (funciones como get_header(), get_footer() y get_search_form()).
- Editor de código o FTP/SFTP para subir archivos al servidor.
Ubicación y jerarquía: crear 404.php
La plantilla que WordPress carga para errores 404 es 404.php en la carpeta del tema activo. Si no existe, WordPress usará otras plantillas según la jerarquía, pero lo correcto es crear y personalizar 404.php en tu child theme.
Ejemplo básico de 404.php
Coloca este archivo en la carpeta del child theme: wp-content/themes/tu-child-theme/404.php. El ejemplo integra encabezado y pie del tema y una estructura semántica para la página de error.
lt?php
get_header()
?gt
ltmain class=page-404 role=maingt
ltsection class=container-404gt
ltdiv class=visual-404gt
lt!-- Aquí puedes insertar un SVG o una imagen decorativa --gt
ltsvg width=280 height=180 viewBox=0 0 280 180 aria-hidden=truegt
ltrect x=0 y=0 width=280 height=180 rx=12 fill=#f5f7fb/gt
lttext x=50% y=50% dominant-baseline=middle text-anchor=middle font-size=42 fill=#6b7280gt404lt/textgt
lt/svggt
lt/divgt
ltdiv class=content-404gt
lth2gtPágina no encontradalt/h2gt
ltpgtLo sentimos, la página que buscas no existe o ha sido movida. Prueba una de las opciones siguientes:lt/pgt
ltform role=search method=get class=search-form-404 action=lt?php echo esc_url( home_url(/) ) ?gtgt
ltlabelgtltspan class=screen-reader-textgtBuscar:lt/spangt
ltinput type=search name=s placeholder=Buscar en el sitio... value=lt?php echo esc_attr( get_search_query() ) ?gt /gt
lt/labelgt
ltbutton type=submitgtBuscarlt/buttongt
lt/formgt
ltul class=links-404gt
ltligtlta href=lt?php echo esc_url( home_url(/) ) ?gtgtIr a la página principallt/agtlt/ligt
ltligtlta href=lt?php echo esc_url( home_url(/blog/) ) ?gtgtVisitar el bloglt/agtlt/ligt
ltligtlta href=lt?php echo esc_url( home_url(/contacto/) ) ?gtgtContactolt/agtlt/ligt
lt/ulgt
ltdiv class=suggestions-404gt
lth3gtContenido recomendadolt/h3gt
lt?php
// Mostrar 3 entradas recientes como sugerencia
recent = new WP_Query(array(posts_per_page =gt 3, post_status =gt publish))
if(recent-gthave_posts()): ?gt
ltulgt
lt?php while(recent-gthave_posts()): recent-gtthe_post() ?gt
ltligtlta href=lt?php the_permalink() ?gtgtlt?php the_title() ?gtlt/agtlt/ligt
lt?php endwhile wp_reset_postdata() ?gt
lt/ulgt
lt?php endif ?gt
lt/divgt
lt/divgt
lt/sectiongt
lt/maingt
lt?php
get_footer()
?gt
Estilizando la 404: CSS propuesto
A continuación hay una hoja de estilos que puedes añadir a style.css de tu child theme o encola como archivo independiente. El diseño incluye un fondo suave, tarjeta centrada, tipografía grande y botones accesibles.
/ Estilos para la página 404 /
.page-404 {
display: flex
align-items: center
justify-content: center
padding: 60px 20px
min-height: calc(100vh - 200px) / ajustar según header/footer /
background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%)
color: #111827
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}
.container-404 {
display: flex
gap: 40px
align-items: center
max-width: 1100px
width: 100%
background: #fff
border-radius: 14px
box-shadow: 0 10px 30px rgba(15,23,42,0.08)
padding: 32px
box-sizing: border-box
}
.visual-404 {
flex: 0 0 320px
display: flex
align-items: center
justify-content: center
}
.content-404 {
flex: 1 1 auto
min-width: 260px
}
.content-404 h2 {
font-size: 28px
margin: 0 0 8px
color: #0f172a
}
.content-404 p {
margin: 0 0 20px
color: #475569
}
.search-form-404 {
display: flex
gap: 8px
margin-bottom: 18px
}
.search-form-404 input[type=search] {
flex: 1 1 auto
padding: 12px 14px
border-radius: 8px
border: 1px solid #e6e9ee
font-size: 15px
}
.search-form-404 button {
background: linear-gradient(180deg,#2563eb,#1d4ed8)
color: #fff
border: none
padding: 12px 18px
border-radius: 8px
cursor: pointer
font-weight: 600
}
.links-404 {
display: flex
gap: 12px
margin: 0 0 18px
list-style: none
padding: 0
}
.links-404 li a {
color: #2563eb
text-decoration: none
background: rgba(37,99,235,0.08)
padding: 8px 12px
border-radius: 8px
display: inline-block
font-weight: 600
}
.suggestions-404 h3 {
margin: 18px 0 8px
font-size: 16px
}
.suggestions-404 ul {
margin: 0
padding-left: 18px
}
/ Responsive /
@media (max-width: 880px) {
.container-404 { flex-direction: column text-align: center }
.visual-404 { order: -1 }
.links-404 { justify-content: center flex-wrap: wrap }
}
Encolar estilos solo en la página 404 (opcional)
Si prefieres cargar una hoja de estilos dedicada únicamente en 404, añade este fragmento a functions.php del child theme. Así evitas cargar CSS innecesario en otras páginas.
/ Encolar CSS solo en la página 404 /
function tu_tema_enqueue_404_styles() {
if ( is_404() ) {
wp_enqueue_style( tema-404, get_stylesheet_directory_uri() . /css/404.css, array(), 1.0 )
}
}
add_action( wp_enqueue_scripts, tu_tema_enqueue_404_styles )
Ilustraciones y SVG: ligero y escalable
Usar SVG inline permite controlar colores con CSS y mantener archivos ligeros. Si colocas un SVG grande, considera optimizarlo (SVGO) y aplicar aria-hidden=true si es puramente decorativo. El ejemplo en 404.php incluía un SVG minimalista puedes reemplazarlo por ilustraciones más completas manteniendo accesibilidad.
Ejemplo de SVG decorativo (inline)
ltsvg width=220 height=140 viewBox=0 0 220 140 role=img aria-hidden=truegt ltrect x=4 y=8 rx=10 width=212 height=124 fill=#eef2ff/gt ltcircle cx=110 cy=62 r=30 fill=#c7d2fe/gt lttext x=110 y=78 text-anchor=middle fill=#3730a3 font-size=28gt404lt/textgt lt/svggt
Buenas prácticas de UX, accesibilidad y SEO
- Mensaje claro: Usa un título directo (Página no encontrada) y un breve texto explicativo.
- Búsqueda visible: Añade un formulario de búsqueda para que el usuario busque contenido alternativo.
- Enlaces útiles: Incluye enlaces a inicio, categorías principales, blog o contacto.
- Accesibilidad: Asegúrate de usar roles y etiquetas ARIA si es necesario los contrastes deben cumplir WCAG mínimo.
- Evitar 404s técnicos: devuelve un estado HTTP correcto (WordPress ya gestiona esto) y no redirijas masivamente a la Home sin sentido — usa redirecciones 301 solo cuando sea apropiado.
- Velocidad: optimiza imágenes y SVG y encola CSS solo cuando sea necesario.
Pruebas y despliegue
- Sube el archivo 404.php al child theme y el CSS correspondiente.
- Visita una URL inexistente del sitio y verifica el renderizado en escritorio y móvil.
- Comprueba el HTML resultante con herramientas de accesibilidad y Lighthouse (contraste, tamaño de fuente, estructura semantic).
- Verifica que el servidor devuelve el código 404 (herramientas de red del navegador o CURL: curl -I https://tusitio.com/esta-pagina-no-existe).
Sugerencias avanzadas
- Mostrar sugerencias basadas en la URL solicitada mediante una heurística simple (buscar palabras clave y proponer contenidos relacionados).
- Registrar estadísticas de 404 (registro en Google Analytics o eventos personalizados) para detectar enlaces rotos frecuentes y corregirlos.
- Animaciones sutiles con CSS (no abusar) para dar vida a la página sin perjudicar el rendimiento.
Conclusión
Una página 404 bien diseñada reduce la frustración del usuario y puede convertir una visita perdida en una nueva interacción con el sitio. Implementa la estructura PHP propuesta, adapta los estilos CSS a la identidad visual de tu web y añade recursos útiles (búsqueda, enlaces, contenido recomendado). Con pruebas y medición podrás optimizarla para aumentar la retención y disminuir rebotes por errores de navegación.
Leave a Reply