Learning site for website creation

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

  • 投稿日:2018年11月06日
  • 更新日:2018年11月07日

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

front-page.php フロントページ表示用テンプレート
home.php 主に固定ページの上にあるブログ投稿一覧表示用テンプレート
single.php 投稿詳細ページ表示用テンプレート
page.php 固定ページ表示用テンプレート
archive.php アーカイブ一覧全般表示用テンプレート
category.php カテゴリー一覧表示用テンプレート
tag.php タグ一覧表示用テンプレート
search.php 検索結果一覧表示用テンプレート
date.php 日付別一覧表示用テンプレート
404.php 404エラー表示用テンプレート
searchform.php 検索フォーム用テンプレート
comments.php コメント用テンプレート

「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