27：カテゴリーを表示

公開日:2019年07月15日

WordPress

投稿は必ず1つ以上のカテゴリを持っています。カテゴリを表示させましょう。

カテゴリー表示用関数はページ内容表示用ループ内で使用します。
カテゴリー表示は「投稿」に設定できる機能なので「投稿一覧」と「投稿詳細」で使用します。

リンクつきカテゴリー表示簡易版

WordPress関数にリンクつきカテゴリー表示関数が用意されています。

<?php the_category(); ?>

HTML出力結果

 <ul class="post-categories">
   <li>
     <a href="http://localhost/WordPressフォルダ/category/カテゴリースラッグ/" rel="category tag">
       カテゴリー名
     </a>
   </li>
 </ul>

リンクつきカテゴリー表示詳細版

HTMLの構成を変えたりする場合は詳細版を使用します。

<ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catSlug = $category_list[$i]->slug;
?>
  <li class="cat-<?php echo $catSlug; ?>">
    <a href="<?php echo get_category_link($catID); ?>">
      <?php echo $catName; ?>
    </a>
  </li>
<?php endfor; ?>
</ul>

HTML出力結果

<ul class="post-categories">
  <li class="cat-カテゴリースラッグ">
    <a href="http://localhost/WordPressフォルダ/category/カテゴリースラッグ/">
      カテゴリー名
    </a>
  </li>
</ul>

子カテゴリーのみ表示

子カテゴリー作成

管理画面「投稿」>「カテゴリー」

投稿カテゴリー設定

管理画面「投稿」編集画面

子カテゴリーのみ表示

<ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catSlug = $category_list[$i]->slug;
    if($category_list[$i]->category_parent === 1) :
?>
  <li class="cat-<?php echo $catSlug; ?>">
    <a href="<?php echo get_category_link($catID); ?>">
      <?php echo $catName; ?>
    </a>
  </li>
<?php endif; ?>
<?php endfor; ?>
</ul>

HTML出力結果

<ul class="post-categories">
  <li class="cat-カテゴリースラッグ">
    <a href="http://localhost/WordPressフォルダ/category/カテゴリースラッグ/">
      カテゴリー名
    </a>
  </li>
</ul>

投稿詳細テンプレートに追加

single.php

リンクつきカテゴリー表示簡易版コピペ用

<div class="category"><?php the_category(); ?></div>

リンクつきカテゴリー表示詳細版コピペ用

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catSlug = $category_list[$i]->slug;
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endfor; ?>
      </ul>
    </div>

リンクつきカテゴリー表示詳細版子カテゴリーコピペ用

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catSlug = $category_list[$i]->slug;
    if($category_list[$i]->category_parent === 1) :
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endif; ?>
<?php endfor; ?>
      </ul>
    </div>

変更前

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

    <h2 class="title"><?php the_title(); ?></h2>
    <div class="date"><?php the_time('Y年m月d日'); ?></div>

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

    <div class="article">
      <?php the_content(); ?>
    </div>

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

変更後

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

    <h2 class="title"><?php the_title(); ?></h2>
    <div class="category"><?php the_category(); ?></div>
    <div class="date"><?php the_time('Y年m月d日'); ?></div>

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

    <div class="article">
      <?php the_content(); ?>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catSlug = $category_list[$i]->slug;
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endfor; ?>
      </ul>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catSlug = $category_list[$i]->slug;
    if($category_list[$i]->category_parent === 1) :
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endif; ?>
<?php endfor; ?>
      </ul>
    </div>

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

style.css

追加

.wp-content .post-categories {
  display: flex;
  list-style: none;
  padding: 0;
}
.wp-content .post-categories a {
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  padding: 8px;
  margin-right: 10px;
}
.wp-content .cat-blog a {
  background-color: #009688;
}
.wp-content .cat-works a {
  background-color: #2196f3;
}