Get SearchWP
SearchWP Documentation

Veja o guia de instalação, navegue pela Base de Conhecimento, descubra os muitos hooks do SearchWP

Adicionar uma caixa suspensa de seleção de categoria ao formulário de pesquisa

Uma das maneiras mais populares de integrar a pesquisa é permitir que os visitantes controlem o conjunto de resultados por conta própria. Isso geralmente vem na forma de permitir que eles escolham uma Categoria específica em um menu suspenso (caixa de seleção) para acompanhar sua pesquisa.

Este artigo explicará como você pode realizar três abordagens diferentes para adicionar um menu suspenso de Categorias ao seu formulário de pesquisa.

  1. Crie seu próprio formulário de pesquisa com um menu suspenso de Categorias
  2. Personalize a Extensão de Shortcodes para incluir um menu suspenso de Categorias
  3. Personalize o formulário de pesquisa padrão para incluir um menu suspenso de seleção de Categorias

Construindo seu próprio formulário de pesquisa

Construir seu próprio formulário de pesquisa envolve editar os arquivos do seu tema para incluir os campos de entrada e botões que queremos incluir. No nível mais básico, você pode adicionar o seguinte ao arquivo de modelo do seu tema onde você gostaria que o formulário aparecesse:

<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

Com base no formulário de pesquisa padrão fornecido pelo WordPress, este formulário gera um campo para a consulta de pesquisa, uma caixa de seleção contendo todas as suas Categorias e um botão para acionar a pesquisa. Observe os argumentos passados para wp_dropdown_categories() que definem o rótulo 'Qualquer Categoria' e definem o name do menu suspenso como swp_category_limiter.

Com seu formulário no lugar, o último passo é dizer ao SearchWP para levar em consideração o valor do menu suspenso enviado ao realizar pesquisas. Para fazer isso, vamos usar um Mod. Vamos usar o ID da categoria enviado no menu suspenso para limitar nosso conjunto de resultados de pesquisa à categoria escolhida.

Observação: note que a variável que estamos procurando foi aquela que usamos para definir o name do select que foi gerado 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 trecho verifica se um valor não vazio foi escolhido no menu suspenso. Se sim, nosso Mod é construído e adicionado à Query.

Use a Extensão de Shortcodes do SearchWP

A Extensão de Shortcodes do SearchWP permite que você gere facilmente formulários de pesquisa e controle páginas de resultados de pesquisa usando Shortcodes do WordPress. Aqui está um exemplo de formulário de pesquisa que inclui um menu suspenso de Categorias para escolher:

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

Isso cuida do nosso formulário de pesquisa, ele incluirá automaticamente um menu suspenso de nossas Categorias entre o campo de pesquisa e o botão de envio. Observe que neste trecho personalizamos o name do menu suspenso para ser swp_category_limiter, que usaremos a seguir.

Até agora, configuramos apenas o formulário para gerar um menu suspenso que permitirá ao visitante definir uma categoria para restrição de resultados, ainda precisamos capturar essas informações quando o formulário for enviado e informar o SearchWP sobre isso.

Para fazer isso, vamos usar um Mod. Vamos usar o ID da categoria enviado no menu suspenso para limitar nosso conjunto de resultados de pesquisa à categoria escolhida.

Observação: note que a variável que estamos procurando foi aquela que usamos para definir o name do select que foi gerado 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 trecho verifica se um valor não vazio foi escolhido no menu suspenso. Se sim, nosso Mod é construído e adicionado à Query.

Modifique o formulário de pesquisa padrão para incluir um menu suspenso de Categorias

O WordPress nos permite filtrar o formulário de pesquisa padrão encontrado em muitos temas. Ele é gerado por uma chamada a get_search_form() que pode ser completamente personalizada, seja incluindo um arquivo chamado searchform.php no diretório do seu tema, ou através do filtro get_search_form. Para este exemplo, usaremos o filtro get_search_form. Para usar este filtro, você trabalhará no arquivo functions.php do seu tema.

Para incluir um menu suspenso de Categorias no formulário de pesquisa padrão do seu site, use o seguinte trecho de código:

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

O código do formulário usado aqui é baseado no formulário de pesquisa padrão que vem com o WordPress. Existe a chance de seu tema ter personalizado o formulário anteriormente, e você simplesmente deseja adicionar o menu suspenso a ele. Você pode simplesmente modificar o código do formulário para corresponder ao que veio com seu tema e adicionar as linhas 11-18 dessa amostra de código onde você deseja que seu menu suspenso de Categorias apareça.

Este trecho de código apenas modifica o formulário de pesquisa, ainda precisamos capturar o valor do menu suspenso e dizer ao SearchWP para limitar os resultados a uma Categoria específica.

Para fazer isso, vamos usar um Mod. Vamos usar o ID da categoria enviado no menu suspenso para limitar nosso conjunto de resultados de pesquisa à categoria escolhida.

Observação: note que a variável que estamos procurando foi aquela que usamos para definir o name do select que foi gerado 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 trecho verifica se um valor não vazio foi escolhido no menu suspenso. Se sim, nosso Mod é construído e adicionado à Query.

Crie uma Experiência de Pesquisa WordPress Melhor Hoje

Nunca mais perca visitantes para resultados de pesquisa inúteis. O SearchWP torna a criação de sua própria pesquisa inteligente do WordPress rápida e fácil.

Get SearchWP Now
Ícone de Múltiplos Mecanismos de Busca