En este artículo vamos a ver como mostrar los resultados de búsqueda en forma de lista en Digital Pro. No es difícil, pero he tenido que hacer un trabajo concienzudo de búsqueda de acciones y filtros en los hooks.
Comparando
Hace poco publiqué un artículo sobre como mostrar los resultados de búsqueda en forma de lista en Genesis Sample. Esta semana trabajando con Digital Pro, me di cuenta que no es aplicable a este theme, dado que por diseño algunas acciones y filtros están cambiados a otros hooks con respecto a Genesis Sample.
Analicemos el porqué. La persona que hace una búsqueda es porque está interesada en encontrar una información normalmente concreta sobre algo. Te interesan los titulares o títulos y te fijas poco o nada en fotos u otra información que no sea eso. En ocasiones sirven las fechas, pero no es lo más común.
Así que basándome en eso, en esta ocasión he sido aún más minimalista y he dejado simplemente una lista de los títulos. Por supuesto, lo mejor que podríamos hacer es crear un test A/B para ver que opciones dan mejores resultados.
Template
Para conseguirlo, igual que en el anterior tutorial, crearemos el archivo search.php y lo alojaremos en la carpeta raíz de Digital Pro Theme. En el introduciremos este código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Si por ejemplo, quisieses añadir la fecha o la información del artículo junto al título, sólo tendrías que comentar la línea 37. Recuerda que puedes variar o editar la información meta mostrada fácilmente.
Estilos con CSS
Por último sólo queda agregar un poco de CSS para dar un poco más aspecto de lista y reducir espacios.
Copia este código al final del archivo styles.css.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
En pocas líneas de código hemos creado un template de resultados de búsqueda más que personalizado para Digital Pro Theme. Dado de diseño de Digital Pro le hemos tenido que ajustar los espacios y ancho de página.
La verdad, estoy contento con el resultado. Pienso aplicarlo en más sitios para ver como responde la gente.
Para cualquier duda con el código, o si quieres proponer un nuevo snippet, puedes dejar un comentario abajo. 😉