Cómo permitir a los usuarios filtrar publicaciones y páginas en WordPress (3 métodos)

Una biblioteca de contenido en crecimiento es a menudo un signo de un sitio de WordPress saludable. Pero más contenido no siempre significa una mejor experiencia. Especialmente cuando los visitantes no pueden encontrar lo que buscan.

Hemos visto esto en muchos blogs en crecimiento: toneladas de excelentes publicaciones, pero ninguna forma fácil para que los visitantes las filtren, por lo que se van frustrados.

Eso significa que agregar filtros a tus publicaciones y páginas no es solo un extra agradable. Es imprescindible si quieres mantener a los visitantes interesados.

Cuando las personas pueden ordenar rápidamente tu contenido por categoría, etiqueta, fecha o incluso campos personalizados, es mucho más probable que se queden y exploren.

Pasamos mucho tiempo investigando y probando diferentes soluciones de filtrado para abordar este problema. En esta guía, te mostraremos 3 de las formas más fáciles y efectivas para que los usuarios filtren publicaciones y páginas en WordPress utilizando SearchWP, WPCode y el plugin Search & Filter.

¿Por qué agregar una función de filtrado para tus publicaciones y páginas de WordPress?

¿Alguna vez has visitado un sitio web de WordPress repleto de contenido, solo para tener dificultades para encontrar lo que necesitas? Esta puede ser una experiencia frustrante para los usuarios y hacer que abandonen tu sitio por completo.

En última instancia, esto puede afectar negativamente el SEO, ya que los motores de búsqueda consideran la experiencia del usuario como un factor de clasificación. Un sitio web con altas tasas de rebote y bajo compromiso podría ser visto como menos valioso por los motores de búsqueda.

Afortunadamente, existe una solución sencilla: implementar una función de búsqueda y filtros en tu sitio de WordPress. Esta potente herramienta permite a los usuarios acotar el contenido basándose en criterios específicos, lo que facilita enormemente encontrar lo que buscan.

Una función de búsqueda y filtros no solo es útil para blogs de WordPress. También es ideal para sitios como foros con miles de hilos. De esta manera, los usuarios pueden buscar la discusión correcta por tema, fecha o autor.

O, si tienes un sitio de podcast, los oyentes pueden buscar su episodio preferido utilizando la función.

Teniendo esto en cuenta, te mostraremos 3 métodos sencillos para que los usuarios filtren publicaciones y páginas en tu sitio de WordPress. Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

• Método 1: Filtrar publicaciones y páginas con SearchWP (Recomendado)
• Método 2: Filtrar publicaciones y páginas con código personalizado (Avanzado)
• Método 3: Filtrar publicaciones y páginas con el plugin Search & Filter (Gratis)
• Consejo extra: Agrega búsqueda Ajax en vivo a tu sitio de WordPress

¿Listo? ¡Empecemos de inmediato!

Método 1: Filtrar publicaciones y páginas con SearchWP (Recomendado)

SearchWP es un potente plugin de búsqueda para WordPress y es nuestra principal recomendación para agregar funcionalidad de filtrado a tu sitio web. Es muy fácil de usar, lo que lo convierte en una excelente opción para principiantes.

Aquí tienes una guía paso a paso sobre cómo usar SearchWP para crear un formulario de búsqueda personalizado con opciones de filtrado.

Paso 1: Instalar y configurar SearchWP

Primero, necesitarás instalar y activar el plugin SearchWP. Si eres nuevo en esto, tenemos una guía útil sobre cómo instalar un plugin de WordPress.

Una vez activado, puedes ir a SearchWP » Ajustes. Luego, en la pestaña 'General', procede a ingresar tu clave de licencia para activarlo.

Ahora, vamos a SearchWP » Algoritmo. Aquí, puedes editar el motor de búsqueda predeterminado o crear uno adicional.

El motor predeterminado permite a los usuarios buscar en páginas, publicaciones, archivos multimedia y comentarios, lo cual es bueno para un blog típico de WordPress.

Por otro lado, el motor de búsqueda adicional puede usar otras fuentes como categorías, etiquetas, tipos de publicaciones personalizadas y taxonomías personalizadas. Esto puede ser útil para crear un formulario de búsqueda y filtro de contenido que no sea de blog, como un filtro de productos de eCommerce para sitios web de WooCommerce.

Para este tutorial, nos quedaremos con el motor predeterminado y simplemente ajustaremos su configuración. Para hacerlo, puedes hacer clic en 'Fuentes y configuración'.

Dado que estamos creando una función de búsqueda y filtro para filtrar publicaciones y páginas, solo incluiremos páginas y publicaciones como las fuentes para el motor de búsqueda de WordPress.

También hemos habilitado la función 'Raíces de palabras clave', que permite a SearchWP mostrar resultados incluso si la palabra clave no coincide perfectamente.

Una vez que estés satisfecho con la configuración, simplemente puedes hacer clic en 'Listo'.

Paso 2: Ajusta tu motor de búsqueda

Ahora, verás una sección para todas las fuentes que seleccionaste (en nuestro caso, solo publicaciones y páginas).

Cada fuente tiene controles deslizantes para 'Relevancia de atributos aplicables'. Estos controles deslizantes determinan cuánta importancia le da SearchWP a cada atributo al clasificar los resultados de la búsqueda.

En términos más sencillos, el contenido que coincide estrechamente con un atributo de alta ponderación aparecerá más arriba en los resultados de búsqueda.

Por ejemplo, si le das más peso al atributo 'Contenido de la publicación' que al atributo 'Título de la publicación', SearchWP priorizará los resultados donde el término de búsqueda aparezca dentro del contenido mismo.

Puedes ajustar estos controles deslizantes según tu preferencia.

También puedes hacer clic en ‘Agregar/Eliminar Atributos’.

Esto hará que aparezca una ventana emergente para que incluyas o elimines más atributos.

Por ejemplo, podrías incluir taxonomías personalizadas o campos personalizados para hacerlos buscables.

Otra característica potente es la capacidad de crear reglas que incluyan o excluyan contenido específico de los resultados de búsqueda.

Para hacer esto, simplemente haz clic en el botón ‘Editar Reglas’.

Esta configuración te permite filtrar contenido irrelevante o resaltar categorías específicas.

En la siguiente ventana emergente, puedes hacer clic en ‘Agregar Regla’.

Ahora, simplemente haz clic en el menú desplegable y elige ‘Solo mostrar entradas si’ o ‘Excluir entradas si’.

Luego, puedes elegir si excluir o incluir el contenido si forma parte de una taxonomía específica, se publicó dentro de un rango de fechas determinado o tiene un ID determinado.

Para agregar otra regla, simplemente haz clic en el botón ‘Agregar Regla’ y repite el mismo proceso descrito anteriormente. Cuando estés satisfecho con la configuración de las reglas, haz clic en ‘Listo’.

Puedes repetir el mismo proceso para las otras fuentes de entrada de búsqueda, si es necesario.

Cuando estés satisfecho con el motor de búsqueda, puedes volver a la parte superior de la página y hacer clic en ‘Guardar’.

SearchWP ahora reconstruirá el índice, lo que puede tardar unos minutos.

Una vez que veas ‘Estado del índice 100%’, significa que SearchWP ha indexado todo tu contenido y reglas para el motor de búsqueda.

Paso 3: Crear un formulario de búsqueda personalizado

Ahora que el motor de búsqueda está configurado, creemos un formulario de búsqueda fácil de usar con opciones de filtrado.

Para empezar, vamos a SearchWP » Formularios de búsqueda, y luego hacemos clic en ‘Añadir nuevo’.

En la siguiente pantalla, lo primero que harás es darle un nombre reconocible a tu formulario.

Esto es solo para tu referencia interna, así que el nombre puede ser cualquier cosa que te sea fácil de recordar.

Luego, elegirás un diseño.

Para este tutorial, usaremos la opción ‘Combinado’, ya que proporciona la mayor cantidad de menús de filtrado.

Ahora, puedes desplazarte hacia abajo hasta la sección ‘Estilo personalizado’ y seleccionar ambas opciones, ‘Búsqueda por categoría’ y ‘Búsqueda avanzada’. Esto asegura que tu formulario incluya todas las funciones de filtrado.

Opcionalmente, puedes elegir ‘Búsqueda rápida’ si deseas agregar algunos términos de búsqueda sugeridos debajo de la barra de búsqueda.

Luego, en el menú ‘Motor’, seleccionarás el motor de búsqueda que creaste anteriormente.

En cuanto a ‘Resultados’, puedes elegir qué página de resultados de búsqueda usar: los resultados predeterminados de WordPress o la versión de SearchWP.

En el ‘Tipo de búsqueda’, seleccionemos ‘Entradas’ y ‘Páginas’.

Debajo de eso, puedes agregar los nombres de las categorías que deseas incluir en el menú de filtro.

Para la ‘Etiqueta del campo’, ingresa un texto de marcador de posición que aparezca en el campo de búsqueda, como ‘¿Qué estás buscando?’

Si seleccionaste ‘Búsqueda rápida’ anteriormente, entonces puedes incluir términos que los usuarios podrían buscar comúnmente en los ‘Elementos de búsqueda rápida’.

En el ‘Filtro/s de búsqueda avanzada’, simplemente elige qué opciones de filtrado deseas ofrecer a los usuarios, como ‘Autores’, ‘Tipos de publicación’ o ‘Etiquetas’.

Finalmente, en ‘Estilo del formulario’ y ‘Estilo del botón’, personaliza la apariencia del formulario de búsqueda para que coincida con el diseño de tu sitio web.

Puedes cambiar los colores, fuentes y formas del formulario de búsqueda.

Una vez que todo esté configurado, puedes volver a desplazarte hacia arriba.

Luego, es hora de hacer clic en ‘Guardar’ para crear tu formulario de búsqueda.

Paso 4: Incrustar el formulario de búsqueda y filtro

El plugin SearchWP te permite incrustar fácilmente el formulario de búsqueda en el front-end de tu sitio web, como en tu página de inicio o en áreas listas para widgets. Aquí, demostraremos cómo agregarlo a una página usando el editor de bloques de WordPress y el bloque de formulario de búsqueda.

Primero, puedes abrir la página o publicación a la que deseas agregar el formulario. Luego, haz clic en el ícono ‘+ Agregar Bloque’ y busca ‘Formulario de Búsqueda’.

En la barra lateral de ‘Configuración del Bloque’, ve y elige el formulario que creaste en el menú desplegable.

Finalmente, simplemente haz clic en ‘Publicar’ o ‘Actualizar’ para ver el formulario de búsqueda en vivo.

Para más información, puedes consultar estas guías paso a paso:

• Cómo agregar un formulario de búsqueda en una publicación de WordPress
• Cómo agregar una barra de búsqueda al menú de WordPress

Alternativamente, puedes mostrar el formulario usando un shortcode.

Para hacer esto, necesitarás encontrar el shortcode para tu formulario específico yendo a SearchWP » Formularios de Búsqueda y copiando el código en la columna ‘Shortcode’.

Tenemos una guía sobre cómo agregar shortcodes en WordPress si necesitas ayuda.

Con el formulario de búsqueda y las opciones de filtrado en su lugar, tus visitantes ahora pueden encontrar fácilmente el contenido que buscan en tu sitio web.

Esto no solo mejora la experiencia del usuario, sino que también puede animarlos a explorar diferentes categorías y descubrir más de tu valioso contenido.

Método 2: Filtrar publicaciones y páginas con código personalizado (Avanzado)

El siguiente método utilizará código personalizado. Para principiantes, este proceso puede parecer intimidante, pero hemos probado el código para asegurarnos de que funcione sin problemas con tu sitio web.

Además, utilizaremos WPCode, que es el mejor plugin de fragmentos de código del mercado. Este plugin permite insertar código personalizado de forma segura sin tener que lidiar directamente con los archivos de tu sitio web, por lo que es menos probable que rompas tu sitio.

Algunas de nuestras marcas asociadas usan WPCode para agregar y administrar fragmentos de código personalizados, y les encanta. Nosotros también lo hemos probado y encontramos que funciona excepcionalmente bien. Puede obtener más información sobre nuestras experiencias en nuestra reseña completa de WPCode.

El primer paso es instalar y activar WPCode. Para obtener más información, puede consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, puede ir a Fragmentos de código » + Agregar fragmento en su área de administración de WordPress.

Luego, seleccionemos 'Agregar su código personalizado (Nuevo fragmento)' y hagamos clic en el botón 'Usar fragmento'.

Ahora, hay 2 tipos de fragmentos de código que debe agregar. Vamos a revisarlos uno por uno:

Agregar un código de filtro de WordPress

Este código le indica a WordPress que filtre los resultados de búsqueda del usuario basándose en las opciones que han seleccionado en el formulario de búsqueda. Funcionará con otro fragmento de código que crea el formulario de búsqueda, que discutiremos más adelante.

Primero, necesita darle un nombre a su nuevo fragmento. Puede ser algo tan simple como 'Filtro de búsqueda de WordPress'.

Luego, deberá cambiar el 'Tipo de código' a 'Fragmento de PHP'.

A continuación, simplemente copie el siguiente código y péguelo en el cuadro 'Vista previa del código':

function wpb_filter_posts($query) { if ($query->is_main_query() && $query->is_search) { // Category filter if (isset($_GET['category'])) { $category = get_category_by_slug($_GET['category']); if ($category) { $query->set('cat', $category->term_id); } } // Published date filter based on URL structure $url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); $url_parts = explode('/', trim($url_path, '/')); if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) { $year = $url_parts[0]; $month = $url_parts[1]; $day = $url_parts[2]; $query->set('date_query', array( array( 'year' => $year, 'month' => $month, 'day' => $day, ), )); } // Include posts without categories or tags $query->set('post_status', 'publish'); $query->set('post_type', 'post'); $query->set('posts_per_page', -1); // Include post types if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') { $query->set('post_type', array('page')); } else { $query->set('post_type', array('post', 'page', 'custom_post_type')); } } } add_action('pre_get_posts', 'wpb_filter_posts'); 

Este fragmento de código verifica si el usuario ha elegido algún filtro en el formulario de búsqueda. Por ejemplo, si se selecciona un filtro de categoría, el código puede identificar esa categoría y mostrar solo las publicaciones que le pertenecen.

También puede filtrar los resultados por fecha buscando el año, mes y día específicos que el usuario haya elegido.

Finalmente, el código verifica y filtra los resultados según si el usuario desea ver solo publicaciones, páginas o todos los tipos de publicaciones (incluyendo tipos de publicaciones personalizadas).

Con el código pegado, desplázate hacia abajo hasta la sección 'Insertar Ubicación'. Por defecto, el 'Método de Inserción' será 'Insertar Automáticamente' y la Ubicación será 'Ejecutar en Todas Partes'.

Puedes dejar estas configuraciones como están para que el código se pueda agregar al archivo functions.php de tu tema de WordPress y funcione correctamente.

Luego, simplemente activa el fragmento de código y haz clic en 'Guardar Fragmento'.

Agregar un Código de Formulario de Búsqueda de WordPress

El siguiente código creará un formulario de búsqueda personalizado, que podrás incrustar usando un shortcode más adelante.

Puedes agregar código personalizado usando WPCode repitiendo los mismos pasos. Luego, puedes nombrar este código 'Formulario de Búsqueda de WordPress' y cambiar el tipo de código a 'Fragmento PHP'.

Ahora, puedes pegar el fragmento de código a continuación en el cuadro 'Vista Previa del Código':

function wpb_filter_posts_form() { $categories = get_categories(); $tags = get_tags(); $post_types = get_post_types(array('public' => true)); $output = '<form action="' . home_url('/') . '" method="get">'; $output .= '<input type="search" name="s" placeholder="Search...">'; // Category dropdown $output .= '<select name="category">'; $output .= '<option value="" selected>All Categories</option>'; foreach ($categories as $category) { $output .= '<option value="' . $category->slug . '">' . $category->name . '</option>'; } $output .= '</select>'; // Tag dropdown $output .= '<select name="tag">'; $output .= '<option value="" selected>All Tags</option>'; foreach ($tags as $tag) { $output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>'; } $output .= '</select>'; // Post type dropdown $output .= '<select name="post_type">'; $output .= '<option value="all" selected>All Post Types</option>'; foreach ($post_types as $post_type) { $post_type_object = get_post_type_object($post_type); $output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>'; } $output .= '</select>'; // Year dropdown $output .= '<select name="year">'; $output .= '<option value="">Select Year</option>'; for ($year = date('Y'); $year >= 2000; $year--) { $output .= '<option value="' . $year . '">' . $year . '</option>'; } $output .= '</select>'; // Month dropdown $output .= '<select name="month">'; $output .= '<option value="">Select Month</option>'; for ($month = 1; $month <= 12; $month++) { $output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>'; } $output .= '</select>'; // Day dropdown $output .= '<select name="day">'; $output .= '<option value="">Select Day</option>'; for ($day = 1; $day <= 31; $day++) { $output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>'; } $output .= '</select>'; $output .= '<input type="submit" value="Search">'; $output .= '</form>'; return $output; } add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form'); 

Este código crea un shortcode llamado [wpb_filter_posts_form], que agregará un formulario que permite a los usuarios buscar en tu sitio. El formulario incluye una barra de búsqueda para palabras clave y varios menús desplegables para filtrar.

El código recupera categorías, etiquetas y tipos de publicación disponibles de tu sitio para los menús desplegables de la barra de búsqueda. Los usuarios pueden elegir categorías, etiquetas o tipos de publicación específicos para refinar sus resultados de búsqueda.

Adicionalmente, el código incluye menús desplegables de año, mes y día para un filtrado aún más preciso por fecha. Finalmente, agrega un botón de enviar para iniciar la búsqueda con los filtros elegidos.

Al igual que en el código anterior, puedes dejar la configuración de ‘Método de inserción’ como está. Luego, simplemente activa el código y guárdalo.

Incrustar el shortcode del formulario de búsqueda

En esta etapa, puedes agregar el shortcode [wpb_filter_posts_form] a una publicación, página, plantilla de tema o área lista para widgets. Para obtener más información, puedes consultar nuestra guía sobre cómo agregar shortcodes en WordPress.

En este caso, agregaremos el shortcode a una página de búsqueda personalizada. Si deseas hacer lo mismo, procede a crear una nueva página en WordPress.

Luego, personaliza la página de búsqueda con los bloques que necesites. Por ejemplo, puedes agregar imágenes o texto para instruir a los lectores sobre cómo usar la barra de búsqueda.

Después de eso, simplemente puedes hacer clic en el botón ‘+ Agregar bloque’ y seleccionar el bloque ‘Shortcode’.

Una vez hecho esto, simplemente inserta el shortcode [wpb_filter_posts_form] en el campo correspondiente.

El siguiente paso es presionar el botón ‘Publicar’, ‘Actualizar’ o ‘Guardar’ para que tus cambios se hagan efectivos.

Ahora deberías ver tu nuevo formulario de búsqueda personalizado.

Así es como se ve en nuestro sitio web de demostración:

Método 3: Filtrar publicaciones y páginas con el plugin Search & Filter (Gratis)

El último método es usar el plugin Search & Filter, que está disponible de forma gratuita. Es una excelente opción si buscas una manera rápida y sencilla de habilitar la función de búsqueda y filtrado en la página de tu blog de WordPress.

Lo que quieres hacer es instalar y activar el plugin Search & Filter. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarse, el plugin agregará un nuevo elemento de menú llamado ‘Buscar y filtrar’ a tu área de administración de WordPress. Al hacer clic en él, serás dirigido a la página de uso del plugin con documentación detallada sobre cómo usarlo.

El plugin Buscar y filtrar viene con un shortcode que acepta diferentes parámetros para mostrar las opciones de filtrado. Puedes usar este shortcode en una publicación, página o dentro de un widget de texto:

[searchandfilter fields="search,category,post_tag"]

Esto mostrará las opciones de filtrado con los campos de búsqueda, categoría y etiqueta:

Lo genial del plugin es que puedes personalizar qué opciones de filtrado están disponibles editando las etiquetas del shortcode.

Por ejemplo, si deseas incluir los campos de categoría, etiqueta, tipo de publicación y fecha en la barra de búsqueda, deberás usar este shortcode:

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Así es como se ve:

Si no quieres usar menús desplegables, también puedes usar casillas de verificación y agregar etiquetas para cada campo.

En el siguiente shortcode, le estamos indicando al plugin que muestre la barra de búsqueda con casillas de verificación para las opciones de categoría:

[searchandfilter headings="Selecciona categorías:" types="checkbox" fields="category"]

Por favor, revisa el siguiente ejemplo:

Adicionalmente, puedes indicarle al plugin que use casillas de verificación para algunas opciones de filtro y menús desplegables para otras en un solo shortcode.

Este es el shortcode que usamos para incluir tipos de publicación, categorías y etiquetas en la barra de búsqueda. Le pedimos al plugin que use casillas de verificación para la opción de tipos de publicación:

[searchandfilter headings="Tipo de publicación, Categoría, Etiqueta" types="checkbox, select, select" fields="post_types,category,post_tag"]

Siéntete libre de consultar la documentación del plugin para conocer más formas de usar el shortcode.

Consejo extra: Agrega búsqueda Ajax en vivo a tu sitio de WordPress

Ahora que sabes cómo permitir que los usuarios filtren publicaciones y páginas, puedes ir un paso más allá y mejorar la experiencia de búsqueda con búsqueda Ajax en vivo.

La búsqueda Ajax en vivo utiliza tecnología en tiempo real para mostrar los resultados de búsqueda mientras los usuarios escriben sus consultas. Esto significa que ya no tendrá que esperar a que se actualice una página. Los resultados aparecerán al instante, haciendo que el proceso de búsqueda sea mucho más rápido y conveniente para sus visitantes.

Una experiencia de búsqueda más rápida significa que puede mantener a los usuarios en su sitio por más tiempo, aumentando las visitas a la página y reduciendo la tasa de rebote.

La buena noticia es que puedes agregar fácilmente esta funcionalidad a tu sitio con un plugin gratuito llamado SearchWP Live Ajax Search. Puedes leer nuestro tutorial de WordPress sobre cómo agregar búsqueda Ajax en vivo a tu sitio web para más información.

Esperamos que este artículo te haya ayudado a aprender cómo permitir que los usuarios filtren publicaciones y páginas en WordPress. También te puede interesar consultar nuestra guía sobre cómo crear un directorio web y nuestras selecciones expertas de plugins de búsqueda de WordPress para mejorar la búsqueda de tu sitio.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.