Personalizar la página de resultados de búsqueda de WordPress con GeneratePress y GenerateBlocks

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

Claves para personalizar tus resultados de búsqueda