在1页中按类别显示post-WordPress开发

我已经创建了自定义post类型, 并且在存档页面中显示了post的内容, 但我想在1个页面中按不同类别显示post。像这样：

但是我的post目前是这样的

我该如何实现？我进行了很多搜索, 但没有找到解决方案。所以, 这就是为什么我在这里提出问题。这是我的代码：

<section class="careerBlogs">
    <div class="container">
        <div class="row with-gutters">
                <?php


                    $args = array (
                        'post_type'    => array( 'career' ), 'post_status'  => array( 'publish' ), 'nopaging'     => true, 'order'        => 'ASC', 'orderby'      => 'menu_order', );

                    $templates = new WP_Query( $args );

                    if ( $templates->have_posts() ) {
                        while ( $templates->have_posts() ) {
                                $templates->the_post(); global $post;

                        $customVars = get_post_meta($post->ID, 'custom_vars', true);
                        if(!empty($customVars)){
                            $isRemotely = $customVars['remotely'];
                        }

                        // Categories
                        $categories = get_the_terms( $post->ID, 'career_category' );
                        foreach( $categories as $category ) { ?>
                            <div class="col-xs-12">
                                <div class="careerBlogs--title">Open Positions in <?= $category->name; ?></div>
                            </div>
                        <?php } ?>

                        <div class="col-xl-12">
                            <div class="card mb-4">
                                <a href="<?= get_the_permalink(); ?>" class="card-link">
                                    <div class="card-info">
                                        <div class="card-title"><?= get_the_title(); ?></div>
                                        <div class="location">
                                            <span>Lahore</span>/<span><?= $isRemotely ? 'Remote' : '' ?></span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                    <?php  } } else {
                        echo 'no posts to show';
                    }

                    wp_reset_postdata();

                ?>
        </div>
    </div>
</section>

它在我的archive-career.php页面中。你能帮我实现这个目标吗？我被困在这里

#1

经过很多努力后, 我已经解决了这个问题：

<?php
        // I get my Categories
        $categories = get_terms('career_category' );
        $currentCatName = '';
        foreach( $categories as $category ) {  ?>

        <div class="row with-gutters">
            <div class="col-xs-12">
                <!-- Assiging category name -->
                <div class="careerBlogs--title">Open Positions in <?= $category->name; ?></div>
            </div>


    <?php

    $args = array (
        'post_type'    => array( 'career' ), 'post_status'  => array( 'publish' ), // here with 'tax_query' i solved my problem to show posts 
        // by categories (not to show double category names)
        'tax_query' => array(
            array(
                'taxonomy' => 'career_category', 'field'    => 'slug', 'terms'    => $category->slug, ), ), );

    $templates = new WP_Query( $args );

    if ( $templates->have_posts() ) {
        while ( $templates->have_posts() ) {
            $templates->the_post(); global $post;

        ?>

        <div class="col-xl-12">
            <div class="card mb-4">
                <a href="<?= get_the_permalink(); ?>" class="card-link">
                    <div class="card-info">
                        <div class="card-title"><?= get_the_title(); ?></div>
                        <div class="location">
                            <span>Lahore</span>/<span>Remote</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

    <?php  } } else {
        echo 'no posts to show';
    } ?> 
    </div> 
    <?php }

    wp_reset_postdata();

?>

看到：