【WordPress】自作テーマを作成する方法

本記事では、WordPressテーマを自作する方法を解説します。WordPressには様々な機能がありますが、自作テーマ作成に必要な知識をコンパクトにまとめてお伝えします。

本記事では、以下の画像のような WordPressテーマを自作します。

Contents

WordPressテーマ自作までの道筋
WordPressテーマを作るとはどういうことか
- 自作テーマに必須知識である「テンプレート階層」
- 自作テーマで作成するファイル
テーマ自作のチュートリアル
WordPressテーマの自作：おさらい

WordPressテーマ自作までの道筋

WordPressのテーマを自分で作るためには、以下の手順を踏みます。

HTMLとCSSでレイアウトを作る
HTMLファイルをテンプレート化する（phpに直す）
ファイル一式を一つのフォルダにまとめる
themesディレクトリにアップロードする

本記事では、これらを実践しながら理解します。

WordPressテーマを作るとはどういうことか

WordPressでテーマとして認識されるには、テンプレートファイルをまとめたフォルダ（テーマ）を、themesというフォルダにアップロードする必要があります。
簡単にいうと、index.phpとstyle.cssが存在するフォルダをthemesディレクトリにアップロードすれば、それがテーマとして認識されます。

themesディレクトリは、WordPressがインストールされているディレクトリの「wp-content」の中に存在しています。

「テーマを自作する」とは、そのindex.phpやstyle.cssを自分で作るということです。

しかし、index.phpとstyle.cssは、テーマとして認識されるための最低限必要なファイルであり、実際にテーマを作るときはもっと多くのファイルを作成します。

自作テーマに必須知識である「テンプレート階層」

index.phpだけでもテーマを作ることは可能です。ところが、ウェブサイトというのは目的に応じて様々な種類のページが存在するもので、その種類に対応するphpファイルを作ります。
例えば、ホームページ、ブログ記事を表示するページ、固定ページを表示するページ、アーカイブページなどです。そして、WordPressでは、種類に応じてあらかじめ決められた名前のphpファイルを作ります。

phpファイルといっても、WordPressのテーマを作成するのにphpをマスターする必要がありません。WordPress特有の関数をちょっと覚えるだけなので。

WordPressでは、Webページの種類に応じてphpファイルを複数作ります。例えば次のように役割分担をさせます。

ホームページ・・・front-page.php
記事ページ・・・single.php
固定ページ・・・page.php

ファイル名は勝手につけてはなりません。WordPressの「テンプレート階層」というルールに従ってファイルの名前をつける必要があります。
そして、それらのファイルのことをテンプレートといいます。

さらに詳しく：【WordPress】テンプレートやテンプレート階層とは何か？

テンプレート階層の詳しいルールは、こちらのサイトの図が大変参考になります。ぜひ一読をお勧めします。

自作テーマで作成するファイル

テンプレートの種類はたくさんあります。全て覚えれば複雑な構造のWebサイトも作ることができますが、基本的なWebサイトであればちょっと覚えるだけで良いです。

以下の表はこのチュートリアルで紹介するテンプレートです。簡単なブログサイトを構築します。

Webページの種類	テンプレート	説明
ホームページ	front-page.php	ウェブサイトのホームページ。ドメインそのものにアクセスした時に表示されるページ用のテンプレート
投稿ページ	single.php	ブログとして、日々更新するページ用のテンプレート
固定ページ	page.php	「お問い合わせ」や「サイトの説明」ページなど常に変わらないページを作るためのテンプレート
アーカイブページ	index.php	カテゴリー別の記事一覧や月別ごとのアーカイブを表示するためのテンプレートとして、index.phpを使用。index.phpはテーマの中に必ず存在しなければならない。
ヘッダー	header.php	全ページに共通するサイトの上部（メニューバーとかサイトロゴとか）を部品化するテンプレート。他のテンプレートで読み込む。
フッター	footer.php	全ページに共通するサイトの下部（コピーライトとか）を部品化するテンプレート。他のテンプレートで読み込む。
サイドバー	sidebar.php	全ページに共通するサイトの横部分（ウィジェット的な）を部品化するテンプレート。他のテンプレートで読み込む。
404エラーページ	404.php	404エラー（探しているページがなかった場合のエラー）の時に表示するためのテンプレート
各種設定ページ	functions.php	テーマのあらゆる設定をphpで記述するためのテンプレート

本記事で紹介するテンプレート階層

何度も言うようですが、これらのテンプレートとstyle.cssを一つにしたフォルダを「themes」フォルダにアップロードすると、テーマとして認識されます。

テーマ自作のチュートリアル

概要を掴んだところで、実際に作ってみましょう。

ところで、テーマを作る時、「テンプレートを作成」→「サーバーにアップロード」→「見た目を確認」の流れをいちいちしていては埒が明かないので、ローカル環境（つまり自分のPC環境）でWordPressをインストールし、サーバーを構築して、テンプレートファイルを変更し、作成した瞬間すぐに見た目の方の確認をできるようにする必要があります。

ただ、ローカル環境を自分で構築するのは、大変骨の折れることです。そこで役に立つのが、「Local」というソフトウェアです。WordPressのインストール、サーバーの構築、データベースの構築などを全てやってくれます。今回はこの「Local」を使いながら開発していきます。

ローカルでの開発管環境を整える

この章では下準備をします。ゴールは「Hello WordPress」を表示させるテーマを作ることです。

WordPressをインストールし、サーバーを立ち上げる
WordPressの管理画面とサイトを確認
テーマフォルダを作成し、エディターで開く

参考：【Local】自分のPCでサーバーを立てて、WordPress開発をする

参考の記事を見ながら、Localをインストールして、WordPressをインストールしてください。

次に、サーバーを起動します。

WordPress_ローカル環境_サーバー起動 — WordPressのサーバーを起動する

さらに、右上の「ADMIN」ボタンでWordPressの管理画面が開き、「OPEN SITE」ボタンでウェブサイトが開きます。

次に、「themes」ディレクトリにテーマフォルダを作成しましょう。

まずは、そのディレクトリに到達する必要があります。まずはサイトのフォルダに移動します。

次に、「app」-> 「public」-> 「wp-content」-> 「themes」とテーマディレクトリに辿り着きましょう。

wordpress_自作テーマ_フォルダの場所 — themesフォルダの存在場所

「twentynineteen」や「twentytwenty」などはWordPressが用意しているデフォルトのテーマです。同じ階層に空のフォルダを作りましょう。私は「sample-site」というフォルダを作成します。

この時点では「sample-site」はまだテーマとして認識されていません。次はここに「index.php」と「style.css」を作成します。
そのために、作成した「sample-site」ディレクトリをテキストエディタで開きましょう。（おすすめはVisual Studio Code）

このフォルダの中に「index.php」と「style.css」を作成して、次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello WordPress</h1>
</body>
</html>

/* 
Theme Name: Sample
Theme URI: http://example.com
Description: 私の初めてのテーマです
Version: 1.0
Auther: DOKUPRO
Auther URI: https://doku-pro.com
*/

style.cssにこのようにコメント形式でこれらの項目を入力することで、テーマ名、テーマの作者などをWordPressが認識できるようになります。

次にテーマを適応するために、管理画面に入ります。Localの「ADMIN」ボタンから管理画面に入ります。（この時、最初に設定したユーザー名とパスワードが必要になります。）

デフォルトでは英語になっている場合は、「Settings」-> 「Site Language」から日本語を選択して「Save Changes」をクリックすると日本語になります。

次に、左側のメニューバーから「外観」を選択し、「Sample」がテーマとして認識されていることを確認したら「有効化」します。

これで、自作テーマが適応されました。Localの「OPEN SITE」ボタンからウェブサイトとしての表示を確認すると、「Hello WordPress」という文字が確認できるはずです。

functions.phpで機能を有効化

functions.phpにアイキャッチ画像などの機能を有効化するphpを書きます。

テーマディレクトリ（sample-site）にfunctions.phpというファイルを作成して、次のようにphpを書きましょう。

<?php
add_theme_support('post-thumbnails'); // アイキャッチ画像の有効化
add_theme_support('menus'); //管理画面で「外観」->「メニュー」を使えるようにする
add_theme_support('wp-block-styles'); //テーマをブロックエディタに対応させる
?>

add_theme_support()関数は、テーマに対して機能を追加するための WordPress関数です。アイキャッチ画像（サムネイル）も、この記述がないと有効になりません。

また、後ほど紹介するメニュー機能も、「add_theme_support(‘menus’);」によって有効化されます。管理画面から簡単にメニューを管理することができるようになります。

また、Gutenbergと言われるブロックエディタのスタイルをテーマで使えるようにするために、「add_theme_support(‘wp-block-styles’);」を記述します。

ヘッダーを作る（header.php）

まず、サイト全体にわたって共有するパーツであるヘッダーから作ります。

これらの作業に移る前に、投稿記事を10件、固定ページを2件、管理画面から作成してください（もちろん適当でOK）。投稿記事を書くとき、カテゴリーとアイキャッチ画像を設定するのをお忘れなく。

そうしたら、テーマディレクトリに「header.php」というファイルを作成してください。

ヘッダーの役割は以下の３点とします。

CSSの読み込み
タイトルの出力（SEO対策）
メニューを表示する

header.phpを作る前に、管理画面でメニューを表示するための作業をします。

まず、管理画面の「外観」-> 「メニュー」から「global-navigation」というメニューを作成してください。

次に、メニューにカテゴリーなどの項目を追加します。

カテゴリーと固定ページを追加してください。そうすることで、ヘッダーなどに表示するためのメニューを作成することができます。

さて、いよいよheader.phpを書いていきます。

以下header.phpです。（時間を短縮したい場合はコピペしてください。）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- リセットCSS（どのブラウザでも同じように表示させるための設定）を読み込む -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/reset.css">
    <!-- 自分で作ったCSSを読み込む -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    <!-- 適切なタイトルをWordPressが自動で表示してくれる -->
    <title><?php wp_title(); ?></title>
    <!-- ワードプレスのツールバーなどの機能やプラグインを適切に読み込むための設定 -->
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div class="site-title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></div>
        <div class="global-nav">
            <?php
                $args = array(
                'menu'=>'global-navigation',
                'container'=>false,//ulタグの上のdivタグを削除
                );
                wp_nav_menu($args);
            ?>
        </div>
    </header>

HTMLを書き慣れた人は、すぐに馴染むことができると思います。大切なポイントが４つあります。

phpは『<?php 』と『?>』で囲む
『echo template_directory_uri();』はテーマのディレクトリを表示する
『wp_head(); 』は WordPressの諸機能を有効化するために絶対に記述（後述の『wp_footer();』とセット）
『echo home_url();』はホームページのURLを出力
『bloginfo(‘name’);』はテンプレートタグの一種で、サイト名を出力
『wp_nav_menu($args);』はテンプレートタグの一種で、設定したメニューを出力する

６に関しては、先ほど管理画面で設定したメニューを表示する記述です。テンプレートタグは WordPressの用意している関数で、いろんな表示を出力するための重要なものです。今後テンプレートタグは乱用していくので、しっかりと覚えてください。

テンプレートタグに関しては、こちらの記事に詳細を書いています。

wp_nav_menu($args)は配列でオプションを色々設定できます。『’menu’=>’global-navigation’,』では先ほど作った『global-nabigation』というメニューを表示する、という意味です。『’container’=>false,』は、リストで表示されるメニューをdivタグで囲むかどうかの記述です。ここではfalseとしてdivタグで囲まないようにしています。

ここで、先ほど作った『style.css』に次の記述をしてください。

/*　共通設定 */
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    color: black;
    text-decoration: none;
    transition: color 0.5s;
}
a:hover {
    color: gray;
    text-decoration: none;
}

/*　ヘッダーのスタイル */
.site-title {
    font-size: 1.5rem;
    box-shadow: 0 0 10px rgb(177, 177, 177);
    text-align: center;
}

.global-nav {
    margin-top: 15px;
}
.global-nav ul {
    display: flex;
    justify-content: center;
}
.global-nav li {
    list-style: none;
    border-right: gray solid 1px;
    width: 200px;
    text-align: center;
}
.global-nav li:last-child {
    border-right: none;
}
.global-nav a {
    color: gray;
    font-size: 1.3rem;
}

今回は WordPressのチュートリアルなので、CSSの解説は控えさせていただきます。

ここで、もう一つ、リセットCSSを作成しましょう。これはGoogle ChromeやFireFox, Safariなどで同じ表示をさせるためにCSSの設定をリセットするものです。（詳しくは『リセットCSS』でググってください。）
『reset.css』をテーマディレクトリに作成し、以下のCSSをコピペしてください。

/*!
 * Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}

フッターを作る（footer.php）

次にfooter.phpを作ります。フッターもウェブサイト全体に渡って共有するパーツです。
フッターには次の３点を盛り込みます。

コピーライトを記述
サイト名を記述
『wp_footer();』を記述

テーマディレクトリに『footer.php』を作成して、以下のようにコードを記述してください。

<footer>
    <div class="footer_title">
        <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
    </div>
    <small>© 2021 Sample. All right reserved</small>
</footer>
<?php wp_footer(); ?>
</body>
</html>

ここでbodyタグの直前に『wp_footer();』を記述するのを忘れないでください。これは先ほどの『wp_head();』とセットで必ず記述するものです。

CSSは次のものをコピペして、style.cssに追記してください。

footer {
    height: 200px;
    background-color: rgb(196, 196, 196);
    padding-top: 70px;
}
footer .footer_title {
    font-size: 1.5rem;
    text-align: center;
}
footer small {
    display: block;
    font-size: 1rem;
    text-align: center;
}

サイドバーを作る（sidebar.php）

サイドバーも共有パーツです。

サイドバーにはカテゴリー別記事へのリンクとアーカイブ（月別）記事へのリンクを出力します。

テーマフォルダにsidebar.phpを追加してください。

そこに次の記述をします。

<aside>
    <div class="list_title">カテゴリー</div>
    <ul class="archive_list">
        <?php
        $args = array(
            'title_li'=>'',//見出しを削除
        );
        wp_list_categories($args);
        ?>                                               
    </ul>
    <div class="list_title">アーカイブ</div>
    <ul class="archive_list">
        <?php
        $args = array(
            'type'=>'monthly', //月別アーカイブ
        );
        wp_get_archives($args);
        ?>
    </ul>
</aside>

ここで重要なのは『wp_list_categories();』と『wp_get_archives(); 』のテンプレートタグです。それぞれ引数に配列のオプションを持つことができます。
・wp_list_categories();についてもっと詳しく
 ・wp_get_archives(); についてもっと詳しく

スタイルを整えるために、以下のCSSをstyle.cssに追記してください。

aside {
    padding-top: 50px;
}
aside .list_title {
    font-size: 1.2rem;
}
aside .archive_list {
    margin: 10px 0;
}
aside li {
    border-bottom: rgb(179, 179, 179) 1px solid;
    width: 150px;
    margin: 10px 0;
}
aside a {
    color: gray;
}

HOMEページを作る（front-page.php）

この章から本格的にテーマを作り込んでいきます。まずはホームページから。
本チュートリアルではホームページに次のような項目を表示させましょう。

ヘッダー（サイトタイトルとグローバルメニュー）
新着記事10件
サイドバー（カテゴリーと月別アーカイブ）
フッター（サイトタイトル等）

HOMEページの完成図はこんな感じです。

テーマフォルダにfront-page.phpを追加して、以下のphpを書いてください。

<!-- ヘッダーの読み込み -->
<?php get_header(); ?>
    <div class="grid">
        <main>
            <div class="news">新着記事</div>
            <!-- ワードプレスループ -->
            <?php if(have_posts()): while(have_posts()): the_post(); ?>
            <div class="card">
                <div class="left">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                </div>
                <div class="right">
                    <a href="<?php the_permalink(); ?>">
                        <h2 class="title"><?php the_title(); ?></h2>
                    </a>
                    <p><?php the_excerpt(); ?></p>
                </div>
            </div>
            <?php endwhile; endif; ?>

        </main>
        <!-- サイドバーの読み込み -->
        <?php get_sidebar(); ?>
    </div>
<!-- フッターの読み込み -->
<?php get_footer(); ?>

ここで大切な要素は３点あります。

ヘッダーなどの部品を読み込むテンプレートタグ
ワードプレスループ
ループの中で使用するテンプレートタグ

『 get_header(); 』『 get_sidebar(); 』『 get_footer(); 』はそれぞれ『ヘッダー』『サイドバー』『フッター』を読み込んでいます。先ほどWebサイト全体で共有する部品として作ったアレです。

また、ワードプレスループは、条件に合う記事を複数出力してくれます。デフォルトでは10件表示されるようになっています。front-page.phpでループを書くと、条件は自動的に『投稿記事の新しいものから順に10件』と決まります。
ループを書くときのルールは、以下の通りです。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
　　<!-- ここに繰り返し表示したい記事の記述をする -->
<?php endwhile; endif; ?>

また、このループの中で使えるテンプレートタグは以下の通りです。

the_permalink();・・・記事へのリンク
the_title();・・・記事のタイトル
the_time();・・・記事の作成日時
the_post_thumbnail();・・・記事のサムネイル（アイキャッチ）
the_excerpt();・・・記事の抜粋

それぞれの記事に対応する属性を出力してくれるのがこれらのテンプレートタグです。

それでは見た目を整えるために次のCSSをstyle.cssに追記（コピペ）してください。

.news {
    font-size: 1.2rem;
    text-align: center;
}
.card {
    display: flex;
    flex-direction: row;
    width: 600px;
    height: 180px;
    margin: 30px auto;
}
.left {
    width: 40%;
}
.left img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.right {
    width: 60%;
}
.right a {
    text-decoration: none;
    color: black;
    transition: color 0.5s;
}
.right a:hover {
    color: gray;
}
h2.title {
    margin: 0 0 10px 10px;
    font-size: 1.1rem;
}
.right p {
    color: gray;
    font-size: 0.9rem;
    margin-left: 10px;
}

.grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

これで一度ウェブサイトの見た目の方を確認してみてください。先ほど載せたHOMEページの完成図のようになっているはずです。

投稿ページを作る（single.php）

次に投稿ページを作りましょう。『新着記事』のブログカードをクリックしたときに遷移するページです。

まずはテーマのフォルダに『single.php』を作成してください。

次に、記事を出力するためのphpを書きます。

<!-- ヘッダーを取り込む -->
<?php get_header(); ?>
<div class="grid">
    <main class="single-main">
        <!-- ワードプレスループ -->
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div class="page-info">
            <!-- サムネイルの出力 -->
            <?php the_post_thumbnail(); ?>
            <!-- タイトルの出力 -->
            <h1><?php the_title(); ?></h1>
            <!-- 作成日時の出力 -->
            <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y/m/d'); ?></time>
        </div>
        <article>
            <!-- 記事の出力 -->
            <?php the_content(); ?>
        </article>
        <?php endwhile; endif; ?>
    </main>
    <!-- サイドバーを取り込む -->
    <?php get_sidebar(); ?>
</div>
<!-- ヘッダーを取り込む -->
<?php get_footer(); ?>

ここで重要なのは、記事の出力でもループを使うということです。
一つのページに対して一つの記事なのでループさせる必要はないのではないか、と疑問も浮かんできますが、これが WordPress特有のルールなのです。

また、『the_content();』のテンプレートタグで記事の内容が出力されます。

single.php用のCSSとして以下のコードをstyle.cssに追記してください。

.single-main {
    max-width: 700px;
    margin: 0 auto;
}

.page-info img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.page-info time {
    display: block;
    color: gray;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px gray solid;
}

article img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

サイトの方の記事ページは、次のように見えているはずです。

固定ページ（page.php）

本チュートリアルでは、固定ページと投稿ページを同じ見た目にします。その場合single.phpとpage.phpは同じ記述になります。

page.phpをテーマのフォルダに作成して、single.phpのコードをコピペしましょう。

<!-- ヘッダーを取り込む -->
<?php get_header(); ?>
<div class="grid">
    <main class="single-main">
        <!-- ワードプレスループ -->
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div class="page-info">
            <!-- サムネイルの出力 -->
            <?php the_post_thumbnail(); ?>
            <!-- タイトルの出力 -->
            <h1><?php the_title(); ?></h1>
            <!-- 作成日時の出力 -->
            <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y/m/d'); ?></time>
        </div>
        <article>
            <!-- 記事の出力 -->
            <?php the_content(); ?>
        </article>
        <?php endwhile; endif; ?>
    </main>
    <!-- サイドバーを取り込む -->
    <?php get_sidebar(); ?>
</div>
<!-- ヘッダーを取り込む -->
<?php get_footer(); ?>

CSSはsingle.php用のものと共用なので追記する必要はありません。

固定ページをクリックすると、次のような見た目になっているはずです。

アーカイブページ（index.php）

カテゴリ一別記事一覧ページや月別アーカイブ一覧ページを表示させるためのテンプレートを作成します。

テーマのフォルダに『index.php』を作成してください。

一覧ページなので、基本的にfront-page.phpと同じ記述ですが、カテゴリーや投稿月が一覧のタイトルとして表示されるようにします。

wordpress_テーマ_archive.php — archive.phpによる出力

まずは『front-page.php』をindex.phpにコピペしてください。次に『新着記事』の部分を『<?php wp_title(); ?>』に変更します。

<!-- ヘッダーの読み込み -->
<?php get_header(); ?>
    <div class="grid">
        <main>
            <!-- カテゴリー名などを動的に表示 -->
            <div class="news"><?php wp_title(); ?></div>
            <!-- ワードプレスループ -->
            <?php if(have_posts()): while(have_posts()): the_post(); ?>
            <div class="card">
                <div class="left">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                </div>
                <div class="right">
                    <a href="<?php the_permalink(); ?>">
                        <h2 class="title"><?php the_title(); ?></h2>
                    </a>
                    <p><?php the_excerpt(); ?></p>
                </div>
            </div>
            <?php endwhile; endif; ?>

        </main>
        <!-- サイドバーの読み込み -->
        <?php get_sidebar(); ?>
    </div>
<!-- フッターの読み込み -->
<?php get_footer(); ?>

このようにすることで、なんの一覧なのかを動的に表示することができるようになります。

CSSはfront-page.php用のものと共通なので記述する必要はありません。

404エラーページ（404.php）

URL変更や記事の削除によってすでに存在しないページにアクセスがあった場合、『お探しのページは存在しません』などのメッセージが表示されるのが普通です。
このテンプレートも作っておきましょう。

テーマのフォルダに404.phpを作ってください。

次に、次のphpコードを記述してください。

<!-- ヘッダーの読み込み -->
<?php get_header(); ?>
    <div class="grid">
        <main>
            <h2 class="error">404エラー</h2>
            <p class="page-not-found">お探しのページは存在しません。</p>
            <p class="page-not-found">Sorry, the page doesn't exist.</p>
        </main>
        <!-- サイドバーの読み込み -->
        <?php get_sidebar(); ?>
    </div>
<!-- フッターの読み込み -->
<?php get_footer(); ?>

ページのスタイルを整えるために、次のCSSをstyle.cssに追記してください。

.error {
    font-size: 2rem;
    color: red;
    text-align: center;
    margin-bottom: 100px;
}
.page-not-found {
    font-size: 1.5rem;
    text-align: center;
}
.page-not-found:last-child {
    margin-bottom: 400px;
}

存在しないURLにアクセス（ドメイン/存在しないURL）があった場合、次のように表示されます。