El Buscador de WordPress apesta
No conozco a nadie que use WordPress que hable bien de su buscador y sigo sin entender que apenas haya evolucionado desde las primeras versiones.
No sólo es primitivo en cuanto a su funcionamiento es que no ofrece configuración alguna. Incluso el aspecto de su página de resultados deja mucho que desear. Dependiendo de la plantilla que uses puede tener un diseño algo mejor, pero por lo general sigue siendo prehistórico
El aspecto de los resultados puede mejorarse un poco con CSS y la respuesta con un plugin gratis (con versión de pago) como Relevanssi (aunque triplicará el peso de tu base de datos) o este otro que conecta con el servicio externo de Algolia (gratis hasta 10.000 solicitudes de búsqueda al mes).
Pero dejo el asunto del funcionamiento para otro día ya que aún sigo peleándome con eso y me ocuparé de las reformas puramente estéticas usando GeneratePress (GP) y GenerateBlocks (GB).
GeneratePress y GenerateBlocks
GP y GB aún son dos herramientas de un proyecto joven y mucho por delante para mejorar en usabilidad, GB no ofrece la misma curva de aprendizaje como la que podrías esperar si vienes de usar constructores como Elementor o similares.
Como veremos en este ejemplo, algunos procesos para construir determinadas cosas con GenerateBlocks son mucho más largos y laboriosos y pueden desesperar un poco en los primeros intentos. A medida que vamos añadiendo bloques se va complicando la cosa.
A cambio, cuando entiendes cómo funcionan y te haces con ellos tienes mucho más control sobre el aspecto de cada elemento.
La dificultad se equilibra con su documentación y un soporte impecable en el que sus creadores incluso echan un cable para asuntos concretos de diseño que no son de su competencia, por lo que sigue siendo una alternativa muy a tener en cuenta ya que siguen fieles a su filosofía; el código justo, limpio y ligero.
Block Elements
Blocks Elements, en adelante Elementos, fue añadido en julio de 2020 en la versión 1.11.0 de GeneratePress Premium. Puede usarse como un gancho normal para insertar contenido en casi cualquier sitio de tu blog sin tener que trastear código.
Cuando se combina con GenerateBlocks permite utilizar el editor de bloques de WordPress para crear ganchos, cabeceras, footers, barras laterales, una página "Hero", plantillas de contenido, etc.
Al lío.
Plantilla de estructura
Lo primero que haremos será crear lo que llamaremos "plantilla de estructura". Este paso es opcional, pero no está de más crear una por si un día queremos cambiar algo con un par de clics.
Le doy este nombre porque en ella sólo se definirán aspectos estructurales y no sobre su contenido. Es decir, si queremos mostrar o no la cabecera, el pie de página o sus widgets, un sidebar o definir el ancho, etc, y así no nos liamos con los nombres de los bloques del resto de pasos.
Desde el menú principal Apariencia/Elementos o bien desde la parte superior accedemos a la creación y gestión de los elementos.
Para el uso concreto que nos ocupa, al añadir un nuevo elemento elegimos Diseño y apretujamos crear.
A continuación le decimos al Elemento sobre qué página queremos que se aplique. Para ello nos movemos a la pestaña "Reglas para mostrar" y en posición seleccionamos "resultados de búsqueda" en el desplegable.
Los elementos ofrecen muchas posibilidades de personalización. Como verás, en ese desplegable puedes seleccionar gran parte de las posiciones de tu blog para que se apliquen allí estas configuraciones.
También podemos decidir qué elementos queremos esconder. En mi caso solo voy a usar una opción para prescindir del sidebar por lo que selecciono "Contenido (Sin barras laterales)".
Hay otras formas de esconder el sidebar, pero esta, además de ser la más fácil y rápida, nos permite revertir cualquier cambio simplemente volviendo aquí o directamente "despublicando" este elemento/plantilla para pasarlo a estado de "Borrador" devolviendo así la página sobre la que se aplique a su aspecto original.
Además, en la pestaña "Desactivar Elementos" podrás dejar la página prácticamente limpia. Se puede decir que es el equivalente a la plantilla de página "Canvas" de Elementor, incluso algo mejorado y más simple de usar.
Una práctica aconsejable, que además se recomienda en una de las pestañas de la configuración, es documentar lo que hace cada Elemento con notas internas por si el título no es lo suficientemente descriptivo o no queremos que sea muy largo.
Ya me he acostumbrado a añadir notas y comentarios a todo porque cuando se realizan muchas modificaciones y el paso del tiempo es inevitable que termines olvidando dónde y/o cómo se hacían. Así, en notas internas tendrás siempre toda aquella información necesaria para volver sobre tus pasos si algo falla o si queremos hacer nuevas modificaciones.
Al publicar esta plantilla ya tendríamos la página de resultados configurada a nuestro gusto, pero, claro, ahora se mostraría en blanco al hacer una búsqueda porque necesitamos crear y publicar un nuevo elemento que será el que determine el aspecto de esas búsquedas.
Puedes dejar esta plantilla en borrador de momento mientras hacemos esto para publicarla cuando todo esté listo.
Plantilla de aspecto
Aunque se trata de un Elemento más, la llamo "plantilla de aspecto" para esta pequeña guía porque en su día me confundió un poco la nomenclatura de cada cosa y sus diferentes posibilidades de uso.
Aquí es donde el empieza el trabajo real de personalización.
Creamos un nuevo elemento, esta vez un Bloque y le damos un nombre descriptivo.
Añadimos un contenedor de GenerateBlocks y dentro de ese contenedor metemos un bloque de "Bucle de consulta" o Query Loop.
Y esto es lo que veremos.
He optado por "Empezar en blanco" para replicar la estructura nativa de los resultados, pero puedes elegir cualquiera de las plantillas que ofrece este bloque.
Lo suyo es que las pruebes antes de decidirte porque una vez que empieces a trabajar sobre una de ellas no podrás aplicar otra y tendrás que empezar todo el proceso desde cero si quieres cambiarla. (Algo que debería solucionar GB).
Después de elegir la plantilla, seleccionamos el bloque de bucle de consulta (1) y veremos la pestaña "Bloque" a la derecha (2). Pinchamos sobre ella y marcamos la opción "Heredar la consulta de la plantilla" (3) en "Parámetros de consulta". Por último, abajo, en "Reglas para Mostrar"/"Posición" (4) buscamos y establecemos "Resultados de la búsqueda" y guardamos como borrador.
Al desplegar el bucle de consulta veremos esto:
Añadimos otro bloque de cuadrícula dentro de "Plantilla de consulta" y seleccionamos la estructura que queramos.
Para el ejemplo vamos a usar una de dos contenedores que harán las veces de columnas. La columna de la izquierda será el lugar para la imagen destacada y la de la derecha mostrará el extracto de la entrada (excerpt).
También puedes jugar con tres contenedores y configurar el central como espacio. Insisto, las posibilidades son muchas y lo suyo es trastearlas.
Como ya habrás notado, estamos construyendo casi desde cero un contenedor con todas las piezas que conformarán el aspecto final de lo que queremos mostrar. En este caso los resultados de búsqueda, pero se puede hacer con cualquier otro contenido.
Ahora atacamos esos dos contenedores.
Seleccionamos el primer contenedor y establecemos su ancho en 33 (que en realidad se fija en 33.33) como verás si bajas hasta las opciones de redimensionado.
Hacemos lo mismo con el segundo contenedor y seleccionamos 66 (que se fijará automáticamente como 66.66). Como es obvio, la cosa es que todos los contenedores que se usen sumen 100 para que no se salgan del espacio horizontal de la página y se muestren en la misma línea.
Ahora, con el primer contenedor seleccionado añadimos dentro un bloque de imagen de GenerateBlocks.
Lo que sucederá entonces es que aparecerán distintos espacios de imagen. No te asustes, eso es porque el bloque detecta el Loop y recrear su comportamiento. Si tu buscador muestra diez resultados, esos serán los espacios que aparecerán. Basta seguir trabajando sobre el contenedor de imagen pasando mucho del resto, que no es otra cosa que el previo de la página de resultados.
Volvemos a seleccionar el contenedor que contiene la imagen (1). En el menú del bloque de la derecha bajamos hasta "Activar datos dinámicos y los activamos (2). Seleccionamos "Imagen destacada" en Origen de la imagen de fondo (3) y aparecerán las imágenes en el editor.
En origen del enlace elegimos "Enlace individual" (4) para que cada imagen enlace a su post correspondiente u volvemos a guardar como borrador.
Ahora vamos al segundo contenedor, lo seleccionamos y añadimos un bloque "Títular" de GenerateBlocks.
Seleccionamos el bloque "Títular" (1) con los datos dinámicos activados (2) y repetimos el proceso anterior (3), pero esta vez seleccionando en fuente del contenido "Título" (4) y entrada individual en origen del enlace. (5)
Por último añadiremos debajo otro bloque de "Título" que será el que usaremos para mostrar el extracto de la entrada siguiendo estos pasos.
Una vez añadido, volvemos a repetir el mismo proceso. Con este nuevo bloque seleccionado (1) activamos los datos dinámicos (2) y como fuente de los datos (3) la entrada actual y la fuente del contenido "Extracto" (4). Ahora también puedes fijar la longitud del extracto en palabras (5).
Para finalizar añadiremos la paginación, que aparecerá bajo los resultados. Para ello seleccionamos el bloque de bucle de consulta (1) y pinchamos sobre ese simbolito de + con unos puntos que encontrarás en la barra de edición (2).
La paginación se construye con un bloque de botones a los que tendrás que dar el formato, color y forma que se ajuste al aspecto que andes buscando. Todas sus posibles configuraciones, que no son pocas, están en el menú del bloque en el que siempre tendrás las opciones para afinar cada bloque para móvil, tablet y escritorio.
Voy a dejarlo aquí para no extender demasiado este post.
Te aconsejo hacer todo esto primero en un entorno de pruebas para ver su funcionamiento real más allá del previo que ofrece el editor y publicarlo cuando estés seguro de que se muestra como debe.
Recuerda también que si hiciste aquel bloque de diseño que se propuso al principio y al que llamamos Plantilla de estructura que habíamos dejamos en borrador tendrás que publicarlo.
Este sería el punto de partida para seguir personalizando el aspecto de la página de resultados dependiendo de tus preferencias en cuanto a lo estético.
Montones de posibilidades para la personalización
Puedes seguir añadiendo o editando lo que quieras, como un bloque de cuadrícula con dos contenedores entre el título y el extracto y añadir ahí la fecha de publicación, el nombre del autor de la entrada o lo que te parezca.
Si te animas, hasta puedes crear otra plantilla para esa página sosa por defecto cuando WordPress no encuentra resultados al buscar y añadir en ella cajas de información o cualquier otro elemento que ayude al visitante a encontrar lo que pueda estar buscando.
Puedes cambiar el tipo y tamaño de la fuente, justificarla a un lado u otro, ajustar espaciados y dimensiones de los elementos, jugar con el color de fondos añadiendo imágenes y formas, añadir iconos, bordes, efectos hover en los enlaces, sombras a los contenedores, etc.
Todo ello sin salir del editor y sin tener que andar trasteando CSS ni tocando archivos de tu plantilla.
Aquí puedes probar el maqueo básico de mis resultados de búsqueda al que aún tengo que pulir algunas cosas como añadir el tiempo de lectura y el número de visitas, escribir los extractos vacíos y añadir las imágenes destacadas faltantes.
Bola extra: Si necesitas añadir a los resultados la frase típica de "Mostrando (número) resultados de: (palabra buscada)", aquí puedes encontrar el código necesario y las instrucciones para que funcione con tu bloque Query Loop, gracias a David del soporte de GB
