El estado predeterminado de la página es mostrar “la lista de todas las cocinas de todas las categorías” (/?cat=0) con un menú desplegable de categorías generado mediante wp_dropdown_categories() que permite al usuario seleccionar otras categorías.
El caso de uso deseado es:
El usuario selecciona una categoría de una lista desplegable y crea una consulta de búsqueda en el cuadro de búsqueda y ve solo cocinas en esa categoría que contienen el término de búsqueda. el resultado muestra solo el título y lo muestra en otra página, ¿cómo puedo filtrar las cocinas en la misma página?
add_image_size('header-image', 1200, 360, true);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('bootstrap4');
wp_dequeue_style('bootstrap-basic4-main');
wp_enqueue_style('webfont-roboto', get_stylesheet_directory_uri() . '/webfont/roboto/stylesheet.css');
wp_enqueue_style('nelga-bootstrap', get_stylesheet_directory_uri() . '/assets/css/bootstrap.css');
wp_enqueue_style('font-lato', get_stylesheet_directory_uri() . '/assets/fonts/stylesheet.css');
wp_enqueue_script('nelga-block-map', get_stylesheet_directory_uri() . '/block/interactive-map/map.js');
}, 11);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('wpuf-css');
wp_register_style('wpuf-css', WPUF_ASSET_URI . '/css/frontend-forms.css');
});
/*add_filter( 'allowed_block_types_all', function () {
return [
'core/block',
'core/image',
'core/paragraph',
'core/heading',
'core/list',
'core/shortcode',
'nelga/icon-with-text',
'nelga/interactive-map
];
});
*/
add_action('init', function () {
register_block_type(__DIR__ . '/block/icon-with-text');
register_block_type(__DIR__ . '/block/interactive-map');
});
// Scripts for Ajax Filter Search
function my_ajax_filter_search_scripts()
{
wp_localize_script('my_ajax_filter_search', 'ajax_url', admin_url('admin-ajax.php'));
}
// Shortcode: [my_ajax_filter_search]
function my_ajax_filter_search_shortcode(){
my_ajax_filter_search_scripts(); // Added here
ob_start(); ?>
<div id="my-ajax-filter-search" class="filter">
<div class="container p-0">
<form>
<div class="d-inline-flex mb-2 mb-lg-0">
<div class="position-relative first-input">
<svg class="position-absolute" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 9.9999;
}
</style>
<g>
<circle class="st0" cx="21" cy="21" r="20" />
<line class="st0" x1="35" y1="35" x2="41" y2="41" />
<rect x="46.3" y="37.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.9172 50.5006)" class="st1" width="8.5" height="26.9" />
</g>
</svg>
<label class="screen-reader-text" for="s">Search for:</label>
<input value="<?php the_search_query(); ?>" name="s" id="s" class="form-control " placeholder="Diese Kuche such ich ..">
</div>
<?php wp_dropdown_categories( array(
'show_option_all' => 'All Kategorien',
'show_option_none' => '',
'orderby' => 'id',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 0,
'child_of' => 0,
'exclude' => '',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => '',
'id' => 'custom-cat-drop',
'class' => 'form-select',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'option_none_value' => -1,
'value_field' => 'term_id',
'required' => false,
) ); ?>
</div>
<select class="form-select">
<option selected>Ganzer Ort</option>
<option value="action">Ganzer Ort1</option>
<option value="action">Ganzer Ort2</option>
<option value="action"><?php the_field('state'); ?></option>
</select>
</div>
<div class="d-inline-flex mb-2 mb-lg-0 ml-lg-3">
<input type="submit" id="searchsubmit" class="btn" name="submit" value="Jetzt Kuche finden">
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode('my_ajax_filter_search', 'my_ajax_filter_search_shortcode');
add_filter('doing_it_wrong_trigger_error', function () {
return false;
}, 10, 0);
Este es mi plugin personalizado
<?php
$args = array(
'post_type' => 'kitchen',
$postID = get_the_ID()
);
$the_query = new WP_Query($args);
?>
<div class="container">
<div class="row card-kitchens-title">
<h3>Top Küchen</h3>
</div>
<div class="row card-kitchens">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<?php if (get_field('featured', $postID)) : ?>
<div class="col-sm-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price1"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<div class="container">
<div class="row card-kitchens-title">
<h3>Empfohlene Küchen</h3>
</div>
</div>
<div class="container p-0">
<div class="row second-box">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<div class="col-sm-3 cards pb-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
.