Get SearchWP
SearchWP Documentation

Consultez le guide d’installation, parcourez la base de connaissances, découvrez les nombreux hooks de SearchWP

Ajouter une boîte déroulante de sélection de catégorie au formulaire de recherche

L'une des façons les plus populaires d'intégrer la recherche est de permettre aux visiteurs de contrôler eux-mêmes le pool de résultats. Cela se présente généralement sous la forme de leur permettre de choisir une catégorie spécifique dans une liste déroulante (boîte de sélection) pour accompagner leur recherche.

Cet article expliquera comment vous pouvez réaliser trois approches différentes pour ajouter une liste déroulante de catégories à votre formulaire de recherche.

  1. Créez votre propre formulaire de recherche avec une liste déroulante de catégories
  2. Personnalisez l'extension Shortcodes pour inclure une liste déroulante de catégories
  3. Personnalisez le formulaire de recherche par défaut pour inclure une liste déroulante de sélection de catégories

Créer votre propre formulaire de recherche

La création de votre propre formulaire de recherche implique la modification des fichiers de votre thème pour inclure les champs de saisie et les boutons que nous voulons inclure. Au niveau le plus élémentaire, vous pouvez ajouter ce qui suit au fichier de modèle de votre thème où vous souhaitez que le formulaire apparaisse :

<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

Basé sur le formulaire de recherche par défaut fourni par WordPress, ce formulaire affiche un champ pour la requête de recherche, une boîte de sélection contenant toutes vos catégories, et un bouton pour déclencher la recherche. Notez les arguments passés à wp_dropdown_categories() qui définissent le libellé « Toutes les catégories » et définissent le name de la liste déroulante comme swp_category_limiter.

Avec votre formulaire en place, la dernière étape consiste à dire à SearchWP de prendre en compte la valeur soumise de la liste déroulante lors de l'exécution des recherches. Pour ce faire, nous allons utiliser un Mod. Nous allons utiliser l'ID de catégorie soumis dans la liste déroulante pour limiter notre pool de résultats de recherche à la catégorie choisie.

Note : remarquez que la variable que nous recherchons était celle que nous avons utilisée pour définir le name de la select qui a été générée par 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

Ce extrait vérifie qu'une valeur non vide a été choisie dans la liste déroulante. Si c'est le cas, notre Mod est construit et ajouté à la Query.

Utilisez l'extension de shortcodes de SearchWP

L' extension de shortcodes de SearchWP vous permet de générer facilement des formulaires de recherche et de contrôler les pages de résultats de recherche à l'aide de shortcodes WordPress. Voici un exemple de formulaire de recherche qui inclut une liste déroulante de catégories parmi lesquelles choisir :

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

Cela s'occupe de notre formulaire de recherche, il inclura automatiquement une liste déroulante de nos catégories entre le champ de recherche et le bouton de soumission. Notez que dans cet extrait, nous avons personnalisé le name de la liste déroulante pour qu'il soit swp_category_limiter, que nous utiliserons ensuite.

Jusqu'à présent, nous avons seulement configuré le formulaire pour qu'il affiche une liste déroulante qui permettra au visiteur de définir une catégorie pour restreindre les résultats, nous devons encore récupérer ces informations lorsque le formulaire est soumis et en informer SearchWP.

Pour ce faire, nous allons utiliser un Mod. Nous allons utiliser l'ID de catégorie soumis dans la liste déroulante pour limiter notre pool de résultats de recherche à la catégorie choisie.

Note : remarquez que la variable que nous recherchons était celle que nous avons utilisée pour définir le name de la select qui a été générée par 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

Ce extrait vérifie qu'une valeur non vide a été choisie dans la liste déroulante. Si c'est le cas, notre Mod est construit et ajouté à la Query.

Modifier le formulaire de recherche par défaut pour inclure une liste déroulante de catégories

WordPress nous permet de filtrer le formulaire de recherche par défaut trouvé dans de nombreux thèmes. Il est généré par un appel à get_search_form() qui peut être entièrement personnalisé soit en incluant un fichier nommé searchform.php dans votre répertoire de thème, soit via le filtre get_search_form. Pour cet exemple, nous utiliserons le filtre get_search_form. Pour utiliser ce filtre, vous travaillerez dans le fichier functions.php de votre thème.

Pour inclure une liste déroulante de catégories dans le formulaire de recherche par défaut de votre site, utilisez l'extrait suivant :

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

Le code du formulaire utilisé ici est basé sur le formulaire de recherche par défaut fourni avec WordPress. Il est possible que votre thème ait précédemment personnalisé le formulaire et que vous souhaitiez simplement y ajouter la liste déroulante. Vous pouvez simplement modifier le code du formulaire pour qu'il corresponde à celui fourni avec votre thème et ajouter les lignes 11-18 de cet exemple de code là où vous souhaitez que votre liste déroulante de catégories apparaisse.

Cet extrait ne modifie que le formulaire de recherche, nous devons toujours capturer la valeur de la liste déroulante et indiquer à SearchWP de limiter les résultats à une catégorie spécifique.

Pour ce faire, nous allons utiliser un Mod. Nous allons utiliser l'ID de catégorie soumis dans la liste déroulante pour limiter notre pool de résultats de recherche à la catégorie choisie.

Note : remarquez que la variable que nous recherchons était celle que nous avons utilisée pour définir le name de la select qui a été générée par 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

Ce extrait vérifie qu'une valeur non vide a été choisie dans la liste déroulante. Si c'est le cas, notre Mod est construit et ajouté à la Query.

Créez dès aujourd'hui une meilleure expérience de recherche WordPress

Ne perdez plus jamais de visiteurs à cause de résultats de recherche inutiles. SearchWP rend la création de votre propre recherche WordPress intelligente rapide et facile.

Get SearchWP Now
Icône de moteurs de recherche multiples