() translation by (you can also view the original English article)
Con independencia de que estés escribiendo una consulta de búsqueda en Google, YouTube, Amazon o cualquier otro importante sitio web, la búsqueda en tiempo real se ha convertido en un elemento esencial del diseño web moderno.
La búsqueda en tiempo real se da cuando ves una lista de términos de búsqueda sugeridos que se actualiza a medida que tecleas, y puede ser un valioso extra en cualquier sitio web. Hoy en día, muchos usuarios dan por hecho que cualquier sitio web cuenta con una búsqueda en tiempo real, y posiblemente descubras que muy pocas personas están dispuestas a realizar una caza manual a lo largo de tu sitio web.
Al ayudar a que los visitantes encuentren el contenido que les interesa, podrás mantenerlos en tu sitio durante más tiempo, proporcionar una mejor experiencia de usuario e incluso generar algunos ingresos adicionales al facilitarles el descubrimiento de productos y servicios relevantes.
En este artículo, te mostraré cómo reemplazar la barra de búsqueda estándar de WordPress por un potente motor de búsqueda usando el plugin Ajax Search Pro. De forma predeterminada y sin ninguna configuración, esta barra de búsqueda en tiempo real será capaz de buscar cualquier tipo de contenido, incluido el contenido de WooCommerce.
Una vez hayas creado tu barra de búsqueda en tiempo real, te mostraré cómo mejorarla con algunas características extra de gran calado, incluyendo las taxonomías y los filtros personalizados.
-
20 Mejores complementos y plugins para WPBakery Page Builder (Visual Composer) de 2019
-
.jpg)
.jpg)
12 Mejores plugins de slider y carrusel para WordPress de 2020
-
20 Mejores plugins y widgets de calendario para WordPress
-
Más de 20 mejores plugins de popup y opt-in para WordPress
Descargando el plugin Ajax Search Pro
El primer paso consiste en comprar el plugin Ajax Search Pro, disponible a través de CodeCanyon.
Si aún no te has registrado, crea tu cuenta gratuita en Envato Market. Dirígete al sitio web de CodeCanyon, haz clic en el botón Sign In situado en la esquina superior derecha y, a continuación, introduce los detalles de tu cuenta de Envato.
Una vez hayas iniciado sesión en tu cuenta, busca el plugin Ajax Search Pro, haz clic en Buy Now y sigue las instrucciones en pantalla para completar tu compra. Descarga el plugin cuando se te solicite. Descomprime el plugin Ajax; la carpeta obtenida debe contener un archivo zip denominado ajax-search-pro que tendrás que cargar en tu cuenta de WordPress.
Añadiendo plugins a tu sitio WordPress
Una vez hayas descargado el plugin Ajax Search Pro, tendrás que instalarlo.
Inicia sesión en tu cuenta de WordPress, si aún no lo has hecho. Selecciona Plugins en el menú izquierdo del escritorio de WordPress, y a continuación el submenú Añadir nuevo. Selecciona Subir plugin.
Desplázate hasta la sección Si tienes un plugin en un archivo .zip, puedes subirlo e instalarlo desde aquí, y selecciona Seleccionar archivo. Selecciona el archivo ajax-search-pro que acabas de descargar. Pulsa el botón Instalar ahora.
El plugin Ajax Search Pro se cargará ahora en tu instalación de WordPress. Después de uno momento, deberías ver un mensaje que dice Plugin instalado correctamente; selecciona el botón Activar plugin que lo acompaña.
Suponiendo que el plugin se ha instalado con éxito, ahora debería estar visible en el menú de la izquierda de WordPress un nuevo elemento Ajax Search Pro.
Creando tu barra de búsqueda en tiempo real
Empecemos añadiendo la barra de búsqueda predeterminada de Ajax Search Pro en nuestro sitio web, que requiere que creemos una instancia de búsqueda:
- En el menú de la izquierda de WordPress, selecciona Ajax Search Pro.
- En la siguiente pantalla, asigna un nombre a la instancia de búsqueda; Yo estoy usando testSearch.
Ahora haz clic sobre el botón Add. Esto generará un shortcode que puedes utilizar para colocar la barra de búsqueda en tu sitio web. Haz clic en Save.
¡Y eso es todo! Acabas de crear una básica barra de búsqueda en tiempo real completamente funcional y lista para usar.
Widgets, shortcodes y menús: Mostrando tu barra de búsqueda
Puedes colocar esta barra de búsqueda en tu sitio web de varias maneras distintas:
- usando el editor de WordPress
- generando un shortcode
- creando un widget de búsqueda
- añadiendo la barra de búsqueda a un menú existente
Ten en cuenta que WordPress también proporciona un menú desplegable Reemplazar la búsqueda predeterminada del tema con... que puedes utilizar para seleccionar la instancia de búsqueda de Ajax. Sin embargo, este método no es compatible con todos los temas de WordPress, por lo que no lo explicaré en las siguientes secciones.
1. Usando el editor de WordPress
Puedes añadir rápida y fácilmente la barra de búsqueda a tu sitio utilizando el editor estándar de WordPress. Sin embargo, este método solo añadirá la barra de búsqueda en una única página o entrada cada vez que lo hagas, lo que puede consumir mucho tiempo si lo que deseas es mostrarla en todo tu sitio, además no te permite controlar dónde aparecerá la barra de búsqueda dentro de la página web elegida. Si cualquiera de estos factores rompe el pacto, es posible que te resulte más fácil usar uno de los métodos que describo en las siguientes secciones.
Para insertar la barra de búsqueda utilizando el editor de WordPress, ve a la página o entrada donde deseas mostrar la barra de búsqueda y ábrela para editarla.
En la barra de herramientas, asegúrate de que la pestaña Visual esté seleccionada. Selecciona el nuevo botón ASP. Si este botón no se muestra como parte de la barra de herramientas de WordPress, dirígete a la siguiente sección para obtener una solución alternativa.
Selecciona Search Box, y a continuación el nombre de la instancia de búsqueda que acabas de crear. Guarda los cambios haciendo clic en Actualizar.
Selecciona Ver entrada. Ahora la barra de búsqueda debería mostrarse en la página o entrada elegida.
Si quieres mostrar la barra de búsqueda en cualquier otra página de la web, repite los pasos anteriores.
¿No puedes encontrar el botón ASP?
Si el botón ASP no aparece en la barra de herramientas de WordPress, es posible que tengas que cambiar al Editor clásico de WordPress.
Para que sea más fácil cambiar entre el Editor Clásico y el Editor de Bloques predeterminado, te recomiendo instalar el plugin gratuito de WordPress Classic Editor:
En el menú de la izquierda de WordPress, selecciona Plugins > Añadir nuevo. Busca Classic Editor. Cuando aparezca el plugin Classic Editor, selecciona Instalar ahora.
- Una vez instalado el plugin Classic Editor, selecciona Plugins > Plugins instalados en el menú izquierdo de WordPress.
- Busca Editor clásico y haz clic en el enlace Ajustes que lo acompaña.
- Desplázate hasta Editor predeterminado para todos los usuarios y selecciona Editor clásico.
- En la sección Permite a los usuarios cambiar de editor, selecciona Sí.
- Haz clic en Guardar cambios.
- Navega a la página o entrada donde desees colocar la barra de búsqueda, pero no la abras todavía para editarla.
- Pasa el cursor sobre la página o entrada elegida y, a continuación, selecciona el enlace Editar (Editor clásico) cuando aparezca.
La barra de herramientas de WordPress ahora debería contener un botón ASP que puedes usar para insertar tu barra de búsqueda en esta página o entrada. Ten en cuenta que puedes cambiar entre el Editor clásico y el Editor de bloques en cualquier momento, pasando el cursor sobre el elemento que deseas editar y, a continuación, seleccionando el enlace Editor clásico / Editor de bloques cuando aparezca.
2. Generando el shortcode de la barra de búsqueda
Si necesitas controlar de forma exacta dónde aparece la barra de búsqueda en una página web individual, puedes generar un código corto o "shortcode" que luego podrás copiar y pegar en cualquier página o entrada.
Esta es una de las formas más flexibles de mostrar la barra de búsqueda, pero tendrás que pegar manualmente el shortcode en cada ubicación donde desees que esta aparezca, por lo que este método puede llegar a consumir demasiado tiempo si necesitas mostrarla en varias páginas web.
Para generar el shortcode:
- En el menú de la izquierda de WordPress, selecciona Ajax Search Pro.
- Busca la instancia de búsqueda y selecciona el icono Settings que lo acompaña.
- En la parte superior de la pantalla, haz clic para expandir la sección Toggle shortcodes.
- La sección Simple Shortcodes debe contener un Search shortcode. Copia este shortcode.
Ahora puedes pegar este shortcode en cualquier lugar de tu sitio web; Yo lo estoy pegando en mi página de inicio Hello World:
- Navega a la página o entrada donde desees colocar la barra de búsqueda y ábrela para editarla.
- Haz clic para seleccionar el bloque en el que deseas que aparezca la barra de búsqueda.
- Selecciona el icono de tres puntos, y a continuación Editar como HTML.
- Pega tu shortcode en la ubicación exacta en la que deseas que aparezca la barra de búsqueda.
- Guarda tus cambios haciendo clic en Actualizar.
- Selecciona Ver entrada. Ahora la barra de búsqueda debería mostrarse en la ubicación exacta donde pegaste el shortcode.
3. Usando el widget Ajax Search Pro
Para proporcionar una experiencia de usuario coherente, es posible que desees mostrar la barra de búsqueda en varias páginas web y en la misma ubicación, por ejemplo en la barra lateral o en el pie de página de tu sitio web.
Puedes utilizar el widget Ajax Search Pro para añadir una barra de búsqueda en cualquier área de widgets, y esa barra de búsqueda aparecerá en todas las páginas web que contengan dicha área widgetizada. Los widgets son una forma sencilla de implementar una barra de búsqueda en todo el sitio web, aunque no permiten personalizar dónde aparece la barra de búsqueda en una página web individual.
Para añadir la barra de búsqueda a un área de widgets:
- En el menú de la izquierda de WordPress, selecciona Apariencia > Widgets. Deberías ver varios widgets nuevos, incluido un widget Ajax Search Pro.
- Hacia el lado derecho de la pantalla, encontrarás una lista de todas tus áreas "widgetizadas". Decide qué área de widgets deseas utilizar, por ejemplo Blog Sidebar o Footer 1, y después arrastra y suelta Ajax Search Pro sobre ella.
- Haz clic para expandir el widget Ajax Search Pro.
- Asigna un título descriptivo a esta barra de búsqueda.
- Abre la opción Select the search for... y selecciona la instancia de búsqueda que desees utilizar.
- Haz clic en Save.
Pasa algún tiempo navegando por tu sitio web, deberías notar que la barra de búsqueda ahora está apareciendo en el área que escogiste, en varias páginas web, o incluso posiblemente en todo tu sitio web, dependiendo del tema WordPress que tengas.
4. Añadiendo la barra de búsqueda a tu menú
Por último, puedes añadir la barra de búsqueda a tu sitio web como un elemento de menú.
Si ya tienes un menú establecido, entonces esta podría ser una manera de implementar una barra de búsqueda sin interrumpir el contenido o el diseño de tu sitio web. Si el menú se utiliza en todo el sitio, esta también podría ser una forma rápida y fácil de implementar una barra de búsqueda en todo el sitio web.
Para añadir una instancia de búsqueda en un menú, deberás haber copiado el shortcode de la instancia:
- Selecciona Ajax Search Pro en el menú izquierdo de WordPress.
- Busca la instancia de búsqueda en cuestión y selecciona su icono Settings.
- Haz clic para expandir la sección Toggle shortcodes.
- Copia el valor de Search shortcode.
Ahora ya estamos listos para añadir esta instancia de búsqueda a nuestro menú:
- En el menú de la izquierda de WordPress, selecciona Apariencia > Menús.
Abre el menú que deseas editar. Si no has creado previamente un menú, puedes crearlo introduciendo un título en el campo Nombre del menú y seleccionando Crear menú. A continuación, puedes añadir elementos a este menú mediante la pestaña Editar menú y especificar dónde debe aparecer este menú mediante la pestaña Gestionar ubicaciones.
Ahora, bajo Añadir elementos al menú, busca la sección Enlaces personalizados y haz clic para expandirla.
- Introduce cualquier valor en el campo URL, yo simplemente estoy usando un carácter
.. - Pega el shortcode de la instancia de búsqueda en el campo Enlace de texto.
- Haz clic en Añadir al menú. Observa que tu shortcode se ha añadido a la Estructura del menú.
- Para guardar tus cambios, haz clic en Guardar menú.
Navega a cualquier entrada o página donde se muestre este menú, la barra de búsqueda ahora debería aparecer como parte de ese menú.
¿Estas viendo doble? Eliminando la barra de búsqueda predeterminada de WordPress
Si tu tema WordPress ya tiene una barra de búsqueda, entonces es posible que en este momento tengas varias barras de búsqueda en todo el sitio web.
Para eliminar la barra de búsqueda que se incluye como parte de tu tema de WordPress:
- En el menú de la izquierda de WordPress, selecciona Apariencia > Widgets.
- Hacia el lado derecho de esta pantalla, busca el área widgetizada donde todavía se muestra la barra de búsqueda original y haz clic para expandir la sección Barra de búsqueda.
- Haz clic en Borrar. Ahora la barra de búsqueda original será eliminada por completo de tu sitio web.
Ahorra algo de espacio: Cambiando a una barra de búsqueda compacta
Hasta este punto, nos hemos centrado en las formas de añadir la barra de búsqueda predeterminada de Ajax Search Pro en tu sitio web. Sin embargo, dependiendo del tema, el contenido y el diseño general de tu sitio web, la barra de búsqueda predeterminada podría no ser la más adecuada.
Tal vez te está costando encontrar suficiente espacio para colocar la barra de búsqueda Ajax predeterminada, o esta no está en sintonía con la apariencia de tu sitio web. En estas situaciones, puede ser útil convertir la barra de búsqueda predeterminada en una barra de búsqueda compacta, que aparecerá a modo de pequeño icono en forma de lupa.
Cuando el visitante haga clic sobre este icono, la barra de búsqueda se expandirá y podrás escribir tu consulta en la barra de búsqueda de la forma habitual.
Para transformar la barra de búsqueda predeterminada en una barra de búsqueda compacta:
- En el menú de la izquierda de WordPress, selecciona Ajax Search Pro.
- Busca la instancia de búsqueda que desees convertir en una barra de búsqueda compacta y haz clic en el icono Settings que la acompaña.
- Selecciona Layout options.
- Selecciona Compact box layout.
- Busca el control deslizante Compact mode layout y empújalo a la posición On.
- Desplázate hasta la parte inferior de la pantalla y haz clic en Save all tabs.
Esto es todo lo que necesitas para configurar la barra de búsqueda compacta, así que dirígete a cualquier página web donde aparezca la barra de búsqueda, ahora debería haberse transformado en una barra de búsqueda compacta.
Si es necesario, puedes cambiar la alineación de la barra de búsqueda compacta para que se muestre a la derecha o a la izquierda del espacio asignado. Ten en cuenta que, dependiendo del tema que use tu sitio web y de donde se coloque la barra de búsqueda, cambiar la alineación puede tener un efecto dramático, ¡o puede ser incluso difícil saber si la barra de búsqueda se ha movido en absoluto!
Para cambiar la alineación de la barra de búsqueda:
- Dirígete a Ajax Search Pro > Settings > Layout options > Compact box layout.
- Busca la sección Compact layout alignment y abre el menú desplegable que lo acompaña; elige Right (derecha) o Left (izquierda).
- Haz clic en Save all tabs.
Ahora puedes comprobar los cambios navegando a cualquier página web que tenga la barra de búsqueda. Si no estás satisfecho con tu nueva alineación, puedes restaurar la barra de búsqueda a su posición original:
- Dirígete a la pantalla Compact box layout (Ajax Search Pro > Settings > Layout options > Compact box layout).
- Abre el menú desplegable Compact layout alignment y selecciona No floating.
- Guarda tus cambios haciendo clic en Save all tabs.
En la pantalla Compact box layout, también puedes cambiar el tamaño de la barra de búsqueda compacta usando los campos Position values. Puedes especificar su tamaño como un porcentaje del elemento padre que lo antecede, aunque dependiendo de tu tema WordPress estos porcentajes pueden no funcionar como lo esperado. Si cambiar los valores de porcentaje no tiene ningún impacto en el tamaño de la barra de búsqueda, puedes obtener mejores resultados cambiando a valores especificados en píxeles (px).
Búsquedas más potentes: Añadiendo filtros de taxonomía
En muchos sitios web, una barra de búsqueda es esencial para ayudar a los visitantes a localizar contenido interesante y relevante, pero a menudo puedes mejorar la experiencia de usuario añadiendo filtros a la barra de búsqueda estándar.
De forma predeterminada, el plugin Ajax Search Pro ofrece una serie de filtros integrados, denominados taxonomías en la interfaz de usuario de WordPress.
Empecemos explorando estos filtros integrados, antes de pasar a la creación de filtros personalizados:
- En el menú de la izquierda de WordPress, selecciona Ajax Search Pro.
- Busca la instancia de búsqueda y haz clic en el icono Settings que lo acompaña.
- Selecciona la pestaña Frontend Search Settings.
- Selecciona Categories & Taxonomy Terms.
Abre el menú desplegable Select the taxonomy y elige entre las taxonomías disponibles. Anteriormente he utilizado WooCommerce para crear una tienda de afiliados de Amazon, así que voy a dar a los visitantes la opción de filtrar productos por marca, utilizando la taxonomía product - pa_brand (marca del producto).
Una vez hayas seleccionado una taxonomía, se mostrarán todos los términos de dicha taxonomía. Puedes usar cualquiera de estos términos como filtro, así que toma uno o más términos y suéltalos en el siguiente cuadro: Drag the terms you want to include! (¡Arrastra los términos que quieras incluir!)
En este punto, puedes obtener una vista previa de cómo se verá la barra de búsqueda una vez que esté configurada con los ajustes actuales, haciendo clic en el botón Show en la ventana flotante que aparece sobre la parte inferior de la pantalla.
La ventana flotante ahora se expandirá en un cuadro Preview (vista previa); Haz clic en Refresh para ver los ajustes actuales aplicados a la barra de búsqueda. Una vez estés satisfecho con tus filtros, puedes publicarlos haciendo clic en Save all tabs!
Visualizar tus filtros: Añadiendo un conmutador para la configuración de búsqueda
Una vez hayas configurado los filtros, puedes especificar si aparecen automáticamente como parte del diálogo de búsqueda estándar o dentro de un menú que el usuario tiene que iniciar de forma explícita.
Para acceder a esta configuración, dirígete a Ajax Search Pro > Frontend Search Settings y asegúrate de que la pestaña General está seleccionada. Desde aquí, puedes elegir entre lo siguiente:
- Set the search settings to be visible by default. Tus filtros aparecerán automáticamente tan pronto como el visitante interactúe con la barra de búsqueda.
- Show search settings switch on the frontend. Esto añade un botón de conmutación que el visitante debe pulsar para iniciar el diálogo del filtro. Si el usuario no requiere ningún filtro, puede hacer sencillamente clic dentro de la barra de búsqueda y escribir su consulta, sin tocar nunca el interruptor de configuración de búsqueda.
¿No aparecen los filtros?
Si has completado todos los pasos anteriores y tus filtros aún no aparecen en tu sitio web, entonces puede ayudarte cambiar la casilla Show search settings….
Asegúrate de que has guardado los cambios que hayas realizado en la configuración de tu taxonomía (dando un clic al botón Save all tabs! y luego:
- Dirígete a Ajax Search Pro > Frontend Search Settings.
- Asegúrate de que la pestaña General esté seleccionada.
- Localiza la siguiente sección: Set the search settings to visible by default? Este control deslizante debe estar en la posición On; desactívalo y vuelve a activarlo de nuevo.
- Utiliza el panel de vista previa Show/Hide que lo acompaña para comprobar si esto ha ocultado los filtros.
Si esta solución no tiene éxito, también puedes obtener resultados positivos activando el botón conmutador Show search settings switch on the frontend? que encontrarás en la parte superior de la pantalla.
Personalizando tus filtros
Una vez hayas añadido algunos filtros, es posible que desees ajustar la funcionalidad de filtrado de la barra de búsqueda, o modificar su apariencia para adaptarla mejor al tema que usa tu sitio web.
Para personalizar los filtros, dirígete a Ajax Search Pro > Frontend Search Settings y, a continuación, selecciona el botón Change display mode, que iniciará una ventana emergente.
En esta ventana emergente, puedes realizar los siguientes cambios:
Añadiendo un título: Cambia el encabezado de la caja
Puedes cambiar el encabezado de la taxonomía que aparece en el diálogo del filtro, buscando la taxonomía en cuestión y, a continuación, editando su campo Box header. Por ejemplo, dado que estoy usando Product Brand, voy a personalizar su encabezado desplazándome a Terms from product - Product Brand (pa_brand) y luego editando el texto que aparece dentro del campo Box header.
¿Casillas de verificación, desplegable, multiselección o de radio?
De forma predeterminada, el plugin Ajax Search Pro muestra tus filtros en forma de casillas de verificación. Como alternativa, puedes abrir el menú desplegable Display as y elegir entre las siguientes opciones:
1. Drop-Down (menú desplegable)
Esto muestra todos los filtros disponibles en forma de menú desplegable.
Al seleccionar Display as: Drop-down, obtendrás acceso a algunos ajustes adicionales:
- Choose One/Any option. El usuario solo podrá seleccionar un único filtro en el menú desplegable.
- First item. El primer filtro del menú desplegable será seleccionado de forma predeterminada.
- Last item. El último filtro del menú desplegable será seleccionado por defecto.
- As defined. Esto te permite especificar qué filtro debe aparecer seleccionado de forma predeterminada. Para obtener un filtro concreto, escribe el filtro deseado en el campo adjunto As defined, y a continuación, selecciónalo cuando aparezca.
Elige la opción Choose one/Any option. Puedes utilizar esta configuración para añadir texto en la parte superior del menú desplegable. Escribe el texto que desees usar y, a continuación, marca la casilla de verificación que lo acompaña.
2. Drop-Down With Search (desplegable con búsqueda)
Si tienes una larga lista de posibles filtros, entonces tu audiencia podría agradecer la posibilidad de buscar un filtro por su nombre.
3. Multiselect With Search (selección múltiple con búsqueda)
Este ajuste te permite seleccionar varios filtros simultáneamente. De forma predeterminada, cada filtro está seleccionado, pero el usuario podrá excluir un filtro de tu búsqueda haciendo clic sobre el icono x que acompaña a ese filtro.
4. Radio (botón de opción)
Esto muestra cada filtro en forma de botón de opción.
Si seleccionas la opción de botón de opción, tendrás acceso a los mismos ajustes que el modo de presentación desplegable:
- One/Any (uno/ninguno).
- First item (primer elemento).
- Last item (último elemento).
- As defined (según lo definido)
Potencia el poder de tus búsquedas: Creando filtros personalizados
Además de tus filtros predeterminados, el plugin Ajax Search Pro te permite crear filtros personalizados, que pueden añadir una potente y única funcionalidad de filtrado a tu sitio web.
Al mostrar los filtros, puedes elegir entre los siguientes diseños de presentación:
- radio buttons (botones de radio)
- dropdown menus (menús desplegables)
- checkboxes (casillas de verificación)
- sliders (deslizadores)
- range sliders, por ejemplo, un control deslizante de rango para los precios de tu tienda online
- date filters (filtros de fecha), por ejemplo, si has creado un sistema de emisión de entradas online y deseas filtrar los eventos por fecha
Puedes crear filtros para las páginas y las entradas estándar de WordPress, pero yo usaré esta funcionalidad para desarrollar un motor de búsqueda personalizado que filtre los productos de Afiliados de Amazon de mi sitio web en función de las categorías de productos, de forma similar a cómo funcionan los filtros de Departamento en Amazon.com. Para conseguirlo tendré que crear un campo personalizado (smarthome_category) que aplicaré a todos los productos para un hogar inteligente presentes en mi tienda y, a continuación, asignaré a cada producto un valor, como Thermostat, Lock Cylinder, o Water Detector.
Ten en cuenta que para los fines de este tutorial, ya he configurado WooCommerce y he creado mi tienda de afiliados de Amazon.
Si en lugar de lo anterior deseas crear filtros personalizados para páginas o entradas, los pasos serán en gran parte los mismos. Por ejemplo, es posible que desees permitir que los visitantes filtren tu blog en función de la temática o en base a la fecha de publicación del contenido.
- Dirígete a la página, entrada o producto que desees etiquetar con un filtro personalizado y ábrelo para editarlo.
- Desplázate hasta la sección Custom Fields. Si la pantalla no contiene esta sección, desplázate hasta la parte superior de la pantalla y selecciona Opciones de pantalla y a continuación Campos personalizados.
- Para crear un campo personalizado, haz clic en Enter new y, a continuación, escribe el nombre del campo que deseas crear; Estoy nombrando mi campo personalizado smarthome_category.
El producto que estoy editando actualmente es Nest Learning Thermostat, así que en Values voy a escribir Thermostat. Para crear esta categoría y asignar el valor Thermostat al producto actual, haz clic en Add Custom Field. Ten en cuenta que tendrás que introducir manualmente este valor para todos los productos que entren en la categoría Thermostat, por lo que podría ser útil tomar anotarlo, particularmente tu capitalización y puntuación exactas.
No olvides guardar los cambios haciendo clic en Actualizar.
Ahora hemos creado un campo personalizado, por tanto ya podemos aplicarlo a cualquier producto, página o publicación.
- Navega hasta el elemento en cuestión y ábrelo para editarlo.
- Desplázate hasta Custom Fields.
- Abra el menú desplegable Name y selecciona el campo personalizado que acabas de crear, que en mi instancia es smarthome_category.
- En el campo Values, especifica el valor que deseas asignar a este artículo. Actualmente estoy viendo el producto Ring Video Doorbell 2 que importé de Amazon, así que voy a escribir Home Security System.
- Haz clic en Add Custom Field.
- Guarda los cambios haciendo clic en Update.
- Repítelo en cada elemento que desees etiquetar con un campo y un valor personalizados.
Configura la instancia de búsqueda
A continuación, tenemos que configurar nuestra instancia de búsqueda:
- En el menú de la izquierda de WordPress, selecciona Ajax Search Pro.
- Busca la instancia de búsqueda que deseas utilizar y haz clic en el icono Settings que lo acompaña.
- Selecciona la pestaña Frontend Search Settings, seguida de la pestaña Custom Fields.
Haz clic para colocar el cursor dentro de el campo personalizados Search custom fields…, a continuación, comienza a escribir el nombre del campo personalizado que creaste en el paso anterior (en mi instancia, es smarthome_category). Cuando aparezca el campo personalizado correcto, selecciónalo.
- En el campo Title label, asigna al sistema de filtrado un título descriptivo que, opcionalmente, podrás mostrar como parte del diálogo del filtro; Yo estoy usando Departamento.
- Decide si deseas mostrar la etiqueta de título como parte del diálogo del filtro, marcando o desmarcando la casilla Show the label on the frontend?.
- Abre el menú desplegable Type y elige cómo deseas que se muestren los filtros personalizados. Las opciones disponibles son: Radio, Dropdown, Checkboxes, Text, DatePicker , Slider y Range Slider.
De forma predeterminada, el campo Values muestra lo siguiente:
1 |
||Any value** |
2 |
sample_value1||Sample Label 1 |
3 |
sample_value2||Sample Label 2 |
4 |
sample_value3||Sample Label 3 |
Aquí es donde tendrás que introducir manualmente todos tus valores. Tenemos que reemplazar cada sample_value1||Sample Label 1 por un valor único. Por ejemplo, yo he utilizado los siguientes valores: Lock Cylinders, LED lighting, Thermostat, Switches & Dimmers, Water Detector, y Surveillance Camera.
Después de reemplazar los valores de muestra, termino con esto:
1 |
Lock Cylinders||Lock Cylinders |
2 |
LED lighting||LED lighting |
3 |
Thermostat||Thermostat |
4 |
Switches & Dimmers||Switches & Dimmers |
5 |
Water Detector||Water Detector |
6 |
Surveillance Camera||Surveillance Camera |
Por último, debes dejar que el plugin sepa qué valor debe ser seleccionado por defecto, utilizando los caracteres **. Quiero que los cilindros de bloqueo (Lock Cylinders) se seleccionen de forma predeterminada, por lo que mi cuadro de valores final tendrá el siguiente aspecto:
1 |
Lock Cylinders||Lock Cylinders** |
2 |
LED lighting||LED lighting |
3 |
Thermostat||Thermostat |
4 |
Switches & Dimmers||Switches & Dimmers |
5 |
Water Detector||Water Detector |
6 |
Surveillance Camera||Surveillance Camera |
A continuación, abre el menú desplegable Operator, que te permite especificar cómo se relacionará el valor introducido en el campo de búsqueda con los resultados. Para los valores numéricos, debes usar uno de los operadores numéricos, por ejemplo Equals (es igual), Not Equals (no es igual) o More Than (más que), pero si estás trabajando con valores de texto, puede elegir entre Like (como) y Exactly like (exactamente como). Sólo quiero mostrar los resultados que son una coincidencia exacta, así que estoy usando Exactly like.
Cuando estés satisfecho con la información que has introducido, haz clic en Add. En este punto, puedes usar el cuadro Show/Hide para obtener una vista previa de cómo aparecen y funcionan los filtros personalizados en el diálogo de búsqueda.
Si necesitas realizar cambios en la apariencia o la función de tus filtros personalizados:
- Pasa el cursor sobre el lugar donde aparece el filtro personalizado en el cuadro gris y aparecerá un icono de edición en forma de lápiz.
- Dale un clic a este icono y podrás editar tu filtro personalizado.
- Cuando estés satisfecho con tus filtros, guarda la configuración pulsando Save all tabs!.
Conclusión
En este artículo, te mostré cómo añadir rápida y fácilmente una barra de búsqueda en tiempo real a tu sitio web de WordPress, usando el plugin Ajax Search Pro.
Después de dominar la barra de búsqueda predeterminada, analizamos varias maneras en las que puedes mejorar Ajax Search Pro, entre las que se incluye la conversión de la búsqueda predeterminada en una barra de búsqueda compacta y plegable y añadir filtros utilizando las taxonomías preexistentes. Por último, te mostré cómo convertir la barra de búsqueda en tu propio motor de búsqueda personalizado, con filtros diseñados por ti.
Para obtener más información sobre este plugin, echa un vistazo a su página en CodeCanyon o dirígete a la documentación oficial de Ajax Search Pro.
- WordPress20 Mejores complementos y plugins para WPBakery Page Builder (Visual Composer) de 2019
- WordPress12 Mejores plugins de slider y carousel para WordPress de 2020
- WordPress20 Mejores plugins y widgets de calendario para WordPress
- WordPress PluginsMás de 20 mejores plugins de popups & opt-in para WordPress
