wordpressでループの中にループを入れたら詰んだ

Elementorで作ったページはウィジェット配置とかめんどくさい事しない限りPHPをじかに書くことはできないので、functionにショートコードを作って、外からPHPファイルを読み込むことにした。

 

やりたかったこと

トップページによくある、新着情報一覧（複数カテゴリ）を、カテゴリーも表示させたものを表示させたい。

2018年1月11日 カテゴリ名
記事タイトル

こんなかんじの。

 

結論から言うと、成功した。successである。

結論から知りたい人はこちら

・function.phpにショートコードと呼び出すファイルを指定
・読み込むphpを作成
・ショートコードをループ内に配置

・function.php

// phpファイルをショートコードにして埋め込む
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(STYLESHEETPATH . "/news.php"); // STYLESHEETPATHはテーマのstyle.cssのある階層
  return ob_get_clean();
}
add_shortcode('topics', 'short_php'); // topicsはお好きな名前に。

 
・外部php

<?php query_posts("post_type=post&posts_per_page=5&cat=1,5"); ?>

<?php if(have_posts()): ?>
<div class="news tab-content">
<?php while(have_posts()):  the_post();
$cat = get_the_category();
$cat = $cat[0];
$cat_name = $cat->cat_name;
$cat_slug = $cat -> slug;
?>
<dl class="">
<dt><span class="date"><?php the_time('Y年m月d日'); ?></span><span class="<?php echo $cat_slug; ?>"><?php echo $cat_name; ?></span></dt>
<dd><span class="ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></dd>
</dl>
<?php endwhile; ?>
</div>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

・埋め込んだショートコード（さっき作ったtopicsは任意の名前に）

[topics]

これで表示できるようになった。

何で詰んだのか

何に詰んだのかというと、ループが１つだけの場合、別にreset_queryはいらないんですが、入れ子（ネスト）した場合は、きちんとwp_reset_queryを入れてやらないと、ループの外に中でループした内容がさらに出てきちゃうという。
うまくいかなくて２時間くらいは悩んだと思う。
これを読んだ人が悩みませんように・・なむなむ。

あと、例に示したPHPは色々間違ってるかもしれないので、ちゃんとしたPHPを書いている人を参考にしたほうが良いです。