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( 'kiji' ); ?>>
  <!--投稿日・著者を表示-->
  <div class="kiji-info">
    <!--投稿日を取得-->
    <span class="kiji-date">
      <i class="fas fa-pencil-alt"></i>
      <time
      datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
      <?php echo get_the_date(); ?>
      </time>
    </span>
    <!--カテゴリ取得-->
    <?php if(has_category() ): ?>
    <span class="cat-data">
      <?php echo get_the_category_list( ' ' ); ?>
    </span>
    <?php endif; ?>
  </div>
  <!--タイトル-->
  <h1><?php the_title(); ?></h1>
  <!--アイキャッチ取得-->
  <?php if( has_post_thumbnail() ): ?>
  <div class="kiji-img">
    <?php the_post_thumbnail( 'large' ); ?>
  </div>
  <?php endif; ?>
  <!--本文取得-->
  <?php the_content(); ?>
  <!--タグ-->
  <div class="kiji-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; ?>

記事の情報を適切に呼び出すために、メインループで記事の内容を囲みます。一覧を出力する場合と違い繰り返しの処理をしないので『while(have_posts()):』の記述は必要ありません。

記事全体を囲う要素

<article <?php post_class( 'kiji' ); ?>>

~記事の内容~

</article>

記事であることを示すためHTMLの要素である『article』タグで記事の内容を囲んでください。

『<?php post_class( 'kiji' ); ?>』は、class名に『kiji+記事の情報』を出力するためのタグです。

投稿日とカテゴリ

<div class="kiji-info">
  <!--投稿日を取得-->
  <span class="kiji-date">
    <i class="fas fa-pencil-alt"></i>
    <time
    datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
    <?php echo get_the_date(); ?>
    </time>
  </span>
  <!--カテゴリ取得-->
  <?php if(has_category() ): ?>
  <span class="cat-data">
    <?php echo get_the_category_list( ' ' ); ?>
  </span>
  <?php endif; ?>
</div>

日付を呼び出す記述は、index.phpに記述したものと同じです。

カテゴリを取得するためのソースは、index.phpのときとは変更して、『<?php echo get_the_category_list( ' ' ); ?>』という記述をすることで、記事に設定されているカテゴリをリンク付きで呼び出すことができます。

タイトル

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

記事のタイトルは、メインタイトルであることを、クローラーに伝えるためh1タグで囲んで呼び出しましょう。

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

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

『?php the_post_thumbnail( 'large' );』でlargeサイズのサムネイル画像を呼び出します。また、サムネイル画像が無い場合は何も表示しないように『<?php if( has_post_thumbnail() ): ?>』で条件分岐をしておきましょう。

記事本文

<?php the_content(); ?>

記事本文を呼び出しています。

タグ一覧

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

記事に設定されているタグをリスト形式全て呼び出します。また、最初に『タグ:』という文字が入るようにリストの中に組込む設定を『('<ul><li>タグ: </li><li>','</li><li>','</li></ul>' )』で行なっています。

記事を出力するための要素は以上です。

要素がきちんと組み込まれていれば、上記の画像のように各要素が記事の中に出力されます。

記事のPC用デザインを整える

記事の出力を確認したら、CSSを追加していきましょう。まずは、パソコン表示のデザインから調整していきます。

style.cssに記述
.kiji {
  font-size: 1em;
  margin: 0;
  padding: 0 25px 25px;
}

.kiji-info .cat-data a {
  text-decoration: none;
  color: #fff;
}

.kiji-info .cat-data a:hover {
  opacity: .8;
}

.kiji-img {
  max-width: 640px;
  margin: 30px auto;
  text-align: center;
}


/*タグ*/

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

.kiji-tag ul {
  list-style: none;
}

.kiji-tag li {
  display: inline-block;
  color: #464646;
}

.kiji-tag li a {
  font-size: .8em;
  margin-right: 7px;
  padding: 2px 7px;
  text-decoration: none;
  color: #464646;
  border: solid 1px #464646;
  border-radius: 2px;
}

.kiji-tag li a:hover {
  opacity: .8;
}

.kiji p {
  margin-top: 0;
  margin-bottom: 30px;
}

.kiji h1 {
  font-size: 1.7em;
  margin: .3em 0;
}

.kiji h2 {
  font-size: 1.5em;
  margin-top: 3em;
  margin-bottom: 1.5em;
  padding: .4em 0;
  border-bottom: solid 5px #464646;
}

.kiji h3 {
  font-size: 1.35em;
  margin-top: 2.5em;
  margin-bottom: 1.5em;
  padding: 0 .5em;
  border-left: solid 5px #777777;
  background: transparent;
}

.kiji h4 {
  font-size: 1.2em;
  margin: 0 0 .3em;
}

.kiji h5 {
  font-size: 1.1em;
  margin: 0 0 .3em;
}

サンプルのCSSを記載していますが、記事は一番ユーザーに見られる部分なので、妥協せずに納得のいくまで調整してください。

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

記事のスマホ用デザインを整える

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

style.cssに記述
@media (max-width: 599px) {
  .kiji {
    font-size: 92%;
    padding: 0 10px 25px;
  }
  .kiji h1 {
    font-size: 1.3em;
  }
  .kiji h2 {
    font-size: 1.25em;
  }
  .kiji h3 {
    font-size: 1.2em;
  }
  .kiji h3:after {
    display: none;
  }
  .kiji h4 {
    font-size: 1.15em;
  }
  .kiji h5 {
    font-size: 1.1em;
  }
}

スマホ用のデザインは、文字のサイズがスマホで表示したときに適切になるように微調整をするだけです。タブレットでは、PC用のCSSで表示されるように『max-width: 599px』にフックポイントを設定しています。大きくデザインを変更したい場合は、CSSを調整してください。

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

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

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

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

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

page.phpの<contents>の中の記述
<div class="contents">
  <!--記事本文-->
  <?php if(have_posts()): the_post(); ?>
  <article <?php post_class( 'kiji' ); ?>>
    <!--タイトル-->
    <h1><?php the_title(); ?></h1>
    <!--本文取得-->
    <?php the_content(); ?>
  </article>
  <?php endif; ?>
</div>

contentsの中身はタイトルと記事本文だけというシンプルな構造で作成しています。必要に応じて要素を追加しましょう。

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

個別に固定ページ独自のCSSを反映させたいときは、『<?php post_class( 'kiji' ); ?>』の『kiji』の部分の名前を書き換えたり、独自のclass名を設定するなどして、デザインの設定を行なってください。

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

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

6.までで作成したテーマ ダウンロード