31：投稿詳細表示用テンプレート作成

WordPressは用途に応じたテンプレート名があらかじめ決めれています。主なテンプレート名は以下です。

「single.php」は「投稿詳細」を表示する時に使用するテンプレートです。

このテンプレートが呼び出される時、メインループデータには1ページ分の投稿詳細データが入ります。

投稿詳細表示用テンプレート

single.php

今までは投稿詳細表示に「index.php」を使用していましたが、優先度の高い固定ページ専用テンプレート「single.php」を新しく作成します。

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // テンプレートパーツ読み込み：一覧 ?>
<?php get_template_part('content','single'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php // テンプレートパーツ読み込み：記事なし ?>
<?php get_template_part('content','none'); ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

        </div><!-- /.inner -->
      </div><!-- /.main-loop -->

    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->

<?php
get_footer();

content-single.php

「single.php」で使用する投稿詳細専用表示部分モジュール（テンプレートパーツ）を作成します。

<?php // アイキャッチ画像 ?>
<div class="thumbnail">
<?php echo getThumbnail('large'); ?>
</div>

<?php // タイトル ?>
<h2 class="title"><?php the_title(); ?></h2>

<?php // カテゴリ文字列 ?>
<?php echo getCatLinkList(); ?>

<?php // タグ文字列 ?>
<?php echo getTagLinkList(); ?>

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

<?php // 公開日時 ?>
<div class="release-date">公開日時：<?php the_time('Y年m月d日'); ?></div>

<?php // 最終更新日時 ?>
<div class="modified-date">最終更新日時：<?php the_modified_date('Y年m月d日'); ?></div>

functions.php

「content-single.php」から呼び出されるリンクありのカテゴリ一覧表示用関数を作成します。

// カテゴリリンク文字列
function getCatLinkList() {
  $code = '<h3 class="category-title">カテゴリ：</h3>'.PHP_EOL;
  $code .= '<ul class="category-list">'.PHP_EOL;
  $category_list = get_the_category();
  for ($i=0; $i < count($category_list); $i++) {
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catCount = $category_list[$i]->category_count;
    $catDescription = $catList[$i]->description;
    $catColor = '';
    if($catDescription) {
      $catColor = ' style="background-color:'.$catDescription.';"';
    }
    $code .= '<li class="cat-id'.$catID.'"'.$catColor.'>'.PHP_EOL;
    $code .= '<a href="'.get_category_link($catID).'">'.PHP_EOL;
    $code .= $catName.'('.$catCount.')'.PHP_EOL;
    $code .= '</a>'.PHP_EOL;
    $code .= '</li>'.PHP_EOL;
  }
  $code .= '</ul>';
  return $code;
}

「content-single.php」から呼び出されるリンクありのタグ一覧表示用関数を作成します。

// タグリンク文字列
function getTagLinkList() {
  $code = '';
  if (has_tag()) {
    $code .= '<h3 class="tag-title">タグ：</h3>'.PHP_EOL;
    $code .= '<ul class="tags-list">'.PHP_EOL;
    $tagList = get_the_tags();
    for ($i=0; $i < count($tagList); $i++) {
      $tagID = $tagList[$i]->term_id;
      $tagName = $tagList[$i]->name;
      $tagCount = $tagList[$i]->count;
      $code .= '<li class="tag-id'.$tagID.'">'.PHP_EOL;
      $code .= '<a href="'.get_tag_link($tagID).'">'.PHP_EOL;
      $code .= $tagName.'('.$tagCount.')'.PHP_EOL;
      $code .= '</a>'.PHP_EOL;
      $code .= '</li>'.PHP_EOL;
    }
    $code .= '</ul>';
  }
  return $code;
}

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

get_header()

have_posts()

the_post()

get_the_ID()

get_template_part()

get_sidebar()

get_footer()

the_title()

the_content()

the_time(‘Y年m月d日’)

the_modified_date(‘Y年m月d日’)

オリジナル関数

getThumbnail()

getCatLinkList()

getTagLinkList()

欠席者対応：wireframe12