【WordPress】「THE THOR」投稿一覧ページをカテゴリーごとに表示方法をカスタマイズする覚書

ブログ・サイト

2022.11.15

ブログ・サイト

TheTHOR WordPress

この記事は約7分で読めます。

とっちゃん@nyanco! です。

今回はWordPress公式ブログテーマ「THE THOR（ザ・トール）」で投稿記事一覧ページの表示・並び順をカテゴリー別にカスタマイズする方法の覚書です。

THE THOR「ザ・トール」│次世代WordPressテーマ

クライアントからのカスタマイズ依頼時の備忘録ですにゃ～
「THE THOR」は初めて触るテーマだったので、その造りを理解するのがまず大変でしたにゃ～

筆者のテーマをカスタマイズするレベルはまだまだ発展途上レベルなので、コード的に拙いものになっているかも知れません。コードを利用する際はその点をご了承の上、自己責任の元で参考程度にお使いください。

作業環境について
やりたいこと
作業概要
カスタマイズ内容
おわりに

作業環境について

主な作業環境のバージョン情報は以下の通りです。

WordPress 6.0.3
THE THOR 2.3.5【テーマ】
Advanced Custom Fields 6.0.2【プラグイン】

やりたいこと

投稿のカテゴリーごとの「投稿一覧ページ」の記事の並び順をカスタマイズしたい。

例えば以下のような感じです。

カテゴリー1：「日付選択ツール（デイトピッカー）※」を基準に昇順に表示
カテゴリー2：「投稿日時」を基準に降順に表示

※「日付選択ツール（デイトピッカー）」はプラグイン「Advanced Custom Fields（ACF）」で新規追加したカスタムフィールドです。本記事はすでに設定済みという前提で進めていきます。

作業概要

ざっくりと作業の流れはこんな感じです。

親テーマフォルダからテンプレートファイル「category.php」を子テーマフォルダへコピー（「THE THOR」の子テーマはデフォルトで用意されています）
子テーマの「category.php」を編集

やることはシンプルですにゃ～
基本は「category.php」の編集のみとなりますにゃ～

カスタマイズ内容

カスタマイズする箇所としては、「category.php」の93～134行目となります（THE THOR 2.3.5以外のバージョンだと多少異なるかも知れません）。

archiveというclassが付与されている辺りとなりますにゃ～

「THE THOR」は有料テーマなのでコード部分はマスクしています。ご了承ください。

93～134行目を丸々以下のコードに差し替えます。

<!---------------カスタマイズここから---------------->
<!---------------カスタマイズここから---------------->
<!---------------カスタマイズここから---------------->
<?php $url = $_SERVER['REQUEST_URI']; ?>
      
<!------------パラメータが ?cat=100 の場合の表示内容------------>
<?php if(strstr($url,'?cat=100')): ?>
      <?php if (have_posts()) : $count = 1; ?>
        <!--archive--><div class="archive">
<?php
$args = array(
  'post_type' => 'post', /* 投稿タイプ */
  'cat' => 100, /* カテゴリーID */
  'meta_key' => 'event_date',/* 「デイトピッカー」のフィールド名 */
  'orderby' => 'meta_value',/* 並び順の基準の指定 */
  'order' => 'ASC',/* 降順:DESC  昇順:ASC*/
);
$the_query = new WP_Query( $args );if ( $the_query->have_posts() ) :?>
      <!-- ループ前の開始タグ -->
          <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>


<!-- 「THE THOR2.3.5」デフォルトの96〜120行目 -->


          <?php endwhile; ?><!-- ループ後の閉じタグ -->
<?php endif; wp_reset_postdata(); ?>
</div><!--/archive-->
        <?php else : ?>
          <!--archive--><div class="archive">
            <div class="archive__item archive__item-none<?php if (get_option('fit_archiveList_frame') && get_option('fit_archiveList_frame') != 'off' ):?> <?php echo get_option('fit_archiveList_frame')?><?php endif; ?>">
              <p class="phrase phrase-primary">投稿が1件も見つかりませんでした。</p>
            </div></div><!--/archive-->
        <?php endif; ?>
  <!------------/パラメータが ?cat=100 の場合の表示内容------------>

      
      
  <!------------パラメータが ?cat=101 の場合の表示内容------------>
<?php elseif(strstr($url,'?cat=101')): ?>
      <?php if (have_posts()) : $count = 1; ?>
        <!--archive--><div class="archive">
<?php
$args = array(
  'post_type' => 'post', /* 投稿タイプ */
  'cat' => 101, /* カテゴリーID */
  'meta_key' => 'event_date',/* 「デイトピッカー」のフィールド名 */
  'orderby' => 'date',/* 並び順の基準の指定 */
  'order' => 'DESC',/* 降順:DESC  昇順:ASC*/
);

～以下は上記と同内容～

  <!------------/パラメータが ?cat=101 の場合の表示内容------------>

～カテゴリーの数だけ繰り返し～

  <!------------上記以外の内容（パラメータなしも含む）------------>
<?php else: ?>

    <!------------テーマデフォルトの表示------------>


<!-- 「THE THOR2.3.5」デフォルトの93〜134行目 -->

    <!------------/テーマデフォルトの表示------------>

<?php endif; ?>
  <!------------/上記以外の内容（パラメータなしも含む）------------>

<!---------------/カスタマイズここまで---------------->
<!---------------/カスタマイズここまで---------------->
<!---------------/カスタマイズここまで---------------->

ざっくりコードの解説。

まず、URLパラメータ（URLの末尾につくカテゴリーID）で条件分岐させ、各カテゴリ―の絞り込みページを出力させるという仕組みです。

なのでカテゴリーの数が多いとコードの記述も多くなってきますにゃ～

上記コードの18～35行目は共通するコードなので、テンプレートファイルにしてget_template_partタグで読み込むなどするとかなり読みやすいコードになります。

以上で投稿記事をカテゴリーごとに絞り込み・並び順など意図通りに表示させることができるはずです。

おわりに

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧