Get SearchWP
SearchWP Documentation

Consulta la guía de instalación, explora la base de conocimiento, descubre los numerosos hooks de SearchWP

Añadir un Cuadro Desplegable de Selección de Categoría al Formulario de Búsqueda

Una de las formas más populares de integrar la búsqueda es permitir que los visitantes controlen el conjunto de resultados por sí mismos. Esto suele venir en forma de permitirles elegir una categoría específica de un menú desplegable (cuadro de selección) para acompañar su búsqueda.

Este artículo explicará cómo puede lograr tres enfoques diferentes para agregar un menú desplegable de categorías a su formulario de búsqueda.

  1. Cree su propio formulario de búsqueda con un menú desplegable de categorías
  2. Personalice la extensión de códigos cortos para incluir un menú desplegable de categorías
  3. Personalice el formulario de búsqueda predeterminado para incluir un cuadro desplegable de selección de categorías

Creación de su propio formulario de búsqueda

La creación de su propio formulario de búsqueda implica editar los archivos de su tema para incluir los campos de entrada y los botones que deseamos incluir. En el nivel más básico, puede agregar lo siguiente al archivo de plantilla de su tema donde desee que aparezca el formulario:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ); ?>" />
</label>
<?php
// output all of our Categories
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
?>
<input type="submit" class="search-submit" value="Search" />
</form>
view raw sample.phtml hosted with ❤ by GitHub

Basado en el formulario de búsqueda predeterminado proporcionado por WordPress, este formulario genera un campo para la consulta de búsqueda, un cuadro de selección que contiene todas sus categorías y un botón para activar la búsqueda. Tenga en cuenta los argumentos pasados a wp_dropdown_categories() que definen la etiqueta 'Cualquier categoría' y establecen el name del desplegable como swp_category_limiter.

Con su formulario en su lugar, el último paso es decirle a SearchWP que tenga en cuenta el valor del desplegable enviado al realizar búsquedas. Para ello, vamos a utilizar un Mod. Vamos a utilizar el ID de la categoría enviado en el desplegable para limitar nuestro conjunto de resultados de búsqueda a la categoría elegida.

Nota: observe que la variable que buscamos era la que usamos para establecer el name del select que fue generado por wp_dropdown_categories()

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// Limit SearchWP results to chosen Category from dropdown.
// @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/
add_filter( 'searchwp\query\mods', function( $mods, $query ) {
global $wpdb;
// Only proceed if a Category was chosen from the dropdown.
if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) {
return $mods;
}
// Optional: only proceed if we're using a specific Engine.
// if ( 'default' !== $query->get_engine()->get_name() ) {
// return $mods;
// }
$alias = 'swpkbcat';
$tax_query = new WP_Tax_Query( [ [
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => absint( $_GET['swp_category_limiter'] ),
] ] );
$tq_sql = $tax_query->get_sql( $alias, 'ID' );
$mod = new \SearchWP\Mod();
// If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that.
if ( ! empty( $tq_sql['join'] ) ) {
// Queue the assumed wp_posts JOIN using our alias.
$mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) {
return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id";
} );
// Queue the WP_Tax_Query JOIN which already has our alias.
$mod->raw_join_sql( $tq_sql['join'] );
// Queue the WP_Tax_Query WHERE which already has our alias.
$mod->raw_where_sql( '1=1 ' . $tq_sql['where'] );
} else {
// There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already
// exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod
// will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query.
$mod->set_local_table( $wpdb->posts );
$mod->on( 'ID', [ 'column' => 'id' ] );
$mod->raw_where_sql( function( $runtime ) use ( $tax_query ) {
$tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' );
return '1=1 ' . $tq_sql['where'];
} );
}
$mods[] = $mod;
return $mods;
}, 20, 2 );
view raw searchwp-customizations.php hosted with ❤ by GitHub

Este fragmento verifica que se haya elegido un valor no vacío del desplegable. Si es así, nuestro Mod se crea y se agrega a la Query.

Utilice la extensión de códigos cortos de SearchWP

La Extensión de Códigos Cortos de SearchWP le permite generar fácilmente formularios de búsqueda y controlar las páginas de resultados de búsqueda utilizando Códigos Cortos de WordPress. Aquí hay un ejemplo de formulario de búsqueda que incluye un menú desplegable de categorías para elegir:

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// UNCOMMENT THIS IF YOU WANT TO USE SHORTCODES IN WIDGETS
// add_filter( 'widget_text', 'do_shortcode' );
// output the categories dropdown
function my_searchwp_shortcodes_inject_categories() {
echo '<p class="searchwp-shortcodes-categories">';
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
echo '</p>';
}
add_action( 'searchwp_shortcodes_after_input', 'my_searchwp_shortcodes_inject_categories' );
view raw searchwp-customizations.php hosted with ❤ by GitHub

Eso se encarga de nuestro formulario de búsqueda, incluirá automáticamente un desplegable de nuestras categorías entre el campo de búsqueda y el botón de envío. Tenga en cuenta que en este fragmento hemos personalizado el name del desplegable a swp_category_limiter, que utilizaremos a continuación.

Hasta ahora, solo hemos configurado el formulario para generar un desplegable que permitirá al visitante definir una categoría para la restricción de resultados, todavía necesitamos capturar esa información cuando se envía el formulario y comunicársela a SearchWP.

Para ello, vamos a utilizar un Mod. Vamos a utilizar el ID de la categoría enviado en el desplegable para limitar nuestro conjunto de resultados de búsqueda a la categoría elegida.

Nota: observe que la variable que buscamos era la que usamos para establecer el name del select que fue generado por wp_dropdown_categories()

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// Limit SearchWP results to chosen Category from dropdown.
// @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/
add_filter( 'searchwp\query\mods', function( $mods, $query ) {
global $wpdb;
// Only proceed if a Category was chosen from the dropdown.
if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) {
return $mods;
}
// Optional: only proceed if we're using a specific Engine.
// if ( 'default' !== $query->get_engine()->get_name() ) {
// return $mods;
// }
$alias = 'swpkbcat';
$tax_query = new WP_Tax_Query( [ [
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => absint( $_GET['swp_category_limiter'] ),
] ] );
$tq_sql = $tax_query->get_sql( $alias, 'ID' );
$mod = new \SearchWP\Mod();
// If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that.
if ( ! empty( $tq_sql['join'] ) ) {
// Queue the assumed wp_posts JOIN using our alias.
$mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) {
return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id";
} );
// Queue the WP_Tax_Query JOIN which already has our alias.
$mod->raw_join_sql( $tq_sql['join'] );
// Queue the WP_Tax_Query WHERE which already has our alias.
$mod->raw_where_sql( '1=1 ' . $tq_sql['where'] );
} else {
// There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already
// exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod
// will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query.
$mod->set_local_table( $wpdb->posts );
$mod->on( 'ID', [ 'column' => 'id' ] );
$mod->raw_where_sql( function( $runtime ) use ( $tax_query ) {
$tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' );
return '1=1 ' . $tq_sql['where'];
} );
}
$mods[] = $mod;
return $mods;
}, 20, 2 );
view raw searchwp-customizations.php hosted with ❤ by GitHub

Este fragmento verifica que se haya elegido un valor no vacío del desplegable. Si es así, nuestro Mod se crea y se agrega a la Query.

Modifique el formulario de búsqueda predeterminado para incluir un menú desplegable de categorías

WordPress nos permite filtrar el formulario de búsqueda predeterminado que se encuentra en muchos temas. Se genera mediante una llamada a get_search_form(), que se puede personalizar completamente incluyendo un archivo llamado searchform.php en el directorio de tu tema, o a través del filtro get_search_form. Para este ejemplo, utilizaremos el filtro get_search_form. Para usar este filtro, trabajarás en el archivo functions.php de tu tema.

Para incluir un menú desplegable de Categorías en el formulario de búsqueda predeterminado de tu sitio, usa el siguiente fragmento:

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// adds a Categories dropdown to the search form
function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
ob_start(); ?>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search For</span>
<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
</label>
<?php
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
?>
<input type="submit" class="search-submit" value="Search" />
</form>
<?php return ob_get_clean();
}
add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' );
view raw searchwp-customizations.php hosted with ❤ by GitHub

El código del formulario utilizado aquí se basa en el formulario de búsqueda predeterminado que viene con WordPress. Existe la posibilidad de que tu tema haya personalizado previamente el formulario y tú simplemente quieras añadirle el menú desplegable. Puedes modificar el código del formulario para que coincida con lo que venía con tu tema y añadir las líneas 11-18 de esa muestra de código donde quieras que aparezca tu menú desplegable de Categorías.

Este fragmento solo modifica el formulario de búsqueda, todavía necesitamos capturar el valor del menú desplegable e indicarle a SearchWP que limite los resultados a una Categoría específica.

Para ello, vamos a utilizar un Mod. Vamos a utilizar el ID de la categoría enviado en el desplegable para limitar nuestro conjunto de resultados de búsqueda a la categoría elegida.

Nota: observe que la variable que buscamos era la que usamos para establecer el name del select que fue generado por wp_dropdown_categories()

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// Limit SearchWP results to chosen Category from dropdown.
// @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/
add_filter( 'searchwp\query\mods', function( $mods, $query ) {
global $wpdb;
// Only proceed if a Category was chosen from the dropdown.
if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) {
return $mods;
}
// Optional: only proceed if we're using a specific Engine.
// if ( 'default' !== $query->get_engine()->get_name() ) {
// return $mods;
// }
$alias = 'swpkbcat';
$tax_query = new WP_Tax_Query( [ [
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => absint( $_GET['swp_category_limiter'] ),
] ] );
$tq_sql = $tax_query->get_sql( $alias, 'ID' );
$mod = new \SearchWP\Mod();
// If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that.
if ( ! empty( $tq_sql['join'] ) ) {
// Queue the assumed wp_posts JOIN using our alias.
$mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) {
return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id";
} );
// Queue the WP_Tax_Query JOIN which already has our alias.
$mod->raw_join_sql( $tq_sql['join'] );
// Queue the WP_Tax_Query WHERE which already has our alias.
$mod->raw_where_sql( '1=1 ' . $tq_sql['where'] );
} else {
// There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already
// exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod
// will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query.
$mod->set_local_table( $wpdb->posts );
$mod->on( 'ID', [ 'column' => 'id' ] );
$mod->raw_where_sql( function( $runtime ) use ( $tax_query ) {
$tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' );
return '1=1 ' . $tq_sql['where'];
} );
}
$mods[] = $mod;
return $mods;
}, 20, 2 );
view raw searchwp-customizations.php hosted with ❤ by GitHub

Este fragmento verifica que se haya elegido un valor no vacío del desplegable. Si es así, nuestro Mod se crea y se agrega a la Query.

Cree hoy mismo una mejor experiencia de búsqueda en WordPress

No vuelva a perder visitantes por resultados de búsqueda inútiles. SearchWP facilita la creación de su propia búsqueda inteligente en WordPress.

Get SearchWP Now
Icono de múltiples motores de búsqueda