アーカイブページで投稿を年別かつカテゴリー別に表示 - webデザインの備忘録

例えば、メディアへの出演、掲載に関する記事の一覧ページで
年別に記事タイトルを表示させたい。

まず『メディア』というカテゴリーを作成し
更に子カテゴリーで『テレビ』や『雑誌』等を作成し各記事を振って
メディア用のアーカイブページを作成。
表示形式は子カテゴリーの項目で年別表示を繰り返すというものでした。
つまりこんな感じ。

【メディア出演記事覧】
■テレビ
2018
x/y「◯◯◯」に出演！
x/y「◯◯◯」に出演！
x/y「◯◯◯」に出演！
2017
x/y「◯◯◯」に出演！
x/y「◯◯◯」に出演！
x/y「◯◯◯」に出演！

■雑誌
2018
x/y「◯◯◯」に掲載！
x/y「◯◯◯」に掲載！
x/y「◯◯◯」に掲載！
2017
x/y「◯◯◯」に掲載！
x/y「◯◯◯」に掲載！
x/y「◯◯◯」に掲載！

さて、記述内容は・・・
で今回も中々に苦労したので備忘録。

今回の例として
親カテゴリー『メディア』を作成。スラッグはmedia
子カテゴリー『テレビ』を作成。スラッグはtelevision
子カテゴリー『雑誌』を作成。スラッグはmagazine

アーカイブ用のテンプレートcategory-◯◯◯.phpを作成

親カテゴリー『メディア』用なので今回はcategory-media.phpとなりますね。
ちょっとややこしいんですがarchive-◯◯◯.phpは
カスタム投稿タイプ用のアーカイブテンプレートなので注意が必要です。
今回はカテゴリー用のアーカイブなのでcategory-スラッグ.phpを作成しました。
ちなみにカテゴリーアーカイブの優先順位は以下。

category-{slug}.php
category-{id}.php
category.php
archive.php
index.php

ではcategory-media.phpへの記述内容です。

【PHP】

      <?php
          query_posts('posts_per_page=1ページに表示させたい件数&category_name=カテゴリースラッグ');
          $year=0;
          while (have_posts()) : the_post();
            if ($year!=get_the_date('Y')) { $year=get_the_date('Y');?>
          <h4><?php echo $year; ?></h4>
          <?php } ?>
          <ul>
            <li>
              <span class="date"><?php the_time('n/j'); ?>　</span>
              <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            </li>
          </ul>
        <?php
          endwhile;
          wp_reset_query();
        ?>

例で置き換えるとこんな感じです。
【PHP】

      <?php
          query_posts('posts_per_page=-1&category_name=television');
          $year=0;
          while (have_posts()) : the_post();
            if ($year!=get_the_date('Y')) { $year=get_the_date('Y');?>
          <h4><?php echo $year; ?></h4>
          <?php } ?>
          <ul>
            <li>
              <span class="date"><?php the_time('n/j'); ?>　</span>
              <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            </li>
          </ul>
        <?php
          endwhile;
          wp_reset_query();
        ?>

posts_per_page=-1は-1とすると全件表示指定となります。
もし5件表示させたければそのまま5と記述してください。

これで目標表示形式に持っていく事ができました！

が、これですね。
上記の例を表示させたページのソースを見てみると

<li>

が繰り返されるのでなく

<ul>

ごと繰り返されちゃってるんです・・・。
ループの開始位置や終了位置を色々と変えてみたりはしたのですが
どうにもうまくいかない。
年数表示の時点でループしなきゃいけないのに
繰り返させたいのは月/日としているので
矛盾が生じているのでしょうね。
ループを二重にすればいいのか？とか本当色々試してみたのですが
私の理解不足で結局この形で妥協するしかなく・・・。
SEOの事を考えるとよろしくないですよね・・・。うーん。

しかも子カテゴリー毎に繰り返したいので
この記述を子カテゴリー分繰り返し記述するという形。
もっとスマートな書き方がきっとあるんだろうなぁ。
まだまだ勉強が必要です。

でもたったこれだけやるのに
子カテゴリー分繰り返し記述するとエラーがでちゃったり
関数名変えてもダメだったりで地味に苦労した結果なんです。

やりたい事完璧にできた！！とは言えませんが
参考になれば幸いです。
私と同じく妥協で良い！という方、
ループのcategory_nameを書き換えるのをお忘れなく！

参考サイト

https://ja.forums.wordpress.org/topic/1564
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4