将引导轮播与 WordPress 中的复选框相结合答案

【问题标题】：Combining boostrap carousel with checkboxes in WordPress将引导轮播与 WordPress 中的复选框相结合
【发布时间】：2017-08-27 08:07:24
【问题描述】：

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

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

<div class="col-md-7 col-md-offset-4 main-content">
    <div class="checkbox">
      <label class="checkbox-inline">
        <input type="checkbox" name="allRadios" id="allRadios" value="all">
        all
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="frontendRadios" id="frontendRadios" value="frontend" checked>
        front end
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="wordpressRadios" id="wordpressRadios" value="wordpress" checked>
        wordpress
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="designRadios" id="designRadios" value="design" checked>
        design
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="seoRadios" id="seoRadios" value="seo" checked>
        seo
      </label>
    </div>
</div>

<!-- Here starts carousel loop -->
<?php $carauselLoop = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => -1, 'category_name' => 'testing' ) ); ?>
<?php $i=1; ?>
<div class="col-md-4 our-work-info">
    <div class="clients-num">
        <h5 title="01">01</h5>
    </div>
    <span class="glyphicon glyphicon-link"></span>
    <h3>Crossroads</h3>
    <h4 class="sub-heading">front end / wordpress</h4>
</div>

<div class="col-md-7">

    <div id="our-work-carousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <?php while ( $carauselLoop->have_posts() ) : $carauselLoop->the_post(); ?>
                <div class="item <?php if ($i == 1) echo 'active'; ?>">
                    <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; wp_reset_query(); ?>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators our-work-indicators">
        <li data-target="#our-work-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#our-work-carousel" data-slide-to="1"></li>
        <li data-target="#our-work-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Controls -->
    <a class="left carousel-control" href="#our-work-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#our-work-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

有没有办法实现这一点，我应该如何处理它？

【问题讨论】：

标签： php jquery wordpress twitter-bootstrap

【解决方案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

对于复选框的值，请确保输出类别 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.

【讨论】：

谢谢你，我会努力实现你写的东西，如果我卡在某个地方，可能会在 cmets 中问你其他问题。

【解决方案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');
});

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

【讨论】：