BLOG

自作WordPressテーマ『投稿記事ページ(シングルページ)』の作り方(コピペOK)

kanri
本記事はこんな方にオススメです
  • 自作(オリジナル)WordPressテーマを作成したいとお考えの方
  • 自作(オリジナル)WordPressテーマに投稿記事ページ(シングルページ)を追加したい方
  • WordPressを利用している or 利用予定 の方
  • Webデザイナーを目指している方

今回は、自作WordPressテーマの『投稿記事ページ(シングルページ)』作成方法について解説します。

本記事はHTMLとPHPの基礎がわかっている方向けの内容となります。

事前に静的(HTML・CSS)にコーディングしておくことをおすすめします。

自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください!

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】

WordPress投稿記事ページ(シングルページ)の作り方

早速、投稿記事ページ(シングルページ)を作っていきましょう。

1.投稿記事ページ用のファイルを用意する

投稿記事ページ(シングルページ)は、

single.php

というファイル名で作成します。

PHP形式でファイルを作成し、WordPressテーマフォルダ内に保存しましょう。

2.ヘッダー(get_header)とフッター(get_footer)を記載

1<?php get_header(); ?>
2<!-- ここにコンテンツを記載 -->
3<?php get_footer(); ?>

get_headerとget_footerを使い、ヘッダーとフッターを呼び出しましょう。

3.コンテンツを静的にコーディングし、ヘッダーとフッターの間に記載

1<?php get_header(); ?>
2<!-- #article -->
3  <section id="article">
4    <h2 class="ttl">ブログ</h2>
5    <div class="article-block">
6      <h1 class="article-ttl">記事タイトル</h1>
7      <p class="date">2023/00/00</p>
8      <p class="thumb">アイキャッチ画像</p>
9      <div class="txt">
10        記事本文
11      </div>
12    </div>
13    <!-- .nav-single -->
14    <nav class="nav-single">
15      <ul>
16        <li class="nav-previous">前の記事のタイトル</li>
17        <li class="nav-center">| <a href="">一覧に戻る</a> |</li>
18        <li class="nav-next">次の記事のタイトル</li>
19      </ul>
20    </nav>
21    <!-- /.nav-single --> 
22  </section>
23  <!-- /#article -->
24<?php get_footer(); ?>

上記2~23行目はサイトによって変わります。あくまで一例です。

4.投稿記事を表示するためのコードを記載

1    <?php while ( have_posts() ): the_post(); ?>
2    <div class="article-block">
3      <h1 class="article-ttl">記事タイトル</h1>
4      <p class="date">2023/00/00</p>
5      <p class="thumb">アイキャッチ画像</p>
6      <div class="txt">
7        記事本文
8      </div>
9    </div>
10   <?php endwhile; ?>

コードが見づらくならないように、ここからは、<div class=”article-block”>~</div>の部分だけ抜き出して解説していきます。

1行目と10行目にコードを追加し、<div class=”article-block”>~</div>をwhileで挟んでいます。

このコードは、「ループ」を作るためのコードです。

ループとは、投稿を表示するための繰り返し処理のことです。

えりー
えりー

ちょっと難しいので、投稿を表示するためにはこのコードが必要、とだけ覚えておけば大丈夫です。

5.タイトルと投稿日を出力する

1    <?php while ( have_posts() ): the_post(); ?>
2    <div class="article-block">
3      <h1 class="article-ttl"><?php the_title(); ?></h1>
4      <p class="date"><?php echo get_the_date('Y/m/d'); ?></p>
5      <p class="thumb">アイキャッチ画像</p>
6      <div class="txt">
7        記事本文
8      </div>
9    </div>
10   <?php endwhile; ?>

3行目のタイトルと、4行目の投稿日を変更しています。

タイトルは、the_title();

投稿日は、echo get_the_date();

で出力します。

ちなみにこれらは、WordPressのみで使える「テンプレートタグ」と呼ばれるタグです。

()の中の記述で出力される形式が変わります。

echo get_the_date(); → 2023年5月16日

echo get_the_date(‘Y/m/d’); → 2023/05/16

6.アイキャッチ画像を出力する

1    <?php while ( have_posts() ): the_post(); ?>
2    <div class="article-block">
3      <h1 class="article-ttl"><?php the_title(); ?></h1>
4      <p class="date"><?php echo get_the_date('Y/m/d'); ?></p>
5      <?php if (has_post_thumbnail()): ?>
6      <p class="thumb"><?php the_post_thumbnail('large'); ?></p>
7      <?php endif; ?>
8      <div class="txt">
9        記事本文
10      </div>
11    </div>
12   <?php endwhile; ?>

5~7行目を変更して、アイキャッチ画像を出力しています。

アイキャッチ画像は、the_post_thumbnail();で出力します。

( )内で画像のサイズを指定することができます。(上記例では大サイズ「large」と指定)

さらに、if文で「もしアイキャッチ画像があったら表示する(なかったら表示しない)」という条件を追加しています。

《画像サイズの設定方法》

画像サイズは[設定]-[メディア]で設定できます。

下記のように記載すると、それぞれのサイズの画像を出力することができます。

1the_post_thumbnail( 'thumbnail' ); // サムネイル
2the_post_thumbnail( 'medium' ); // 中サイズ
3the_post_thumbnail( 'large' ); // 大サイズ
4the_post_thumbnail( 'full' ); // フルサイズ

7.本文を出力する

1    <?php while ( have_posts() ): the_post(); ?>
2    <div class="article-block">
3      <h1 class="article-ttl"><?php the_title(); ?></h1>
4      <p class="date"><?php echo get_the_date('Y/m/d'); ?></p>
5      <?php if (has_post_thumbnail()): ?>
6      <p class="thumb"><?php the_post_thumbnail('large'); ?></p>
7      <?php endif; ?>
8      <div class="txt">
9        <?php the_content(); ?>
10      </div>
11    </div>
12   <?php endwhile; ?>

9行目を変更して、本文を出力しています。

本文は、the_content(); で出力します。

ここまでで、記事部分(<div class=”article-block”>~</div>)のコーディングは完了です。

ここまでで下記のようなコードになります。

1<?php get_header(); ?>
2<!-- #article -->
3  <section id="article">
4   <h2 class="ttl">ブログ</h2>
5   <?php while ( have_posts() ): the_post(); ?>
6    <div class="article-block">
7      <h1 class="article-ttl"><?php the_title(); ?></h1>
8      <p class="date"><?php echo get_the_date('Y/m/d'); ?></p>
9      <?php if (has_post_thumbnail()): ?>
10      <p class="thumb"><?php the_post_thumbnail('large'); ?></p>
11      <?php endif; ?>
12      <div class="txt">
13        <?php the_content(); ?>
14      </div>
15    </div>
16   <?php endwhile; ?>
17   <!-- .nav-single -->
18    <nav class="nav-single">
19      <ul>
20        <li class="nav-previous">前の記事のタイトル</li>
21        <li class="nav-center">| <a href="">一覧に戻る</a> |</li>
22        <li class="nav-next">次の記事のタイトル</li>
23      </ul>
24    </nav>
25   <!-- /.nav-single --> 
26  </section>
27  <!-- /#article -->
28<?php get_footer(); ?>

8.前の記事・次の記事を出力する

記事下に、前の記事・次の記事へのリンクを追加します。

上記コードの17~25行目をご覧ください。

この<nav class=”nav-single”>~</nav>の部分を下記のように変更します。

1<!-- .nav-single -->
2    <nav class="nav-single">
3      <ul>
4        <li class="nav-previous"><?php previous_post_link(); ?></li>
5        <li class="nav-center">| <a href="">一覧に戻る</a> |</li>
6        <li class="nav-next"><?php next_post_link(); ?></li>
7      </ul>
8    </nav>
9   <!-- /.nav-single --> 

4行目の前の記事へのリンク6行目の次の記事へのリンクの部分を変更しています。

前の記事へのリンクは、previous_post_link();

次の記事へのリンクは、next_post_link();

で出力することができます。

同カテゴリーの投稿記事のみ表示したい場合は、以下のように記載します。

1<?php previous_post_link('%link','%title', TURE); ?>
2<?php next_post_link('%link','%title', TURE); ?>

9.一覧ページのリンクを出力する

1<!-- .nav-single -->
2    <nav class="nav-single">
3      <ul>
4        <li class="nav-previous"><?php previous_post_link(); ?></li>
5        <li class="nav-center">| <a href="">一覧に戻る</a> |</li>
6        <li class="nav-next"><?php next_post_link(); ?></li>
7      </ul>
8    </nav>
9<!-- /.nav-single --> 

上記5行目「一覧に戻る」のリンクを、下記のように変更します。

1<!-- .nav-single -->
2    <nav class="nav-single">
3      <ul>
4        <li class="nav-previous"><?php previous_post_link(); ?></li>
5        <li class="nav-center">| <?php
6	       $cat = get_the_category(); //カテゴリ―を取得
7	       $cat_id = $cat[0]->cat_ID; //カテゴリーIDを取得
8	       $cat_link = get_category_link($cat_id); //取得したカテゴリーIDURLを取得
9        ?><a href="<?php echo $cat_link; ?>">一覧に戻る</a> |</li>
10        <li class="nav-next"><?php next_post_link(); ?></li>
11      </ul>
12    </nav>
13<!-- /.nav-single --> 

上記5~9行目が変更した部分です。

get_the_category(); …カテゴリ―の情報を取得
$cat_id = $cat[0]->cat_ID; …取得したカテゴリーのIDを取得
$cat_link = get_category_link($cat_id); …取得したカテゴリーIDのURLを取得

という意味ですが、ちょっと難しいのでまるまるコピペで使えばOKです。

完成形コード

1<?php get_header(); ?>
2<!-- #article -->
3  <section id="article">
4   <h2 class="ttl">ブログ</h2>
5   <?php while ( have_posts() ): the_post(); ?>
6    <div class="article-block">
7      <h1 class="article-ttl"><?php the_title(); ?></h1>
8      <p class="date"><?php echo get_the_date('Y/m/d'); ?></p>
9      <?php if (has_post_thumbnail()): ?>
10      <p class="thumb"><?php the_post_thumbnail('large'); ?></p>
11      <?php endif; ?>
12      <div class="txt">
13        <?php the_content(); ?>
14      </div>
15    </div>
16   <?php endwhile; ?>
17   <!-- .nav-single -->
18    <nav class="nav-single">
19      <ul>
20        <li class="nav-previous"><?php previous_post_link(); ?></li>
21        <li class="nav-center">| <?php
22	       $cat = get_the_category(); //カテゴリ―を取得
23	       $cat_id = $cat[0]->cat_ID; //カテゴリーIDを取得
24	       $cat_link = get_category_link($cat_id); //取得したカテゴリーIDURLを取得
25        ?><a href="<?php echo $cat_link; ?>">一覧に戻る</a> |</li>
26        <li class="nav-next"><?php next_post_link(); ?></li>
27      </ul>
28    </nav>
29   <!-- /.nav-single -->  
30  </section>
31  <!-- /#article -->
32<?php get_footer(); ?>
えりー
えりー

いきなりこのコードを見るとわけわからん状態だと思いますが、1個1個分解して考えれば、それほど難しくない…はず…

(補足)複数のシングルページを作りたい場合

カテゴリー毎にシングルページを変えたい場合は、single.phpで「このカテゴリーだったら、このファイルを使う」と指定してあげる必要があります。

具体的には、single.phpに下記のように記載します。

1<?php
2if (in_category('information')) {
3   include(TEMPLATEPATH . '/single-information.php');
4}
5elseif (in_category('blog')) {
6   include(TEMPLATEPATH . '/single-blog.php');
7}
8elseif (in_category('recruit')) {
9   include(TEMPLATEPATH . '/single-recruit.php');
10}
11?>

2~3行目は、「もしinformationというカテゴリーだったら、single-information.phpを表示してね」という意味です。

4行目以降も、カテゴリー名が違うだけで、意味は同じです。

えりー
えりー

カテゴリー名はサイトにあわせて変更してくださいね

あとは、それぞれのカテゴリーのシングルページを用意してあげるだけでOK!

上記例の場合なら、single-information.php、single-blog.php、single-recruit.phpを用意する必要があります。

最後に:WordPressについてのご相談もお気軽にどうぞ!

空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方、Webデザイナーになりたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】
ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです!
記事URLをコピーしました