2023.05.30 2024.04.30

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

kanri

本記事はこんな方にオススメです

自作（オリジナル）WordPressテーマを作成したいとお考えの方
自作（オリジナル）WordPressテーマに投稿記事ページ（シングルページ）を追加したい方
WordPressを利用している or 利用予定の方
Webデザイナーを目指している方

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

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

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

自作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＞の部分だけ抜き出して解説していきます。

１行目と１０行目にコードを追加し、＜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; ?>

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

タイトルは、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; ?>

５～７行目を変更して、アイキャッチ画像を出力しています。

アイキャッチ画像は、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; ?>

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

本文は、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 -->

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

前の記事へのリンクは、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 -->

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

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); //取得したカテゴリーIDのURLを取得
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 -->

上記５～９行目が変更した部分です。

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); //取得したカテゴリーIDのURLを取得
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(); ?>

えりー

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

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

カテゴリー毎にシングルページを変えたい場合は、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～３行目は、「もしinformationというカテゴリーだったら、single-information.phpを表示してね」という意味です。

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

えりー

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

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

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

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

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

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

お問い合わせ