web-dev-qa-db-fra.com

Filtrer les catégories de messages avec des cases à cocher

Bonjour les gars, j'essaye de créer des options de filtrage simples pour mon projet WordPress. Je veux le faire avec des cases à cocher. Cela ressemble à ceci:

 enter image description here 

C'est le code pour les cases à cocher:

<div class="categories">
    <?php
        $cat_count_web = get_category( '8' );
        $cat_count_marketing = get_category( '3' );
        $cat_count_uncatagorized = get_category( '1');
    ?>
    <h3 title="<?php echo $cat_count_web->count; ?>">
        <?php echo $cat_count_web->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="uxWebChb" id="uxWebChb">
        <label for="uxWebChb">UX WEB TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_marketing->count; ?>">
        <?php echo $cat_count_marketing->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="marketingChb" id="marketingChb">
        <label for="marketingChb">MARKETING TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_uncatagorized->count; ?>">
        <?php echo $cat_count_uncatagorized->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="outherChb" id="outherChb">
        <label for="outherChb">OTHER TACTICS</label>
    </div>
</div>

J'utilise un type de message personnalisé pour afficher les messages sur cette page. Ceci est mon code pour afficher les messages:

<div class="vb-posts clearfix">
    <?php
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $args = array(
            'post_type' => 'html5-blank',
            'posts_per_page' => 5,
            'paged' => $paged
        );
    ?>
    <?php $loop = new WP_Query( $args ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="col-md-3 col-md-offset-1">
        <div class="featured-img featured-img-small" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"></div>
    </div>
    <div class="col-md-1 post-num">
        <h3>01</h3>
    </div>
    <div class="col-md-1">
        <hr class="dark-line" />
    </div>
    <div class="col-md-5">
        <a class="post-headline text-uppercase" href="<?php the_permalink() ?>">
            <h4 class="post-headline text-uppercase"><?php the_title() ?></h4>
        </a>
        <div class="post-body-short">
            <p><?php the_excerpt(); ?></p>
        </div>
        <div class="subject">
            <p>
                <?php foreach ((get_the_category()) as $category) {
                    echo $category->cat_name . ' ';
                } ?>
            </p>
        </div><div class="tags">
            <p>
                <?php
                    $posttags = get_the_tags();
                    if ($posttags) {
                        foreach($posttags as $tag) {
                            echo $tag->name . ', ';
                        }
                    }
                ?>
            </p>
        </div>
    </div>
    <?php endwhile; ?>

    <?php if ($loop->max_num_pages > 1) { // check if the max number of pages is greater than 1
        $nextUrl = get_next_posts_page_link();
        $prevUrl = get_previous_posts_page_link();
    ?>
    <div class="paginations clearfix">
        <ul class="pagination">
            <li><a href="<?php echo esc_url( $prevUrl ); ?>"><span class="icon-left_arrow"></span></a></li>
            <!-- pagination here -->
            <?php
              if (function_exists(custom_pagination)) {
                custom_pagination($loop->max_num_pages,"",$paged);
              }
            ?>
            <li><a href="<?php echo esc_url( $nextUrl ); ?>"><span class="icon-right_arrow"></span></a></li>
        </ul>
    </div>
    <?php } ?>
</div>

J'ai lu sur le sujet de la création de filtres dans WordPress, mais rien de ce que j'ai trouvé ne m'a aidé. J'ai trouvé ceci dans le codex WordPress, mais je ne pouvais pas le faire fonctionner https://codex.wordpress.org/Function_Reference/wp_category_checklist .
Existe-t-il un moyen de faire en sorte que ma requête personnalisée fonctionne avec ces cases à cocher, de sorte que lorsque l'utilisateur sélectionne ou désélectionne certaines de mes modifications de requête personnalisées, il ne prend que les publications de ces catégories?

custom-post-typesfunctionscategoriesfiltersjquery
1
Zvezdas1989

J'ai pu résoudre ce problème en utilisant Ajax.
J'ai d'abord modifié mes arguments de requête:

$args = array(
  'post_type' => 'html5-blank',
  'posts_per_page' => 5,
  'paged' => $paged,
  'category_name' => get_query_var('category_name')
);

Ensuite, j'ai créé un modèle où mon contenu changerait en l'injectant avec Ajax comme ceci:

var $vbPosts = $('#vb-posts');
var videoCats  = {
    'ux-web-tactics': true,
    'marketing-tactic': true,
    'other-tactics': true,
};

$('#video-checkboxes').on('change', 'input:checkbox', function() {
    var cat = $(this).data('category'); // ux-web-tactics
    videoCats[cat] = this.checked;
    var lookupCategories = [];
    for (key in videoCats) {
        if (videoCats[key] === true) {
            lookupCategories.Push(key);
        }
    }

    // This doesnt allow for checkboxes to be turned off
    if (lookupCategories.length === 0) {
        this.checked = true;
        return;
    }
    $vbPosts.load('video-checkboxes/?category_name=' + lookupCategories.join(','));
});
1
Zvezdas1989