Разрешить пользователю отображать динамические сообщения в блогах по категориям, используя Ajax - Код отображает всю веб-страницу в результатах Ajax

Question

Я новичок в jQuery и все еще изучаю php.

Цель

Я пытаюсь отобразить сообщения в блоге с некоторыми кнопками категорий, отображаемыми над сообщениями в блоге.Я хотел бы, чтобы кнопки категорий позволяли пользователям фильтровать результаты блога, показанные ниже, при щелчке по событию.Я также хотел бы, чтобы все сообщения в блоге (отсортированные по дате) отображались по умолчанию.

Настройка

Я использую Wordpress 5.1.1.Я поместил «новый WP_Query ();»внутри моего файла functions.php поставил в очередь мой js-файл и загрузил мои категории и html в файл шаблона php (posts.php) --- Стоит отметить, что мой файл шаблона php отображается на странице с помощью шорткода, хотя при упрощении моего кода для устранения неполадок, похоже, не было никаких проблем .---

Проблема

Кажется, мой ajax-запрос работает при нажатии кнопки, однако это не такотображение сообщений.Вместо этого он отображает всю веб-страницу, на которой я сейчас нахожусь, в указанном контейнере.Кроме того, я не уверен, как включить WP_Query, который отображает все сообщения по умолчанию, а затем обновляется при нажатии кнопки.

Вопрос

Чего мне не хватает в моем запросе ajax (файл .js) или в моем файле шаблона, чтобы: 1. Отображать сообщения динамически при нажатии?2. Загружать сообщения по умолчанию при загрузке страницы?

Ссылка

Я смоделировал свой пример из этого учебного примера: https://www.bobz.co/ajax-filter-posts-tag/#comment-28112

Я новичок в jQuery (и Ajax кажетсяпо моей голове, но я пытаюсь понять это) и все еще изучаю php и wordpress.Я боролся с этим пару недель, поэтому любой ваш вклад был бы потрясающим.Большое спасибо за вашу помощь!

Включено в мой файл functions.php

function ajax_filter_posts ( $taxonomy ) { 
     // Verify nonce
    if( !isset( $_POST['post_nonce'] ) || !wp_verify_nonce( $_POST['post_nonce'], 'post_nonce' ) )
    die('Permission denied');

    //Set Taxonomy as variable
    $taxonomy = $_POST['taxonomy'];

    // Build custom query arguments
    $post_query_args = array(
        'post_type' => 'post', // Select entries from custom post type
        'posts_per_page' => 12, // Number of posts to display
        'orderby' => 'date', // Organize Results by date
        'order' => 'ASC',
        'cat' => 'taxonomy',
    );
    //If taxonomy is not set, remove key from array and get all posts
    if( !$taxonomy ) {
    unset( $post_query_args['cat'] );
    }
    // Initiate the custom query
    $post_query = new WP_Query( $post_query_args );
    //Display Query
    if ( $post_query->have_posts() ) : ?>
        <?php while ( $post_query->have_posts() ) : $post_query->the_post(); ?>
            <div class="posts-container" id="post-id-<?php the_id(); ?>">
                <a class ="posts-link" href="<?php the_permalink(); ?>">
                    <div class="blog-content-container">
                        <img class="blog-image" src="<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>" height="225px" width="325px">
                        <div class="blog-block">
                            <h3 class="blog-title"><?php the_title(); ?></h3>
                        </div>
                    </div>
                </a>
            </div>
            <?php endwhile; ?>
    <?php else : ?>
            <p>Sorry, no blog articles to display.</p>
    <?php endif;
    // Reset Postdata: After looping through a nested query, this function restores the $post global to the current post in this query.
    wp_reset_postdata();
}
//Add function to ajax call
add_action('wp_ajax_filter_posts', 'ajax_filter_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_posts');

Включено в мой файл js (ajax-post-filter.js)

jQuery(document).ready(function($) {
    $('.categories').click( function(event) {

        // Prevent defualt action - opening category page
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        // Get category slug from title attirbute
        var selected_taxonomy = $(this).attr('innerText');
                // After user clicks on category, fade out list of posts
                //$('.blog-posts').fadeOut();

                data = {
                        action: 'ajax_filter_posts', // function to execute
                        post_nonce: ajaxpostfilter.post_nonce, // wp_nonce
                        taxonomy: selected_taxonomy, // selected category
                        };

                $.post( ajaxpostfilter.post_ajax_url, data, function(response) {

                        if( response ) {
                                // Display posts on page
                                $('.blog-posts').html( response );
                                // Restore div visibility
                                $('.blog-posts').fadeIn();
                            };
        });
    });
});

Включено в мой файл шаблона php (posts.php)

  <div class="category">
      <h2 class="category-title">Category</h2>
      <div class="category-links">
        <?php $get_categories = get_categories(array(
          'hide_empty' => 0)
        );
          if ( $get_categories ) :
            foreach ( $get_categories as $cat ) :
        ?>
          <a class="categories" href="<?php echo home_url() . '/' . $cat->slug . '/'; ?>">
            <?php echo $cat->name; ?>
          </a>
            <?php endforeach;
            endif;
          ?>
      </div>
  </div>
  <br>
  <div class="blog-posts">
  </div>
</div>