WordPress個別サポート

カテゴリーページの活用例の紹介です。

カテゴリーページを表示すると通常は、そのカテゴリーの投稿が一覧表示されます。
ただし、子カテゴリーがある場合は、子カテゴリーのアイキャッチ画像などを一覧表示したいこともあります。

たとえば、子カテゴリーを持たない「カルチャーイベント」カテゴリーでは通常通りにアイキャッチ画像(大)と投稿の一覧を表示します。

子カテゴリーを持たない場合はアイキャッチ画像(大)を表示

子カテゴリーを持たない場合はアイキャッチ画像(大)を表示

子カテゴリー(スポーツイベント、グルメイベント、街ブライベントなど)を持つイベントカテゴリーについてはアイキャッチ画像(小)などを使って子カテゴリー情報を一覧表示しています。

子カテゴリーを持つ場合はアイキャッチ画像(小)を表示

子カテゴリーを持つ場合はアイキャッチ画像(小)を表示

この記事はAdvanced Custom Fieldsプラグインを使って「カテゴリー」にアイキャッチ画像を追加したという前提で進めていきます。詳しくは以下のページをご覧ください。
カテゴリーごとに異なるアイキャッチ画像を表示する

このカスタマイズのために編集するのはカテゴリーページのテンプレート(category.php、archive.php、index.phpなど)です。

コードの骨組みから紹介します。

// 子カテゴリーを取得
$children = get_term_children($cat, 'category');

if(!empty($children)) :
分岐1:子カテゴリーがある場合
子カテゴリーをサムネイル付で一覧

else:
分岐2:子カテゴリーがない場合
アイキャッチ画像(大)を表示
endif;

まずは、get_term_childrenを使って現在のカテゴリーの子カテゴリーを取得します。$childrenには子カテゴリーのIDが格納されます。

$childrenが空でなければ子カテゴリーが存在すると判断して、子カテゴリーの情報を一覧表示します(分岐1)。それ以外($childrenが空だった場合)は子カテゴリーが存在しないと判断して、アイキャッチ画像(大)を表示します(分岐2)。

具体的なコードの例は次のようになります。カテゴリーページでカテゴリー名を表示している部分の下あたりに入力してください。

<?php
// 子カテゴリーを取得
$children = get_term_children($cat, 'category');

// ***分岐1:子カテゴリーがある場合
// ***子カテゴリーをサムネイル付で一覧
if(!empty($children)) :
  $cnt = 0;
  foreach($children as $child_id) :
    $cnt++;
    $c_cat = get_category($child_id);
    if ($cat !== $c_cat->parent) {continue; /* 孫を除外 */ }
    ?>
    <!-- 子カテゴリー単体表示ブロック -->
    <div style="float:left;width:170px;margin-left:20px;">
      <h3><?php echo $c_cat->cat_name; ?></h3>
      <div style="">
      <a href="<?php echo get_category_link($c_cat->cat_ID) ?>">
      <?php
      // カテゴリーのアイキャッチ画像を表示する
      $image = get_field('category-image', 'category_' . $c_cat->term_id);
      echo wp_get_attachment_image($image['id'], 'thumbnail');
      ?></a>
      </div>
      <div style="">
      <?php echo $c_cat->description; ?>
      </div>
    </div><!-- 子カテゴリー単体表示ブロック終了 -->
    <?php if($cnt % 3 == 0) : /* 3つで改行 */ ?>
        <div style="clear:both;"></div>
    <?php endif ?>
  <?php endforeach; ?>
  <div style="clear:both;"></div>

<?php
// ***分岐2:子カテゴリーがない場合
// ***アイキャッチ画像(大)を表示
else: ?>
  <div align="center"  style="margin-top:20px;margin-bottom:20px;">
  <?php
  // カテゴリーのアイキャッチ画像を表示する
  $image = get_field('category-image', 'category_' . $cat);
  echo wp_get_attachment_image($image['id'], 'large');
  ?>
  </div>
<?php endif; ?>

テーマによってファイル構成や処理コードが異なるので何行目に入力するのか具体的には説明しませんが、カテゴリーページのテンプレートのコメントなどを参考にお試しください。

ポイントは12行目の「孫の除外」です。孫は祖父ではなく親カテゴリーの子カテゴリーとして一覧表示したいので、子カテゴリーを一覧表示するときに孫を除外しています。

たとえば、イベントカテゴリーの子カテゴリー「グルメイベント」には「料理体験」と「食べ歩き」の子カテゴリーがあります。イベントカテゴリーから見ると孫ですが、これを除外しないとイベントカテゴリーの子カテゴリー一覧に表示されてしまいます。

孫カテゴリーが表示されてしまう

孫カテゴリーが表示されてしまう

用途によっては孫を表示しても良い場合もありますが、ここでは孫カテゴリーは除外しておき、あくまで親子関係だけを表示するようにしています。「料理体験」と「食べ歩き」カテゴリーはグルメイベントの子カテゴリーとしてのみ表示されます。

親子関係のカテゴリーのみ表示される

親子関係のカテゴリーのみ表示される

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート