Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 8
Hasta ahora hemos creado las plantillas necesarias para mostrar la portada, el blog, las páginas, las entradas individuales y los diferentes archivos de WordPress. En esta parte continuaremos desarrollando nuestro tema creando la plantilla de búsqueda en WordPress.
En este capítulo vamos a crear la plantilla search.html, encargada de mostrar los resultados cuando un visitante realiza una búsqueda en nuestro sitio web.
Aunque su estructura es muy similar a la plantilla archive.html, incorpora algunos elementos específicos, como el bloque Resultados de la búsqueda, que muestra automáticamente el texto de la consulta realizada por el usuario.
¿Qué es la plantilla de búsqueda en WordPress?
La plantilla search.html es la encargada de mostrar los resultados de las búsquedas realizadas desde el formulario de búsqueda de WordPress.
De esta forma, cada vez que un visitante introduce un término de búsqueda, WordPress utiliza esta plantilla para mostrar las entradas o páginas que coinciden con la consulta.
Si el tema no dispone de un archivo search.html, WordPress utilizará otra plantilla siguiendo la Jerarquía de plantillas, normalmente index.html. Por este motivo, disponer de una plantilla específica permite ofrecer una página de resultados mucho más cuidada y adaptada a las necesidades del usuario.
¿Qué vamos a construir?
En este capítulo crearemos una plantilla de búsqueda compuesta por los siguientes elementos:
- Cabecera del sitio.
- Un bloque Resultados de la búsqueda, que mostrará automáticamente el término buscado.
- Un bucle de consulta para mostrar los resultados encontrados.
- Un mensaje cuando la búsqueda no devuelva ningún resultado.
- El pie de página.
La estructura será la siguiente:
Cabecera
├── Espaciador
├── Grupo
│ └── Resultados de la búsqueda
├── Espaciador
├── Grupo
│ └── Bucle de consulta
│ ├── Plantilla de entrada
│ ├── Paginación
│ └── Sin resultados
└── Pie de página
Creando la plantilla search.html
Para crear la plantilla de búsqueda en WordPress, lo primero que haremos será crear el archivo search.html dentro de la carpeta templates de nuestro tema.
A continuación, WordPress detectará automáticamente el archivo y mostrará una nueva plantilla llamada Resultados de búsqueda dentro de Apariencia → Editor → Plantillas.
Editando la plantilla search.html
Abre la plantilla Resultados de búsqueda y añade los bloques hasta obtener la siguiente estructura:
El bloque Sin resultados
Dentro del Bucle de consulta encontrarás el bloque Sin resultados.
Este bloque se muestra automáticamente cuando la búsqueda realizada por el visitante no devuelve ninguna entrada o página.
No es necesario añadirlo manualmente, ya que forma parte del propio Bucle de consulta. No obstante, puedes personalizar su contenido para mostrar un mensaje más descriptivo o incluso añadir un formulario de búsqueda que permita al usuario realizar una nueva consulta.
Añadiendo un formulario de búsqueda
Para comprobar el funcionamiento de la plantilla search.html primero necesitamos añadir un formulario de búsqueda al sitio desde el que realizar las consultas.
Añade el bloque Buscar a la cabecera del sitio. Al integrarlo junto al logotipo y el menú de navegación, los visitantes podrán localizar rápidamente el contenido que les interese sin romper la estética del diseño.
A partir de este momento, todas las búsquedas realizadas desde el formulario utilizarán automáticamente la plantilla search.html, ofreciendo una página de resultados integrada con el diseño del tema.
Puedes ampliar conocimientos visitando:
Bloque de título de los resultados de búsqueda
Bloque de bucle de consulta
Bloque de búsqueda