¿Qué tienen en común los sitios de inmobiliaria, de compras, de clasificados, básicamente todo aquello que haga listas de un contenido abultado?

Los visitantes pueden realizar búsquedas y hacer zoom de aquello que buscan.

Views facilita concretarlo, apelando al filtrado de contenido en el front-end.

Cómo funciona:

  1. Añada filtros y escoja argumentos URL como valores de entrada.
  2. Habilite dichos filtros para que se muestren a los visitantes, y fije sus valores de entrada.
  3. Dé estilo al layout de la sección de filtro.

Una vez realizado esto, su View incluirá filtrado front-end, permitiendo a los visitantes escoger la forma de filtrar resultados de búsqueda.

Lo demostremos con un ejemplo: un sitio de listados de inmobiliaria. Esto es lo que vamos a construir:

Filtrado front-end para sitio de inmobiliaria

La parte superior de la página es el Filtro de view. La parte inferior muestra los resultados de la consulta.

Paso 1: añada filtros con valores de argumento URL

Para que los visitantes filtren resultados de búsqueda, primero la View debe poseer filtros. Puede agregar filtros por campos personalizados, taxonomía o búsqueda de contenido. Para todos ellos, los valores deben codificarse en ‘duro’ dentro de la View, o provenir de argumentos URL.

Para filtrado front-end, escoja argumentos URL. Así se ve en caso de campos personalizados (es similar para taxonomía y búsqueda).

Filtrar por campos personalizados con valores provenientes de parámetros URL

Si elije configurar el filtro para un parámetro URL, debe introducir el nombre del parámetro. Dichos nombres deben ser únicos para la View (es otras palabras, dos campos no deben tener el mismo nombre). Views usa este nombre en la URL que construye para el filtro de consultas.

Paso 2: mostrar los filtros a los visitantes

Ahora, que los valores de filtrado provienen de argumentos URL, podemos generarlos usando un formulario HTML. Views puede crear dicho formulario por usted.

Haga clic en Editar al lado de los controles de filtro.

Edición de controles de filtro

Usted puede elegir la etiqueta, el tipo y valores de entrada para cada filtro. Reorganice los filtros arrastrándolos.

Al finalizar haga clic en OK, y los ajustes de filtrado serán añadidos al meta-HTML para la sección Consulta de la view. Puede ir a la View para ver cómo se ve.

Paso 3: formateo del HTML de los filtros

Por defecto, Views le aplicó un formateo muy básico a la sección de filtro. Cada filtro queda abarcado por etiquetas <p>…</p>. Usted podría desear cambiar dicho formato en muchos sitios reales. Por ejemplo, en nuestro ejemplo enmarcamos los distintos ítems de filtro en etiquetas DIV. Si lo desea, puede usar una tabla u otro elemento.

Haga clic en el botón View/Editar meta HTML, en la parte inferior de la sección Consulta de la view. Verá el estilo generado por Views. Puede editarlo como desee. La ‘magia’ viene de los shortcodes wpv-control. Se trata de unos que generan los campos de entrada reales para el formulario de filtrado.

Visualizar el filtro propiamente dicho

Muchos sitios necesitan tener formularios de búsqueda paramétrica en sus páginas de inicio, sin realmente listar resultados allí. Cuando el visitante hace clic en Buscar, es enviado a la página de ‘resultados de búsqueda’.

Para implementar esta funcionalidad, ahora usted puede insertar precisamente la parte de filtro de una View dentro de su contenido.

Primero, asegúrese de insertar la view propicia para la búsqueda en algún contenido. Puede ser una página, una entrada o cualquier tipo personalizado.

A continuación edite la página principal del sitio o cualquier otra página donde quiera insertar el formulario de búsqueda. Haga clic en el icono V para insertar una View.

Formulario View disponible para insertar

Notará una nueva sección Formulario View. Toda View con filtrado front-page habilitado se muestra allí.

Seleccione esa View y se abre un emergente. Dicho diálogo le preguntará a cuál página desea direccionar resultados de búsqueda. Podrá escoger entre páginas a las cuales le ha insertado esa View. Normalmente, habrá una página para elegir.

Y terminamos. Vaya a su página de inicio y vea la View de filtrado en acción.

Página de inicio con Formulario View