Los campos personalizados son una forma potente de mostrar información adicional en un sitio de WordPress.
Por ejemplo, puedes usarlos para almacenar detalles como el SKU del producto, el color, los ingredientes de una receta o el precio de un inmueble.
Sin embargo, mostrar estos datos a los visitantes de una manera con la que puedan interactuar suele ser un desafío.
Aquí es donde la creación de un filtro para tus campos personalizados ayuda a los usuarios a acotar los resultados y encontrar exactamente lo que necesitan. Afortunadamente, hay una forma sencilla de permitir a los usuarios ordenar el contenido basándose en estos datos personalizados.
En este artículo, te mostraremos cómo crear filtros de campos personalizados en WordPress.
¿Por qué son importantes los filtros de campos personalizados para tu sitio?
Sabemos por experiencia que los campos personalizados son geniales para almacenar datos adicionales. Pero esos datos son inútiles si los visitantes no pueden usarlos para ordenar el contenido.
Imagina que intentas comprar una camisa en línea pero tienes que hacer clic en cada producto solo para ver si está en tu talla. Eso es exactamente lo que sucede cuando no tienes filtros conectados a tus campos personalizados.
Veamos un sitio web de bienes raíces como ejemplo. Podrías usar campos personalizados para almacenar el número de habitaciones o los metros cuadrados totales de una casa.
Sin un filtro para esos campos, una familia que busca una casa de tres habitaciones tiene que revisar cada anuncio de estudio individual.
Lo mismo se aplica a un blog de cocina. A menudo vemos campos personalizados utilizados para detalles específicos como el recuento de calorías o el tiempo de preparación.
Si un visitante quiere una comida rápida de 30 minutos, no debería tener que leer recetas largas de cocción lenta para encontrar una.
Los visitantes quieren encontrar cosas rápidamente. Si no pueden filtrar por precio, ubicación o ingredientes específicos, probablemente abandonarán tu sitio.
Añadir estos filtros específicos cierra la brecha entre los datos adicionales y la experiencia del usuario. Convierte una lista desordenada en un catálogo organizado.
Ahora, veamos cómo puedes configurar fácilmente un filtro de campos personalizados en WordPress.
Crea filtros de campos personalizados en WordPress
El método más sencillo para añadir filtros de campos personalizados es usar un plugin como WPFilters.
WPFilters es el plugin de filtrado más capaz, fácil de usar para principiantes y te permite añadir filtros de estilo Amazon a tu sitio de WordPress.
Te permite crear conjuntos de filtros personalizados basados en categorías, etiquetas o datos personalizados y colocarlos en cualquier lugar de tu sitio.
Esto permite a tus visitantes explorar tu contenido para encontrar exactamente lo que necesitan en segundos.
WPFilters está construido por el mismo equipo detrás de SearchWP. Esto nos da la confianza de que funcionará perfectamente con nuestros resultados de búsqueda.
Con WPFilters, puedes convertir un campo de texto simple en casillas de verificación, menús desplegables, controles deslizantes de rango, botones de radio y más filtros. Esto pone el poder de tus datos personalizados directamente en manos de tus visitantes.
Ahora, veamos cómo puedes usarlo para crear filtros de campos personalizados en tu sitio.
Paso 1: Instalar y activar WPFilters
Primero, necesitarás dirigirte al sitio web de SearchWP para obtener tu copia de WPFilters.
Una vez que te registres, inicia sesión en tu área de cuenta y haz clic en la pestaña Descargas.
Aquí, haz clic en el botón Descargar WPFilters para guardar el archivo en tu ordenador. También te recomendamos copiar tu clave de licencia ahora para tenerla lista para más tarde.
A continuación, necesitas subir e instalar el plugin en tu sitio. Si eres nuevo en esto, consulta esta guía sobre cómo instalar un plugin de WordPress.
Tras la activación, aparecerá el asistente de configuración. Haz clic en el botón ‘Empezar’ para completar la configuración inicial.
Paso 2: Crear un Nuevo Elemento de Filtro
Para empezar, simplemente navega a WPFilters » Elementos desde tu panel de WordPress.
Luego, haz clic en el botón Añadir nuevo para empezar a construir tu filtro.
Desde aquí, deberías darle un nombre claro a tu filtro en la parte superior. Esto te ayuda a hacer un seguimiento si planeas crear varios filtros más adelante.
A continuación, mira la sección Tipo de campo. Puedes elegir cómo quieres que se vea el filtro, como casillas de verificación, un menú desplegable, un control deslizante o botones de radio.
Por ejemplo, un control deslizante funcionará mejor si quieres que los visitantes filtren por precio, una casilla de verificación es ideal para ordenar elementos usando múltiples opciones, o un menú desplegable para seleccionar una marca.
También puedes permitir a los usuarios filtrar por palabras clave específicas usando el campo de filtro de búsqueda.
Paso 3: Conectar el Filtro a un Campo Personalizado
Ahora, necesitas decirle al filtro de dónde obtener su información. Para hacerlo, simplemente desplázate hacia abajo hasta la sección Fuente de datos.
Luego, haz clic en el menú desplegable y desplázate hasta la sección Campo personalizado. Desde aquí, puedes elegir qué campo personalizado te gustaría usar para crear un filtro.
Por ejemplo, puedes elegir precio, color, marcas, peso, longitud y otros atributos del producto.
WPFilters también funciona perfectamente con plugins de campos personalizados como Advanced Custom Fields (ACF). Puedes crear fácilmente un filtro para cualquiera de los campos de ACF en tu sitio.
Paso 4: Personalizar la Configuración del Filtro
Después de conectar la fuente de datos, necesitas hacer que el filtro se vea bien para los visitantes personalizándolo.
Puedes empezar desplazándote hacia abajo hasta la sección Contenedor para cambiar el comportamiento del cuadro del filtro.
Por ejemplo, habilitar la opción ‘Mostrar título’ permite a los usuarios saber qué están filtrando, como “Rango de precios” o “Ingredientes”.
O puedes activar la opción ‘Colapsable’ para permitir a los usuarios ocultar el filtro y ahorrar espacio. También nos gusta usar la opción ‘Horizontal’ para colocar las opciones una al lado de la otra en lugar de en una larga lista vertical.
A continuación, mira la sección Elementos debajo para controlar las opciones específicas de la lista.
Aquí, puedes habilitar ‘Recuento de elementos’ para mostrar exactamente cuántos resultados existen para cada opción, lo que ayuda a establecer las expectativas del usuario. Normalmente sugerimos mantener Desactivado Mostrar vacíos para que tus visitantes no pierdan tiempo haciendo clic en opciones que no devuelven resultados.
Una vez que esté satisfecho con el aspecto de todo, simplemente desplácese hasta la parte superior y haga clic en el botón Guardar en la parte superior derecha.
También verá una vista previa del filtro de campos personalizados en el panel de la izquierda.
Paso 5: Mostrar el filtro de campos personalizados en su sitio
Lo mejor de WPFilters es que puede colocar su nuevo filtro en cualquier lugar de su sitio web.
Veamos cómo puede añadir el filtro a una página y a la barra lateral de su sitio.
1. Añadir el filtro de campos personalizados a una página
El plugin ofrece una opción de inserción integrada al crear el filtro. Simplemente haga clic en el botón 'Insertar' en la esquina superior derecha.
A continuación, se abrirá una ventana emergente donde podrá elegir entre diferentes opciones de inserción.
Puede elegir entre el bloque de Gutenberg, un shortcode o código PHP si es desarrollador.
También existe la opción de añadir el filtro a una página existente o crear una nueva.
Por ejemplo, digamos que desea utilizar el 'Bloque de Gutenberg' y añadirlo a una nueva página.
A continuación, deberá introducir el nombre de la nueva página y, a continuación, hacer clic en el botón '¡Vamos!'.
Su filtro de campos personalizados se precargará en la nueva página y podrá verlo en el editor de contenido de WordPress.
A continuación, puede hacer clic en el botón 'Publicar' en la esquina superior derecha.
Por otro lado, también puede colocar el bloque WPFilters manualmente en cualquier página o entrada.
Para empezar, simplemente abra la página o entrada donde desea que aparezca el filtro, haga clic en el botón más (+) para añadir un nuevo bloque y busque el Elemento WPFilters.
A continuación, deberá seleccionar el filtro que acaba de crear en el panel de Configuración.
Simplemente haga clic en el menú desplegable de la opción 'Seleccionar elemento' y elija su filtro.
Cuando haya terminado, haga clic en el botón 'Guardar'.
2. Añadir el filtro de campos personalizados a la barra lateral
También puede añadir el filtro a la barra lateral de su sitio web. Esta es una excelente manera de mantener los filtros visibles para los usuarios, de modo que puedan ordenar y encontrar rápidamente el producto o contenido adecuado.
Para empezar, puede ir a Apariencia » Widgets desde su panel de WordPress. Tenga en cuenta que este paso puede diferir según el tema de WordPress que esté utilizando.
A continuación, desplácese hasta la sección de la barra lateral y haga clic en el signo '+' para añadir el bloque de widget Elemento WPFilters.
Desde aquí, puede seleccionar el filtro de campos personalizados que creó en el panel de configuración de la derecha.
Simplemente haga clic en el menú desplegable 'Seleccionar elemento' y elija su filtro.
Cuando haya terminado, haga clic en el botón Actualizar.
Ahora, visite la página para ver el filtro de campos personalizados en acción.
Por ejemplo, así es como se ven los diferentes filtros de campos personalizados en nuestra tienda de demostración en línea.
Preguntas frecuentes sobre filtros de campos personalizados
¿Puedo usar filtros para datos de Advanced Custom Fields (ACF)?
Sí, definitivamente puedes. Usamos ACF en muchos de nuestros sitios y WPFilters funciona perfectamente con él.
¿Puedo añadir más de un filtro de campo personalizado a una página?
Absolutamente. Puedes crear elementos de filtro separados para diferentes campos, como uno para "Color" y otro para "Tamaño". Para hacerlos más visibles, puedes apilarlos en tu barra lateral para que los usuarios puedan acotar los resultados paso a paso.
¿Necesito saber programar para configurarlo?
En absoluto. El principal beneficio de usar WPFilters es que se encarga del trabajo técnico por ti. Te ayuda a configurar filtros avanzados simplemente haciendo clic en los menús, sin tocar un solo archivo PHP.
Los filtros de campos personalizados cambian la forma en que los visitantes interactúan con tus datos.
Esperamos que este tutorial te haya ayudado a aprender cómo crearlos en WordPress sin necesidad de programar. También te puede interesar consultar nuestras guías sobre cómo añadir búsqueda en vivo a tu sitio y cómo buscar por categoría en WooCommerce.
¿Listo para ofrecer a tus visitantes una mejor manera de ordenar el contenido? Puedes empezar con WPFilters aquí.
