簡體   English   中英

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

我正在努力使我的投資組合頁面的過濾器正常工作。 我對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>

在上面的代碼段中,我稱為過濾器文件。 創建響應區域並裝入完整的投資組合清單。

我的類別過濾器文件如下所示:

<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>

上面的代碼片段試圖“嘗試”創建一個表單,該表單的動作指向我的wp-admin文件夾中的admin-ajax.php文件(位於該文件夾中)。

然后循環遍歷我的get_terms args,以應用按鈕將我希望的子類別顯示在一個下拉列表中。

最后一個片段可以處理所有這些。 根據按鈕的狀態更改按鈕的文本,並將響應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 */

函數文件腳本的工作原理將過濾器中列出的帖子通過。

有人可以幫我縮小類別過濾器的范圍,使其僅包含相關的子類別嗎? -它們是“投資組合類別”類別的子類別,其中包含“投資組合類別”

我能夠顯示類別的完整列表,或僅顯示基本父類別,而不是子類別...

我的類別設置如下:

— Portfolio Piece

— — Portfolio Category

— — — Automation

— — — Design

— — — Digital

— — — Exhibitions

— — — PR / Social

— — — Strategy

— — — Tech Insights

— — Sector

— — — Construction

— — — Manufacturing

— — — Oil & Gas

— — — Science

我沒有在不同文章上開玩笑50多次,而且我一生也無法縮小此列表的范圍。

非常感謝!

您可以使用以下命令指定get_terms要為其迭代的父對象:

parent => cat_ID

其中cat_ID是類別的ID。

您可以通過以下方式找到類別ID:將鼠標懸停在類別列表中類別的鏈接上,然后在瀏覽器左下方的鏈接注釋中檢查將要定向到的URL。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM