WordPress |帖子查询 |查询帖子类别以创建子类别过滤器并将其应用于我的函数文件中的 Ajax 过滤器

Posted

技术标签:

【中文标题】WordPress |帖子查询 |查询帖子类别以创建子类别过滤器并将其应用于我的函数文件中的 Ajax 过滤器【英文标题】:WordPress | Post Query | Query on post categories to create sub-category filter and applying it to an Ajax filter in my function file 【发布时间】:2019-07-26 23:39:29 【问题描述】:

我正在努力让我的投资组合页面的过滤器正常工作。我对 WordPress 有很好的了解,但似乎无法...

目标:

创建一个过滤器,其中仅包含属于指定类别的子类别的类别。

使用子类别过滤器中的选定选项将所选过滤器的相关帖子 Ajax 显示。

所以上相关代码:

我的投资组合页面成功从我的投资组合类别中提取帖子:

<div class="portfolio-filters">

    <?php
    $filtercategory = get_template_directory() . "/template-parts/category-filter.php";
    include_once($filtercategory);
    ?>

</div>

<div class="portfolio-pieces">

    <div class="portfolio-pieces-inner">

        <div id="response">

            <!-- DEFAULT PORTFOLIO PAGE DISPLAY -->
            <?php
            $args = array(
                'post_type' => 'post',
                'post_status' => 'publish',
                'category_name' => 'portfolio',
                'posts_per_page' => '-1',
                'orderby' => 'post_date',
                'order' => 'DESC'
            ); ?>

            <?php $the_query = new WP_Query( $args ); ?>

            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

                <div class="portfolio-piece" <?php if(has_post_thumbnail()) : ?>style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);"<?php endif; ?>>
                    <a href="<?php the_permalink(); ?>" class="box-link" target="_blank"></a>

                    <div class="portfolio-piece-hover">

                    </div>

                    <div class="portfolio-piece-inner">
                        <h4><?php the_title(); ?></h4>
                    </div>
                </div>

            <?php
                endwhile;
                wp_reset_postdata();
            ?>

        </div>

    </div>

</div>

在上面的 sn-p 中,我调用了我的过滤器文件。创建响应区域并加载完整的作品集列表。

我的类别过滤器文件如下所示:

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        $args = array(
            'taxonomy' => 'category',
            'category_name' => 'portfolio-category',
            'orderby' => 'name',
            'order' => 'DESC',
            'parent' => 0
        ); 
        if( $terms = get_terms( $args ) ) :
            echo '<select name="categoryfilter"><option>Select category...</option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
        endforeach;
            echo '</select>';
        endif;
    ?>

    <button>Apply filters</button>
    <input type="hidden" name="action" value="customfilter">
</form>

<script>
    jQuery(function($) 
        $('#filter').submit(function()
            var filter = $('#filter');
            $.ajax(
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr)
                    filter.find('button').text('Applying Filters...');
                ,
                success:function(data)
                    filter.find('button').text('Apply filters');
                    $('#response').html(data);
                
            );
            return false;
        );
    );
</script>

上面的 sn-p 正在“尝试”创建一个表单,其操作指向我的 wp-admin 文件夹中的 admin-ajax.php 文件(它在那里)。

然后循环通过我的 get_terms 参数以将我希望的子类别显示到一个下拉列表中,并带有一个应用按钮。

最后一个 sn-p 处理这一切。根据按钮的状态更改按钮的文本,并将我的响应 div 作为返回位置。

我的函数文件是这样的:

/* Filter Post Results */
function catfilter_filter_function()
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC or DESC
    );

    // for taxonomies / categories
    if( isset( $_POST['categoryfilter'] ) )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();

            echo "<div class=\"portfolio-piece\" style=\"background-image: url(" . get_the_post_thumbnail_url() . ");\">";

                echo "<a href=\"" . the_permalink() . "\" class=\"box-link\" target=\"_blank\"></a>";

                echo "<div class=\"portfolio-piece-hover\">";

                echo "</div>";

                echo "<div class=\"portfolio-piece-inner\">";

                    echo "<h4>" . the_title() . "</h4>";

                echo "</div>";

            echo "</div>";

        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();

add_action('wp_ajax_customfilter', 'catfilter_filter_function');
add_action('wp_ajax_nopriv_customfilter', 'catfilter_filter_function');
/* END Filter Post Results */

函数文件脚本的作用是将过滤器中所述的帖子拉过。

有人可以帮我缩小类别过滤器的范围,只包含相关的子类别吗? - 它们是具有 slug 'portfolio-category' 的 'Portfolio Categories' 类别的子类别

我可以显示完整的类别列表,或者只显示基本父类别,而不是子类别...

我的分类是这样设置的:

— Portfolio Piece

— — Portfolio Category

— — — Automation

— — — Design

— — — Digital

— — — Exhibitions

— — — PR / Social

— — — Strategy

— — — Tech Insights

— — Sector

— — — Construction

— — — Manufacturing

— — — Oil & Gas

— — — Science

我在不同的文章中尝试了 50 多次,这不是开玩笑,而且我一辈子都无法缩小这个列表。

提前非常感谢!

【问题讨论】:

【参考方案1】:

您可以使用以下命令指定 get_terms 应为其迭代的父级:

parent => cat_ID

其中 cat_ID 是类别的 ID。

您可以通过将鼠标悬停在类别列表中的类别链接上找到类别 ID,然后在浏览器左下方的链接注释中查看您将被定向到的 URL。

【讨论】:

以上是关于WordPress |帖子查询 |查询帖子类别以创建子类别过滤器并将其应用于我的函数文件中的 Ajax 过滤器的主要内容,如果未能解决你的问题,请参考以下文章

PHP 查询按类别获取帖子 - Wordpress

使用Twig和WordPress查询类别帖子

如何优化我的查询?使用类别和标签列表导出 Wordpress 帖子

按类别查询获取帖子-Wordpress

手动检索带有 JSON 类别/标签的 Wordpress 帖子

获取Wordpress查询中的所有类别,自定义字段值?