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

ブログ・サイト
ブログ・サイト
この記事は約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タグで読み込むなどするとかなり読みやすいコードになります。

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

おわりに

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

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

コメント