ajax - 如何创建 Ajax 过滤器以在 WordPress 中显示自定义帖子类型

Question

我之前问过这个主题的问题，但由于这似乎只需要自定义编码，我需要专家的帮助。我不是编码员，我在 Webflow 中设计和构建网站，但想学习将它们转换为 WordPress 主题。

我有一个自定义帖子类型并希望在页面上显示所有这些帖子，但是，在显示的帖子上方我想要一个过滤器，以便用户可以单击一个类别并且只看到该类别的自定义帖子（无需重新加载页面）。

我注册了一个自定义分类并为此添加了类别。我在很多网站上都看到了这个，这似乎是一个非常普遍的事情，这就是为什么我很惊讶没有插件可以实现这一点。但无论如何，这是我想要实现的一个例子：https ://www.hauserlacour.de/en/work

我知道它与自定义查询和 AJAX 有关。但我找不到适合初学者的教程来实现我所需要的。

任何人都可以帮助我使用下面的代码以及将我的自定义分类法转换为过滤器需要什么？

这是我现在拥有的代码：

<?php get_header( 'page-posttest' ); ?>

<div class="projekte-wrapper-1">
    <?php $terms = get_terms( array(
            'taxonomy' => 'art',
            'orderby' => 'name',
            'order' => 'ASC',
            'hide_empty' => false
    ) ) ?>


    <?php if( !empty( $terms ) ) : ?>

        <div class="taxonomy-wrapper">
            <?php foreach( $terms as $term ) : ?>
                <a href="<?php echo esc_url( get_term_link( $term ) ); ?>" class="link" rel="tag"><?php echo $term->name; ?></a>
            <?php endforeach; ?>
        </div>


    <?php endif; ?>

    <?php
        $projekte_query_args = array(
            'post_type' => 'projekte',
            'nopaging' => true,
            'order' => 'ASC',
            'orderby' => 'date'
        )
    ?>


    <?php $projekte_query = new WP_Query( $projekte_query_args ); ?>


    <?php if ( $projekte_query->have_posts() ) : ?>
        <div class="posts-wrapper">
            <?php while ( $projekte_query->have_posts() ) : $projekte_query->the_post(); ?>
                <?php PG_Helper::rememberShownPost(); ?>
                <?php $image_attributes = !empty( get_the_ID() ) ? wp_get_attachment_image_src( PG_Image::isPostImage() ? get_the_ID() : get_post_thumbnail_id( get_the_ID() ), 'full' ) : null; ?>
                <a href="<?php echo esc_url( get_permalink() ); ?>" class="post w-inline-block" style="<?php if($image_attributes) echo 'background-image:url(\''.$image_attributes[0].'\')' ?>" id="post-<?php the_ID(); ?>"> <h1 class="heading-14"><?php the_title(); ?></h1> </a>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    <?php else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'test' ); ?></p>
    <?php endif; ?>
</div>

<?php get_footer( 'page-posttest' ); ?>

标签： ajaxwordpressfiltercustom-taxonomy