wordpressにおいてタイトルに設定したカテゴリーをクリックしたらカテゴリーに応じて下記の記事を反映させたい

前提

バンドのニュース記事を作成しています。カテゴリーはALLとEVENTとNEWSを設定しています。ALLでのスラッグはall、EVENTのスラッグはevent、NEWSのスラッグはnewsと設定しております。タイトルカテゴリーにALL,EVENT,NEWSを設定しています。

・phpコード
・.article-news__tab-linkの部分がタイトルカテゴリーを示す。
・.article-news__contentの部分が記事内容を示す。

実現したいこと

・タイトルALLではすべての記事を反映、EVENTではEVENTカテゴリーだけの記事を反映、同じくNEWSではNEWSカテゴリーの記事のみ反映させたいです。

発生している問題・エラーメッセージ

クリックしても反映されない。自身で一つ試してみたが、うまく実装できずに原因がわからなくなってしまったため、アイディアなどご教示頂きたいと考えております。

該当のソースコード

--page-news.php--
<div class="article-news__inner">
      <!-- 記事の左側のメイン部分 -->
      <div class="article-news__inner-main">
        <nav class="article-news__nav">
          <ul class="article-news__list">
            <?php
            $articleNewsCategories = get_categories();
            foreach ($articleNewsCategories as $articleNewsCategory) :
            ?>
              <li class="article-news__item">
                <a class="article-news__tab-link active" data-name="<?php echo $articleNewsCategory->slug; ?>">
                  <span>
                    <?php echo $articleNewsCategory->name; ?>
                  </span>
                </a>
              </li>
            <?php endforeach; ?>
          </ul>
        </nav>

        <?php
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
        $args = array(
          'post_type' => 'articles',
          'category_name' => 'all,event,news',
          'order' => 'DESC',
          'posts_per_page' => 6,
          'paged' => $paged,
        );
        $my_query = new WP_Query($args);
        if ($my_query->have_posts()) :
        ?>
          <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

            <div class="article-news__content" data-name="<?php echo $articleNewsCategory->slug; ?>">
              <h4 class="article-news__item-min">
                <span class="article-news-date">
                  <?php the_time('Y/m/d'); ?>
                </span>
                <?php
                $articleNewsCategories = get_the_category();
                foreach ($articleNewsCategories as $articleNewsCategory) :
                ?>
                  <span class="article-news-news">
                    <?php echo $articleNewsCategory->name; ?>
                  </span>
                <?php endforeach; ?>
              </h4>
              <h3 class="article-news__content-sec-ttl">
                <?php the_title(); ?>
              </h3>
              <div class="article-news__content-copy">
                <?php the_content(); ?>
              </div>
              <div class="article-news__close">
                <span class="article-news__close-tri"></span>
                <span class="article-news__close-txt"></span>
              </div>
              <div class="article-news__clear"></div>
            </div>
            <!-- /.article-news-content -->

          <?php endwhile; ?>
        <?php endif; ?>

        <div class="article-news__btn btn">
          <a href="#" class="btn__link btn__space btn-left">
            &larr; 新しい記事へ
          </a>
          <!-- <a href="#" class="btn__link btn__space btn-right">
            古い記事へ &rarr;
          </a> -->
          <?php
          $link = get_next_posts_link('古い記事へ&rarr;');
          if ($link) {
            $link = str_replace('<a', '<a class="btn__link btn__space btn-right"', $link);
            echo $link;
          }
          ?>
        </div>
        <!-- /.article-news-btn -->
      </div>
      <!-- /.article-news__inner-main -->
--page-news.php--

--main.js--
$('.article-news__tab-link').on('click', function () {
    $(this).addClass('active');
    if ($(this).hasClass('active')) {
      $('.article-news__tab-link').not(this).removeClass('active');
      $('.article-news__content').addClass('active').not(this);
    }
  });
--main.js--