個別記事ページを作成する[single.php][WordPress]

テーマを一から作成する　第5回目

前回はフロントページ（ブログのトップページ）にて、投稿した記事一覧ページを作成しました。今回は一覧ページではなく、個別記事のページを作成します。

第4回目

投稿記事一覧を表示させる[ループ]

個別記事ページを表示させるテンプレートは以下の4つありますが、今回はsingle.phpを利用します。

関連ページ

個別記事ページのテンプレート階層[single-投稿タイプ.php]

1　single-投稿タイプ名.php
2　single.php
3　singular.php
4　index.php

今回作成する個別記事ページの構成は、基本的にindex.phpと変わりません。

indexを分割

まずはsingle.phpテンプレートを作成し、テーマディレクトリ（/wp-content/themes/sample/以下）にアップロードして下さい。外観＞テーマの編集　で見てみると個別投稿として認識されていることが分かります。

個別投稿

single.phpが用意できたら、下記のコードを記述して下さい。

<?php get_header(); ?>

<main>

<?php if(have_posts()): while(have_posts()):the_post(); ?>
  
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  
  <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
  <p><?php the_category(', '); ?></p>
  <p><?php the_content('Read more'); ?></p>
  
<?php endwhile; endif; ?>
  
<?php previous_post_link('%link','古い記事へ'); ?>
<?php next_post_link('%link','新しい記事へ'); ?>

</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<main>

<?php if(have_posts()): while(have_posts()):the_post(); ?>

<?php endwhile; endif; ?>

<?php previous_post_link('%link','古い記事へ'); ?>

<?php next_post_link('%link','新しい記事へ'); ?>

</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

基本的にindex.phpと変わりませんが、ページ送りの部分だけタグに変更があります。個別記事ページ（single.php等）で利用するページ送りのための previous_post_link とnext_post_link タグは、記事一覧ページで利用されるprevious_posts_link とnext_posts_link タグとは別のタグです。postの後にsがあるかないかの違いです。

追記

本記事の趣旨と関係ありませんが、どのページにおいてもトップページに戻れるようにヘッダー部分を変更しておきました。ブログのタイトルにリンクが貼ってあります。

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php wp_head(); ?>
</head>

<body>
<header>
  <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
</header>