レシピサイトを作る(home.php、タグクラウド、サブクエリ)

2024.07.13

カテゴリーごとの記事一覧を取得して表示する

項目	用途	例
カテゴリー	・トップページで記事をまとめるための分類・メインとなる食材、季節、調理法、など分け方は自由・複数カテゴリー登録可能	夏に食べたい、副菜、焼き魚、煮魚、ゴーヤー
タグ	・カテゴリーに登録しきれなかった細かい情報をタグに設定する・使用している食材、調理法などこれも分け方は自由	ゴーヤー、サバ缶、圧力鍋

完成コード

<?php get_header(); ?>

<!-- タグクラウド -->
<?php wp_tag_cloud( 'format=list' ) ?>

<!-- 記事一覧 -->
<?php if (have_posts()): 
  echo wpdocs_list_categories();
?>
<?php else: ?>
  <p>記事がありません。</p>
<?php endif; ?>

<!-- サブクエリ -->
<?php 
// https://developer.wordpress.org/reference/functions/get_categories/
// カテゴリーのリスト
function wpdocs_list_categories() { 
  $html = '';
  $taxonomy = 'category';
  $categories = get_categories( array( 'hide_empty' => false, 'taxonomy' => $taxonomy ) );
  $html .= '<ul>';
  foreach ( $categories as $category ) {
      $html .= '<li>';
      $html .= $category->name;
      $html .= query_by_term_id( $category->term_id );
      $html .= '</li>';
  }
  $html.= '</ul>';
  // var_dump($html);
  return $html;
}

// https://developer.wordpress.org/reference/classes/wp_query/
// カテゴリーのリストの中のコンテンツのリスト
function query_by_term_id($category_id) {
  $the_query = new WP_Query( array( 'cat' => $category_id ) );
  $html ='';
  if ( $the_query->have_posts() ) {
    $html .= '<ul>';
    while ( $the_query->have_posts() ) {
      $the_query->the_post();
      $html .= '<li>';
      $html .= '<div>';
      $html .= get_the_post_thumbnail();
      $html .= '<p>' . esc_html( get_the_title() ) . '</p>';
      $html .= '</div>';
      $html .= '</li>';
    }
    $html .= '</ul>';
    return $html;
  }
  // Restore original Post Data.
  wp_reset_postdata();
}

?>


<?php get_footer(); ?>

get_categories()でカテゴリー一覧を取得して、カテゴリーの数だけループ処理を行います。

WP_Query()でカテゴリーIDに紐づく記事一覧を取得して、記事の数だけループ処理を行います。

記事内容はとりあえずアイキャッチ画像とタイトルを表示しています。

サブクエリのhtml出力結果

<ul>
  <li>夏に食べたい
    <ul>
      <li><div><p>アジの冷や汁</p></div></li>
      <li><div><p>ネバネバ小鉢</p></div></li>
      <li><div><p>ゴーヤーチャンプルー</p></div></li>
    </ul>
  </li>
  <li>ゴーヤー
    <ul>
      <li><div><img width="360" height="360" src="~~.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="http://seasaa.local/wp-content/uploads/2024/07/8BE01F.jpeg 1536w" sizes="(max-width: 360px) 100vw, 360px" />
      <p>ゴーヤーと豚肉と焼き肉のタレ</p></div></li>
      <li><div><p>ゴーヤーチャンプルー</p></div></li>
      </ul>
  </li>
  <li>副菜
    <ul>
      <li><div><p>きのこの当座煮</p></div></li>
      <li><div><p>ネバネバ小鉢</p></div></li>
    </ul>
  </li>
</ul>

表示結果

今回知った関数やブロックの使い方

親カテゴリーだけを取得

get_categories()

【WP】親カテゴリーだけリスト表示する方法

<?php
$args = array(
'parent' => '0',
'orderby' => 'term_order',
'order' => 'ASC',
);
$categories = get_categories( $args );
?>
<ul>
<?php foreach( $categories as $category ) : ?>
<li>
<a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->name; ?></a>
</li>
<?php endforeach; ?>
</ul>

‘parent’ => ‘0’ と設定すると最上位のカテゴリーが取得できます。

カテゴリーリストを表示

wp_list_categories()

<?php wp_list_categories(); ?>

デフォルトのHTML出力結果

不要な<li>で囲まれて使いづらい。今回はタクソノミー名も不要

<li class="categories">カテゴリー<ul>	<li class="cat-item cat-item-1"><a href="http://repereci.local/category/summer/">夏に食べたい</a>
</li>
	<li class="cat-item cat-item-2"><a href="http://repereci.local/category/side-dish/">副菜</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://repereci.local/category/grilled-fish/">焼き魚</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://repereci.local/category/go-ya/">ゴーヤー</a>
</li>
</ul></li>

今回タクソノミー名の出力は不要なのでtitle_li => ”と設定します。

<!-- カテゴリーリスト -->
<ul><?php wp_list_categories(array('title_li' => '')); ?></ul>

<!-- カテゴリーリスト -->
<ul>	<li class="cat-item cat-item-1"><a href="http://repereci.local/category/summer/">夏に食べたい</a>
</li>
	<li class="cat-item cat-item-2"><a href="http://repereci.local/category/side-dish/">副菜</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://repereci.local/category/grilled-fish/">焼き魚</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://repereci.local/category/go-ya/">ゴーヤー</a>
</li>
</ul>

ちなみに、ブロックエディタでも「カテゴリー一覧」が用意されています。
編集画面で「最上位レベルのカテゴリーのみを表示」などカスタムもできて便利です。

HTML出力結果

<ul<?php wp_list_categories(); ?></ul>

<ul class="wp-block-categories-list wp-block-categories">
  <li class="cat-item cat-item-7"><a href="http://seasaa.local/category/side-dish/">副菜</a></li>
	<li class="cat-item cat-item-1"><a href="http://seasaa.local/category/summer/">夏に食べたい</a></li>
</ul>

タグ一覧を表示する「タグクラウド」

<a href="http://seasaa.local/tag/patato/" class="tag-cloud-link tag-link-5 tag-link-position-1" style="font-size: 8pt;" aria-label="じゃがいも (1個の項目)">じゃがいも</a>
<a href="http://seasaa.local/tag/gooyaa/" class="tag-cloud-link tag-link-3 tag-link-position-2" style="font-size: 8pt;" aria-label="ゴーヤー (1個の項目)">ゴーヤー</a>
<a href="http://seasaa.local/tag/sabakan/" class="tag-cloud-link tag-link-4 tag-link-position-3" style="font-size: 8pt;" aria-label="サバ缶 (1個の項目)">サバ缶</a>

format=listオプションを使うと、ulとliで囲まれます。

<?php wp_tag_cloud( 'format=list' ) ?>

<ul>
	<li><a href="タグアーカイブページのURL">タグ名</a></li>
	<li><a href="タグアーカイブページのURL">タグ名</a></li>
	<li><a href="タグアーカイブページのURL">タグ名</a></li>
</ul>