Question

大家好我正在我的WordPress项目中实现bootstrap carousel。我使用复选框列出我的类别，它看起来像这样：

我希望用户能够根据他们选择的类别更改我的轮播内容基本上我需要根据用户选择的复选框来更改我的查询。我的查询需要根据用户选择的类别进行更改，例如类似于＆＃39; category_name＆＃39; =＆GT; ＆＃39; test1，test2＆＃39;
这是我的代码：

  packages=['scenario',
            'scenario.player',
            'scenario.parser',
            'scenario.tests'],

有没有办法实现这一目标，我该如何处理？

Answer 1

在PHP中执行此操作意味着为每个复选框单击执行页面重新加载，这通常不是您想要的。您浪费了大量用户的时间并在服务器上施加了不必要的负担。话虽这么说，你想要做的是公开一个自定义查询参数，然后将其传递给查询帖子的函数。

因此，您要向functions.php添加类似的内容：

public function add_query_vars($vars) {
  $vars[] = 'carousel_cat';
  return $vars;
}
add_filter('query_vars', 'add_query_vars');

然后，无论您在何处运行查询，首先都要从URL中获取查询参数：

$carousel_categories = get_query_var('carousel_cat', false) ?: '1,2'; // '1,2' are defaults
// Let's assume the URL is /?carousel_cat=12,43 then $carousel_categories = '12,43'

并将其传递给您的查询：

// The numbers should be category IDs because then you can pass them directly to the query:
$carauselLoop = new WP_Query(['cat' => $carousel_categories]);
// But you might wanna do some kind of sanitation on that so that ti doesn't error out

对于复选框＆＃39;值确保输出类别ID。此外，不要对它们进行硬编码，而是循环使用类别：

<?php
  $available_categories = get_categories();
  foreach($available_categories as $cat):
?>
  <label><input type="checkbox" value="<?= $cat->term_id; ?>"> <?= esc_html($cat->name); ?></label>
<?php endforeach; ?>

你仍然需要某种JS逻辑来监听输入上的onchange事件，并设置正确的URL，例如http://yoursite.tld/?carousel_cat=12。

Answer 2

我决定采取不同的方法来解决这个问题。我的想法是加载来自不同类别的所有帖子并给他们CSS类，然后根据用户选择的复选框显示或不显示。这是我的HTML：

    <div class="carousel-inner" role="listbox">
    <?php while ( $carouselLoop->have_posts() ) : ?>
        <?php $carouselLoop->the_post(); ?>
        <?php
            $categories = get_the_category();
            $cat = '';
            if ( ! empty( $categories ) ) {
                $cat = esc_html( $categories[0]->name );
            }
        ?>
        <div
            class="cat-all cat-<?= strtolower($cat) ?> item <?php if ($i == 1) echo 'active'; ?>"
            data-title="<?php the_title() ?>"
            data-category="<?= strtolower($cat) ?>"
        >
            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="<?php the_title(); ?>">
            <div class="carousel-caption">
                <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
            </div>
        </div>
        <?php $i++; ?>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>

这是我的JQ：

    var checkedCategories = {
    frontend: false,
    testing: false,
    uncategorized: false,
    wordpress: false,
    design: false,
    seo: false,
};

function checkedKeys() {
    return Object.keys(checkedCategories).filter(function(key) {
        return checkedCategories[key];
    });
}

function toggleAll() {
    Object.keys(checkedCategories).forEach(function(key) {
        checkedCategories[key] = false;
        $('#' + key + 'Chb').attr('checked', false);
    });
    $('.cat-all').addClass('item').removeClass('hidden');
    $('.cat-all').eq(0).addClass('active');

    $('#allChb').attr({
        disabled: true,
        checked: true
    });
}

$('#category-checkboxes').on('change', 'input:checkbox', function(e) {
    var $chb = $(this);
    var category = $chb.data('category');

    $('.cat-all').removeClass('active');

    if (category == 'all') {
        if (this.checked) {
            toggleAll();
            return;
        } else {
            $(this).attr('disabled', true);
        }
    }

    $('.cat-all').removeClass('item').addClass('hidden');

    if (this.checked) {
        $('#allChb').attr({
            disabled: false,
            checked: false
        });
    }

    var $catItems = $('.cat-' + category);
    checkedCategories[category] = this.checked;

    var categories = checkedKeys();
    if (categories.length === 0) {
        toggleAll();
        return;
    }

    categories.forEach(function(cat) {
        var checked = checkedCategories[cat];
        var $catItems = $('.cat-' + cat);
        $catItems.addClass('item');
        $catItems.removeClass('hidden');
    });

    $('.cat-all.item').eq(0).addClass('active');
});

如果有人遇到类似的问题，我希望这会对他有所帮助。

将boostrap轮播与WordPress中的复选框相结合

2 个答案: