6.WordPressブログの要!!記事を表示するsingle.phpとpage.phpを作成する

single.phpは、『投稿ページ』を出力する際に参照されるブログの要とも言える重要なテンプレートです。

WordPressでは、single.phpに要素を追加することで、投稿の本文を初めとしてカテゴリや投稿日・タグ・アイキャッチ画像など、投稿ごとに設定されている様々な情報を自由に出力することができます。

ブログの見やすさを考えつつ、表示したい投稿の情報を自由にレイアウトして、あなただけの記事ページを作成しましょう。

WordPressテーマ作成6では、WordPressテーマの中で一番重要だと言っても過言ではないsingle.phpの基本的な作成方法をご紹介します。

※本記事は、基本的なsingle.phpの作成方法についてご紹介しています。SNSボタンや関連記事・広告などを出力する方法は、別途個別にご紹介しておりますので、カテゴリ『WPカスタマイズ』を参照してください。

投稿の要素を出力する

今回は、最もスタンダードな『タイトル』『投稿日』『カテゴリ』『投稿の著者』『コンテンツ』『タグ』で構成されている投稿ページを作成します。

まずは、『single.php』に投稿を出力するためのソースコードを追加しましょう。

single.phpのcontentsの下に記述

<?php if(have_posts()): the_post(); ?>
<article <?php post_class( 'article-content' ); ?>>
  <div class="article-info">
    <!--カテゴリ取得-->
    <?php if(has_category() ): ?>
    <span class="cat-data">
      <?php echo get_the_category_list( ' ' ); ?>
    </span>
    <?php endif; ?>
    <!--投稿日を取得-->
    <span class="article-date">
      <i class="far fa-clock"></i>
      <time
      datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
      <?php echo get_the_date(); ?>
      </time>
    </span>
    <!--著者を取得-->
    <span class="article-author">
      <i class="fas fa-user"></i><?php the_author(); ?>
    </span>
  </div>
  <!--タイトル-->
  <h1><?php the_title(); ?></h1>
  <!--アイキャッチ取得-->
  <div class="article-img">
    <?php if( has_post_thumbnail() ): ?>
      <?php the_post_thumbnail( 'large' ); ?>
    <?php endif; ?>
  </div>
  <!--本文取得-->
  <?php the_content(); ?>
  <!--タグ-->
  <div class="article-tag">
    <?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'
  ); ?>
  </div>
</article>
<?php endif; ?>

上記のソースを追加することで、『タイトル』『投稿日』『カテゴリ』『投稿の著者』『コンテンツ』『タグ』のコンテンツを出力することができます。『single.php』に出力する一つ一つの要素は下記の通りです。

single.phpを構成する各要素

メインループ

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

～ループの内容～

<?php endif; ?>

投稿の情報をリクエストされたURLに応じて自動で呼び出すためにメインループを使用します。

投稿全体を囲う要素

<article <?php post_class( 'article-content' ); ?>>

～記事の内容～

</article>

htmlのarticle要素で括り『<?php post_class( 'article-content' ); ?>』で『article-content+各投稿の情報』をclass属性として追加します。

カテゴリ

<?php if(has_category() ): ?>
<span class="cat-data">
  <?php echo get_the_category_list( ' ' ); ?>
</span>
<?php endif; ?>

カテゴリを取得するためのソースは、index.phpのときとは変更して、『<?php echo get_the_category_list( ' ' ); ?>』という関数を使い、該当の投稿に設定しているカテゴリをリンク付きで出力しています。

投稿日

<span class="article-date">
  <i class="far fa-clock"></i>
  <time
  datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
  <?php echo get_the_date(); ?>
  </time>
</span>

投稿日は、index.phpで呼び出したときと同じように『<?php echo get_the_date( '' ); ?>』で呼び出します。表示形式を変更したい場合は、管理画面の『設定』→『一般』→『日付のフォーマット』を変更するか、関数の引数に任意の日付のフォーマットを入力しましょう。

今回は、検索エンジンに構造として日付を伝える『datetime=""』の中で使う場合は、引数『Y-m-d』を入れて出力を個別に指定し、文字列として出力する場合は、管理画面の設定が反映されるように空欄にしています。

著者

<span class="article-author">
  <i class="fas fa-user"></i><?php the_author(); ?>
</span>

著者は、index.phpで呼び出したときと同じく、『<?php the_author(); ?>』で出力します。著者名のデフォルトは、WordPressのユーザーIDと同じになっているため、必ず『管理画面 > ユーザー』から『ニックネーム』とブログ上の表示名を変更しておきましょう。

投稿のタイトル

<h1><?php the_title(); ?></h1>

投稿のタイトルは、『<?php the_title(); ?>』というWordPress関数で出力します。

サムネイル(アイキャッチ)画像

<div class="article-img">
  <?php if( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail( 'large' ); ?>
  <?php endif; ?>
</div>

本文の前に、サムネイル(アイキャッチ)画像を自動出力する場合、『<?php the_post_thumbnail( 'large' ); ?>』というWordPress関数で出力できます。この関数を使用するとimgタグ付き(<img src="～">)でソースが出力されます。

また、この関数は投稿自体にサムネイル(アイキャッチ)画像が設定されている場合のみ実行させたいので、『<?php if( has_post_thumbnail() ): ?>』でサムネイル画像が設定されているかどうかの条件分岐を行いましょう。

投稿の本文

<?php the_content(); ?>

投稿の本文は、『<?php the_content(); ?>』というWordPress関数で取得、出力することができます。

この『<?php the_content(); ?>』は、ユーザーが管理画面で編集した投稿の内容に自動補正(<p>などを追加)を行い出力する関数です。自動補正をせずに、エディタで編集した内容をそのまま出力したい場合は、『<?php echo get_the_content(); ?>』というWordPress関数を使用して出力してください。

タグ一覧

<div class="article-tag">
  <?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'
); ?>
</div>

投稿に設定されているタグは、『<?php the_tags(); ?>』というWordPress関数を使い、アーカイブへのリンク付きで全て出力します。

『the_tags()』関数は、引数で同時に前後とタグとタグの間に出力する文字列を指定することができます。『the_tags('タグの一覧の前に出力する文字列','タグとタグの間に出力する文字列','タグの一覧の後に出力する文字列')』

今回は、タグをリスト形式で出力するように引数を指定しています。

投稿を出力するための基本的な要素の説明は以上です。自分がデザインした順番に合わせて出力する内容や順番を自由に変更して調整しましょう。

要素がきちんと出力されたら、上記のように投稿ページに『single.php』に記述した要素が出力されます。

投稿の各デバイスごとのデザインをCSSで反映する

投稿の出力を確認したら、CSSを追加していきましょう。

投稿のパソコン表示用のデザイン

まずは、パソコン表示用のCSSから整えていきます。

style.cssに記述

.article-content {
  margin-bottom: 2rem;
}

.article-content .article-info {
  margin-bottom: .5rem;
}

.article-content .cat-data a {
  font-size: .8rem;
  margin-right: .5rem;
  padding: .1rem .5rem;
  text-decoration: none;
  color: #fff;
  background-color: #03162f;
}

.article-content .article-info .article-date,
.article-content .article-info .article-author {
  font-size: .8rem;
  display: inline-block;
  margin-right: .5rem;
  color: #888;
}

.article-content .article-info .article-author i {
  margin-right: .3rem;
}

.article-content p,
.article-content b,
.article-content table,
.article-content ul,
.article-content ol {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 1px;
}

.article-content p,
.article-content img,
.article-content table,
.article-content ul,
.article-content ol {
  margin-bottom: 2rem;
}

.article-content h1 {
  font-size: 1.9rem;
  margin: 0 0 2rem;
  letter-spacing: 1px;
}

.article-content h2 {
  font-size: 1.7rem;
  margin: 3rem 0 2rem;
  padding: .4rem 0;
  letter-spacing: 1px;
  border-bottom: solid 5px #03162f;
}

.article-content h3 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1.8rem;
  padding: 0 1rem;
  letter-spacing: 1px;
  border-left: solid 7px #415671;
  background: transparent;
}

.article-content h4 {
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
  letter-spacing: 1px;
}

.article-content h5 {
  font-size: 1.1rem;
  margin: 0 0 .3rem;
  letter-spacing: 1px;
}

.article-content .article-img {
  margin-bottom: 2rem;
}

.article-content .article-img img {
  display: block;
  margin: 0 auto;
}

.article-content ul {
  margin-left: 2rem;
  list-style: disc;
}

.article-content ol {
  margin-left: 2rem;
  list-style: decimal;
}

.article-content table {
  border-collapse: collapse;
}

.article-content th,
.article-content td {
  padding: .6rem;
  vertical-align: middle;
  border: 1px solid #ddd;
}

.article-content figure {
  max-width: 100%;
}

.article-tag {
  text-align: right;
}

.article-tag ul {
  font-size: 0;
  margin-bottom: 0;
}

.article-tag ul li {
  font-size: .9rem;
  display: inline-block;
  margin-right: .5rem;
  vertical-align: middle;
}

.article-tag ul li:last-child {
  margin-right: 0;
}

.article-tag ul li a {
  padding: .2rem .5rem;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
}

.article-tag ul li a:hover {
  opacity: .6;
}

投稿のCSSを記述するときは、『single.php』に記述した要素に加え、投稿を編集する際に使うであろうタグも一緒にデザインを追加しておきましょう。投稿は一番ユーザーに見られる部分なので、妥協せずに納得のいくまで調整してください。

デモのCSSをそのまま記述して表示すると、上の画像のようなデザインになります。PC用のベースとなるデザインが整ったら、『@media』を使って各デバイスの表示を整えていきましょう。

投稿一覧のスマホ表示用デザイン

スマートフォン用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ版の表示を確認しながら調整します。

style.cssに記述

@media(max-width: 600px) {
  .article-content h1 {
    font-size: 1.6rem;
  }

  .article-content h2 {
    font-size: 1.4rem;
  }

  .article-content h3 {
    font-size: 1.3rem;
  }

  .article-content h4 {
    font-size: 1.2rem;
  }
}

今回は、文字のサイズがスマホで表示したときに適切になるように微調整をするだけにしています。

上記のCSSをそのまま記述するとスマートフォンでは上記の画像のように表示されます。

以上で、single.phpの基本的な作成は完了です。SNSボタンや関連記事・広告を出力する場合は、各要素を好きな位置に追加していきましょう。

固定ページ用のpage.phpを作成する

投稿ページを作成したら、single.phpとは別に固定ページ専用のテンプレートを作成する必要があります。『single.php』をそのままコピーして『page.php』という名前のテンプレートをWordPressのテーマ内に作成しましょう。

single.phpを複製してpage.phpを作成したら、固定ページを表示する際に必要のない物を省いていきます。固定ページは、お問合せページやプライバシーページなどを作成するときに使用する場合が多いページなので、『サムネイル』『投稿日』『カテゴリ』『投稿の著者』『タグ』などの流動的な情報を省きましょう。

page.phpの<contents>の中の記述を変更

<?php if(have_posts()): the_post(); ?>
<article <?php post_class( 'article-content' ); ?>>
  <!--タイトル-->
  <h1><?php the_title(); ?></h1>
  <!--本文取得-->
  <?php the_content(); ?>
  <!--タグ-->
  <div class="article-tag">
    <?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'
  ); ?>
  </div>
</article>
<?php endif; ?>

今回は、タイトルと記事本文だけというシンプルな構造で作成しています。必要に応じて要素を追加してください。

page.phpはソースコードをsingle.phpと共有しているので、CSSの記述は特に必要ありません。

個別に固定ページ独自のCSSを反映させたいときは、『<?php post_class( 'article-content' ); ?>』の『article-content』の部分の名前を別の名前に書き換えたり、独自のclass名を設定するなどして、投稿の記事用のCSSが固定ページに反映されないようにしてください。

以上で、WordPressテーマの基本的な『single.php』と『page.php』の作成は完了です。次回は、検索エンジンやSNS拡散する際に、正確な情報を伝えるためのheadタグの中身を作成していきましょう。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。