Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 9
En el capítulo anterior creamos la plantilla search.html, encargada de mostrar los resultados de las búsquedas realizadas por los visitantes del sitio. Ahora continuaremos desarrollando nuestro tema creando la plantilla 404 en WordPress.
En esta parte vamos a crear la plantilla 404 en WordPress mediante el archivo 404.html, utilizado cuando un usuario intenta acceder a una página que no existe o cuya dirección ha cambiado.
Aunque se trata de una página de error, una buena plantilla 404 puede ayudar al visitante a continuar navegando por el sitio, ofreciéndole información útil y facilitándole el acceso a otros contenidos.
Al finalizar este capítulo, nuestro tema Full Site Editing dispondrá de una página 404 completamente personalizada e integrada con el diseño del resto del sitio.
¿Qué es la plantilla 404.html?
La plantilla 404.html es la encargada de mostrar una página de error cuando un visitante intenta acceder a una dirección que no existe en el sitio web.
Esta situación puede producirse, por ejemplo, cuando se escribe una URL incorrecta, se sigue un enlace roto o se intenta acceder a una página que ha sido eliminada o cuya dirección ha cambiado.
Si el tema dispone de una plantilla 404.html, WordPress la utilizará automáticamente para mostrar esta página cuando no encuentre el recurso solicitado.
Gracias a esta plantilla podemos ofrecer una página de error totalmente integrada con el resto del sitio y adaptada a la experiencia de navegación que queremos ofrecer a nuestros visitantes..
¿Qué vamos a construir?
En este capítulo crearemos una plantilla 404.html sencilla, pero lo suficientemente completa para informar al visitante de que la página solicitada no existe y ofrecerle una forma de continuar navegando por el sitio.
La plantilla estará compuesta por los siguientes elementos:
- Cabecera del sitio.
- Un título indicando que la página no existe.
- Un breve texto explicativo.
- Un bloque Buscar, para facilitar la localización del contenido.
- El pie de página
La estructura será la siguiente:
Cabecera
├── Espaciador
├── Grupo
│ ├── Título
│ ├── Párrafo
│ └── Buscar
└── Pie de página
Creando la plantilla 404.html
Lo primero que haremos será crear el archivo 404.html dentro de la carpeta templates de nuestro tema.
Una vez creado el archivo, WordPress lo detectará automáticamente y mostrará una nueva plantilla llamada Página: 404 dentro de Apariencia → Editor → Plantillas.
Editando la plantilla 404.html
Abre la plantilla Página: 404 y añade los bloques hasta obtener la siguiente estructura:
Puedes ampliar conocimientos visitando:
Bloque de encabezado
Bloque de párrafo
Bloque de búsqueda