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

¿Desea permitir a los usuarios filtrar entradas y páginas en su sitio web WordPress?

Los usuarios suelen visitar su sitio web en busca de un tipo específico de contenido. Tal vez estén interesados en sus últimos tutoriales o reseñas de productos. ¿No sería útil que pudieran filtrar fácilmente su contenido para encontrar exactamente lo que buscan?

En este artículo, le mostraremos cómo permitir a los usuarios filtrar entradas y páginas en WordPress utilizando una práctica característica de búsqueda y filtro.

¿Por qué añadir una característica de filtrado para sus entradas y páginas de WordPress?

¿Ha visitado alguna vez un sitio web repleto de contenido solo para encontrar lo que necesita? Esto puede resultar frustrante para los usuarios y hacer que abandonen el sitio.

En última instancia, esto puede afectar negativamente al SEO, ya que los motores de búsqueda consideran la experiencia del usuario un factor de clasificación. Un sitio web con altas tasas de rebote y baja participación puede ser considerado menos valioso por los motores de búsqueda.

Afortunadamente, existe una solución sencilla: implementar una característica de búsqueda y filtro en su sitio web de WordPress. Esta potente herramienta permite a los usuarios limitar el contenido en función de criterios específicos, por lo que es muy fácil encontrar lo que buscan.

Una característica de búsqueda y filtrado no sólo es buena para los blogs de WordPress. También es ideal para sitios como foros con miles de temas. Así, los usuarios pueden buscar el debate adecuado por tema, fecha o autor.

O, si tiene un sitio de podcasts, los oyentes pueden buscar su episodio preferido utilizando esta característica.

Con esto en mente, veamos 3 métodos sencillos para permitir a los usuarios filtrar entradas y páginas en su sitio WordPress. Puede utilizar los enlaces rápidos a continuación para omitir a su método preferido:

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

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

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

Paso 1: Instalar y configurar SearchWP

En primer lugar, tendrás que 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, vaya a SearchWP ” Ajustes. En la pestaña “General”, introduzca su clave de licencia para activarla.

Ahora, dirígete a SearchWP ” Algoritmo. Aquí, puedes editar el motor de búsqueda por defecto o crear uno adicional.

El motor por defecto permite a los usuarios buscar a través de páginas, entradas, medios y comentarios, lo que está bien para un típico blog de WordPress.

Por otro lado, el buscador adicional puede utilizar otras fuentes como Categorías, Etiquetas, Tipos de contenido personalizados y Taxonomías personalizadas. Esto puede ser útil para crear un formulario de búsqueda y filtrado de contenido que no sea de blog, como un filtro de productos de comercio electrónico para sitios web de WooCommerce.

Para este tutorial, nos quedaremos con el motor por defecto y simplemente ajustaremos sus parámetros. Para ello, haz clic en “Fuentes y ajustes”.

Como estamos creando una función de búsqueda y filtro para filtrar entradas y páginas, sólo incluiremos páginas y entradas como fuentes para el motor de búsqueda de WordPress.

También hemos activado la característica “Tallos de palabras clave”, que permite a SearchWP mostrar resultados aunque la palabra clave no coincida perfectamente.

Cuando estés satisfecho con los ajustes, haz clic en “Listo”.

Paso 2: Ponga a punto su motor de búsqueda

Ahora verás una sección para todas las fuentes que hayas seleccionado (en nuestro caso, sólo páginas y entradas).

Cada fuente tiene carruseles / controles deslizantes para ‘Relevancia de los atributos aplicables’. Estos controles deslizantes determinan la importancia que SearchWP otorga a cada atributo a la hora de clasificar los resultados de búsqueda.

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

Por ejemplo, si da más importancia al atributo “Contenido de la entrada” que al atributo “Título de la entrada”, SearchWP dará prioridad a los resultados en los que el término de búsqueda aparezca dentro del propio contenido.

Puede ajustar estos carruseles / controles deslizantes según sus preferencias.

También puede hacer clic en “Añadir / eliminar atributos”.

Esto hará que aparezca una ventana emergente para que incluya o borre más atributos.

Por ejemplo, puede incluir taxonomías personalizadas o campos personalizados para que se puedan realizar búsquedas.

Otra potente característica es la posibilidad de crear reglas que incluyan o excluyan contenidos específicos de los resultados de búsqueda.

Para ello, basta con hacer clic en el botón “Editar reglas”.

Este ajuste le permite filtrar el contenido irrelevante o resaltar categorías específicas.

En la siguiente ventana emergente, haga clic en “Añadir regla”.

Ahora, solo tiene que desplegar el menú y elegir “Solo mostrar entradas / registros si” o “Excluir entradas / registros si”.

A continuación, puede elegir si desea excluir o incluir el contenido si forma parte de una taxonomía específica, se publicó dentro de un intervalo de fechas determinado o tiene un ID determinado.

Para añadir otra regla, sólo tienes que hacer clic en el botón “Añadir regla” y repetir el mismo proceso descrito anteriormente. Cuando esté satisfecho con el modo en que se han establecido las reglas, haga clic en “Listo”.

Ahora puede repetir el mismo proceso para las demás fuentes de entradas / registros de búsqueda.

Cuando estés satisfecho con el motor de búsqueda, vuelve a la parte superior de la página y haz clic en “Guardar”.

SearchWP 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, vamos a crear un formulario de búsqueda fácil de usar con opciones de filtrado.

Vaya a SearchWP ” Formularios de búsqueda y haga clic en “Añadir nuevo”.

En primer lugar, dé a su formulario un nombre reconocible.

Esto es sólo para su referencia interna, por lo que el nombre puede ser cualquier cosa que sea fácil de recordar para usted.

A continuación, elija una estructura / disposición / diseño / plantilla.

Para este tutorial, utilizaremos la opción “Combinado”, ya que es la que ofrece más menús de filtrado.

Ahora, desplácese hacia abajo hasta la sección “Estilos personalizados” y seleccione las opciones “Búsqueda por categoría” y “Búsqueda avanzada”. Así te asegurarás de que tu formulario incluye todas las características de filtrado.

Opcionalmente, puede elegir “Búsqueda rápida” si desea añadir algunos términos de búsqueda sugeridos debajo de la barra de búsqueda.

A continuación, en el menú “Motor”, seleccione el motor de búsqueda que creó anteriormente.

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

En “Tipo de búsqueda”, seleccione Entradas y páginas.

Debajo puede añadir los nombres de las categorías que desea incluir en el menú de filtros.

Para la etiqueta de campo, introduzca un texto de marcador de posición que aparezca en el campo de búsqueda, como “¿Qué está buscando?”.

Si antes ha seleccionado “Búsqueda rápida”, puede incluir términos que los usuarios suelen buscar en los elementos de búsqueda rápida.

En “Filtro/s de búsqueda avanzada”, sólo tiene que elegir las opciones de filtrado que desea ofrecer a los usuarios, como autores, tipos de entradas o etiquetas.

Por último, en el “Estilo del formulario” y “Estilo del botón”, personalice el aspecto del formulario de búsqueda para que se ajuste al diseño de su sitio web.

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

Una vez establecido todo, desplázate de nuevo hacia arriba.

A continuación, haga clic en “Guardar” para crear su formulario de búsqueda.

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

El plugin SearchWP te permite incrustar fácilmente el formulario de búsqueda en la parte frontal de tu sitio web, como en tu página de inicio o en áreas preparadas para widgets. Aquí, vamos a demostrar la adición a una página utilizando el editor de bloques de WordPress y el bloque de formulario de búsqueda.

Primero, abre la página o entrada a la que quieras añadir el formulario. A continuación, haz clic en el icono “+ Añadir bloque” y busca “Formulario de búsqueda”.

En la barra lateral Ajustes de bloque, elija el formulario que ha creado en el menú desplegable.

Por último, publique o actualice la página para ver el formulario de búsqueda en directo.

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

• Cómo añadir un formulario de búsqueda en una entrada de WordPress
• Cómo añadir una barra de búsqueda al menú de WordPress

También puede mostrar el formulario mediante un shortcode.

Para ello, busque el shortcode de su formulario específico en SearchWP ” Buscar formularios y copie el código en la columna ‘Shortcode’.

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

Con el formulario de búsqueda y las opciones de filtrado, sus visitantes podrán encontrar fácilmente el contenido que buscan en su sitio web.

Esto no solo mejora la experiencia del usuario, sino que también puede animarle a explorar diferentes categorías y descubrir más contenidos valiosos.

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

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

Además, utilizaremos WPCode, que es el mejor plugin de fragmentos de código del mercado. Este plugin hace que sea seguro insertar código personalizado sin tratar directamente con los archivos de su sitio web, por lo que es menos probable que rompa su sitio.

El primer paso es instalar WPCode. Para más información, puedes marcar / comprobar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, vaya a Fragmentos de código ” + Añadir fragmento en su área de administrador de WordPress. A continuación, seleccione “Añadir su código personalizado (nuevo fragmento de código)” y haga clic en el botón “Usar fragmento de código”.

Ahora, hay dos tipos de fragmentos de código que tienes que añadir. Vamos a ir a través de ellos uno por uno:

Añadir un código de filtro de WordPress

Este código le dice a WordPress que filtre los resultados de búsqueda del usuario basándose en las opciones que ha seleccionado en el formulario de búsqueda. Funcionará con otro fragmento de código que se encarga de crear el formulario de búsqueda, del que hablaremos más adelante.

En primer lugar, debe dar un nombre a su nuevo fragmento de código. Puede ser algo tan simple como ‘WordPress Search Filter’.

A continuación, cambie el Tipo de código a ‘Fragmento de código PHP’.

A continuación, 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 comprueba si el usuario ha seleccionado 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 entradas que pertenezcan a ella.

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

Por último, el código comprueba y filtra los resultados en función de si el usuario desea ver sólo entradas, páginas o todos los tipos de contenido (incluidos los tipos de entradas personalizados).

Una vez pegado el código, desplácese 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”.

Puede dejar estos ajustes como están para que el código se pueda añadir al archivo functions. php de su tema de WordPress y funcione correctamente.

A continuación, active el fragmento de código y haga clic en “Guardar fragmento”.

Añadir un código de formulario de búsqueda de WordPress

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

Todo lo que necesitas hacer es repetir los mismos pasos para añadir código personalizado usando WPCode como antes. A continuación, puede nombrar este código ‘WordPress Search Form’ y cambiar el tipo de código a ‘PHP Snippet.’

Ahora, pegue el fragmento de código siguiente 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 añadirá un formulario que permite a los usuarios buscar en su sitio. El formulario incluye una barra de búsqueda de palabras clave y varios menús desplegables para filtrar.

El código recupera categorías, etiquetas y tipos de entradas disponibles en su sitio para los menús desplegables de la barra de búsqueda. Los usuarios pueden elegir categorías, etiquetas o tipos de entradas específicos para limitar los resultados de la búsqueda.

Además, el código incluye desplegables de año, mes y día para un filtrado aún más preciso por fecha. Por último, añade un botón de envío para iniciar la búsqueda con los filtros elegidos.

Al igual que en el código anterior, puedes dejar los ajustes del Método de inserción como están. A continuación, activa el código y guárdalo.

Incrustar el shortcode del formulario de búsqueda

En este punto, puedes añadir el shortcode [wpb_filter_posts_form] a una entrada, página, plantilla de tema o área preparada para widgets. Para más información, puedes comprobar nuestra guía sobre cómo añadir shortcodes en WordPress.

En este caso, vamos a añadir el shortcode a una página de búsqueda personalizada. Si quieres hacer lo mismo, sigue adelante y crea una nueva página en WordPress.

A continuación, personalice la página de búsqueda utilizando cualquier tipo de bloques que necesite. Por ejemplo, puede añadir imágenes o texto para indicar a los lectores cómo utilizar la barra de búsqueda.

A continuación, haga clic en el botón “+ Añadir bloque” y seleccione el bloque “Shortcode”.

Una vez hecho esto, sólo tienes que insertar el shortcode [wpb_filter_posts_form] en el campo correspondiente.

Pulsa el botón Publicar, Actualizar o Guardar para hacer efectivos los cambios.

Ahora debería ver su nuevo formulario de búsqueda personalizado.

Este es el aspecto que tiene en nuestro sitio web de demostración:

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

El último método es utilizar el plugin Search & Filter, que está disponible de forma gratuita. Es una gran opción si estás buscando una manera rápida y fácil de activar la característica de búsqueda y filtro en la página de tu blog de WordPress.

Lo que hay que hacer es instalar y activar el programa Búsqueda y filtro plugin. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, el plugin añadirá un nuevo elemento / artículo de menú llamado ‘Buscar y Filtrar’ a su área de administrador de WordPress. Al hacer clic en él, accederás a la página de uso del plugin con documentación detallada sobre cómo utilizarlo.

Search & Filter plugin viene con un shortcode que acepta diferentes parámetros para mostrar las opciones de filtrado. Puede utilizar este shortcode en una entrada, página o dentro de un widget de texto:

[searchandfilter fields="búsqueda,categoría,post_tag"]

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

Lo mejor acerca de este plugin es que puedes personalizar las opciones de filtrado disponibles editando las etiquetas shortcode.

Por ejemplo, si desea incluir campos de categoría, etiqueta, tipo de entrada y fecha en la barra de búsqueda, deberá utilizar este shortcode:

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

Esto es lo que parece:

Si no desea utilizar menús desplegables, también puede utilizar casillas de verificación y añadir etiquetas para cada campo.

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

[searchandfilter encabezados="Seleccionar categorías:" types="casilla de verificación" fields="categoría"]

Marque / compruebe el siguiente ejemplo:

Además, puede indicar al plugin que utilice casillas de verificación para algunas opciones de filtro y menús desplegables para otras en un shortcode.

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

[searchandfilter encabezados="Tipo de contenido, categoría, etiqueta" types="casilla de verificación, seleccionar, seleccionar" fields="tipo_contenido,categoría,etiqueta_contenido"]

No dudes en consultar la documentación del plugin para ver más formas de utilizar el shortcode.

Consejo extra: Añadir búsqueda Ajax en vivo a su sitio WordPress

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

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

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

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

Esperamos que este artículo te haya ayudado a aprender cómo permitir a los usuarios filtrar entradas y páginas en WordPress. También puedes marcar / comprobar nuestra guía práctica sobre cómo crear un directorio web en WordPress y nuestra selección de plugins de WordPress imprescindibles para hacer crecer tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.