【Wordpress】ループ文の中にさらにループさせる方法

Question

初めてWordpressを使いポートフォリオサイトを作成しています。

メイン投稿で書いた記事のアイキャッチ画像をMasonryをつかってループで出力しているのですが、
その上に、投稿のカテゴリー(複数カテゴリー選択された記事も有)をCheckbox式でフィルター分けできるような構造で作ろうとしています。

現在ある程度出来上がってきてはいるのですが、どうしてもMasonryで出力された投稿のカテゴリーが一つしか出力されません。

どうしたら複数のカテゴリーが出力されるようにできますでしょうか...
※不慣れで提供する情報が足りないかもしれません...

<ul class="category__list flex fadeIn">
        <?php
          $cats = get_categories();
          foreach ($cats as $cat) :
              $slug = $cat->slug;
              $name = $cat->name;
              $count = $cat->count;
              $link = get_category_link($cat->cat_ID);
        ?>
        <!-- ループしたいHTMLをここに置く -->
        <div class="portfolio_category_name">
          <input type="checkbox" id="checkbox_<?php echo $name;?>" value="<?php echo $slug;?>">
          <label class="button" for="checkbox_<?php echo $name;?>">
            <?php echo $name;?>
          </label>   
        </div>
        <?php endforeach; ?>
      </ul>
    </div>
    <div class="portfolio__content fadeIn">
      <div class="grid" data-masonry='{ "itemSelector": ".grid-item",}'>
        <?php
          //$argsのパラメーターを変えていく
          $args = array(
            'post_type' => 'post', //投稿タイプ
            'posts_per_page' => -1, //全ページを取得
          );
          $the_query = new WP_Query($args);
          if ($the_query->have_posts()) :
          while ($the_query->have_posts()) : $the_query->the_post();
          // 投稿データのカテゴリーを取得
          $cat = get_the_category();
          // カテゴリー名の取得
          $cat_name = $cat[0]->name;
          // スラッグの取得
          $cat_slug = $cat[0]->slug;
        ?>
        <!-- ループしたいHTMLをここに置く -->
        <div class="grid-item <?php echo $cat_slug;?>">
            <a href="<?php the_permalink(); ?>" class="portfolio__item__detail-link">
              <?php the_post_thumbnail(null, array('class' => 'grid-item__img')); ?>
            </a>
        </div>
        <?php
          endwhile;
          else:
        ?>
        <div class="no-post__container">
          <p class="no-post__text">Coming soon...</p>
        </div>
        <?php endif; ?>
      </div>
    </div>

var $container = $('.grid');
$container.multipleFilterMasonry({
  itemSelector: '.grid-item',
  filtersGroupSelector: '.category__list'
});
var $grid = $('.grid').imagesLoaded(function () {
  // 全ての画像が読み込まれてからMasonryを動作させる
  $grid.masonry({
    // ここにオプションを記述
  });
});

Answer 1

whileの中の方の話ですかね。
Codex get the categoryによると「カテゴリーのオブジェクトの配列」が返ってくるようなので、0を直接参照せずforeachすれば良いのでは？

「投稿データの」なら「投稿 ID」を引数に渡せば取得できるようです。

Comments

[neue]

回答ありがとうございます！

<div class="grid-item <?php echo $cat_slug;?>">
<a href="<?php the_permalink(); ?>" class="portfolio__item__detail-link">
<?php the_post_thumbnail(null, array('class' => 'grid-item__img')); ?>
</a>
</div>
<?php
endwhile;
else:
?>

この部分の grid-item のあとの <?php echo $cat_slug;?>にカテゴリーが一つしか表示されない状態を、ループで複数のカテゴリーがある場合は表示されるようにしたいと思っています...

かなり初心者で検索しながらここまできたので、そもそものあってるかどうかもわからず...
恐れ入りますがもう少しだけ詳しくご教示いただけますか汗

[m.ts10806]

既に自身でforeachで書かれてるので
$cats = get_categories();
foreach ($cats as $cat) :

これと同じように書けば良いと思います。whileで投稿IDが来ているならそちらを実行引数に指定してください。

[neue]

何度も申し訳ありません...
上記で試してみたいのですが、そうすると存在している全てのカテゴリーで各カテゴリーごとに投稿されてしまうのですが...
(例えば全部で5個カテゴリーがあると、記事の指定カテゴリーに関係なく5つ同じ投稿のアイキャッチ画像が並び、一つ一つに一個ずつカテゴリーがついている状態です。)

[m.ts10806]

こちらの想定通りになっているか分からないので、質問本文に「回答を受けて試したこと」として追記してください。