WordPress制作入門③WordPressテーマを自作する方法 - はじめてのWebデザイン【図解たっぷり】

｜ 12538 PV ｜ 2021.10.11

favorite_border

前回、WordPressのテーマを使ってサイトの見た目を変更しました。
今回はhtmlで作ったサイトを元に、WordPressテーマをイチから自分で作成する方法を解説します。

好みに合うテーマを探し回らず、想像した通りのWordPressサイトを作る第一歩を踏み出してみましょう！

WordPresの自作テーマとは?
自作WordPressテーマ、はじめの一歩
WordPressのテーマの仕組みを知ろう
トップページをWordPress化
WordPressでデザインの異なる固定ページを作成する
共通部分を一括で管理する
WordPressでブログの一覧ページを作る
WordPressでブログの記事ページを作る
まとめ

WordPresの自作テーマとは?

WordPressではインストール時から入っているテーマ、俗にデフォルトテーマと呼ばれるもの以外でも、様々なテーマを使用することが出来ます。

無料で公開・配布されているテーマもあれば、数万円～数十万円で販売されている有償テーマまで様々。たくさんのテーマが作られ、多くの人が利用できる形で提供されています。

外部リンク

WordPress テーマ | WordPress.org 日本語

ですが、既存のテーマでは掲載内容やデザインなどの調整が限られます。

そんな時には、テーマをイチから自分で作って使うことも可能！
この完全オリジナルのテーマを、自作テーマや独自テーマなどと呼びます。テーマを自作することで、作りたいサイトやクライアントの要望に沿ったサイトをWordPressで構築することができるのです。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

自作WordPressテーマ、はじめの一歩

HTMLで作成したしたサイトを、WordPressで使用する事もできます。HTMLページをベースして、WordPressテーマを作る形です。
WordPress化、WordPressテーマ化、なんて言い方をします。

制作するWordPressサイトの構想

はじめてのWebデザイン【図解たっぷり】シリーズで作ってきた、株式会社エドベースのWebサイトをWordPressテーマ化していきます。

せっかくWordPressで使える形にするので、ブログ機能も搭載しましょう。

エドベースのHTMLサイトを素材としてご用意しています。
下記からダウンロードしてご利用ください。
html編から作成されている方は、作ったedbaseフォルダをコピーして使用しても構いません。

素材ダウンロードはこちら

1.WordPresテーマの置き場所を確認

早速、WordPressに自作テーマを追加してみましょう。
Local by Flywheelは起動させ、管理画面にログインしておいてください。

Local by Flywheelのウィンドウで、URLの横に表示されている矢印をクリックします。

WordPressで使っているデータが入ったフォルダが開きます。
表示されているフォルダの中から、
app > public > wp-content > themes
と進んでください。

　↓

管理画面 > 外観 > テーマを見てみてください。
テーマ画面に表示されているものと、themesの中に入っているフォルダ名が同じはずです。

つまり、themesフォルダの中にあるフォルダが、WordPressで使用可能なテーマというわけです。これから作る自作テーマも、このthemes内にフォルダを作って進めていきます。

2.edbaseのファイルをコピーする

早速、HTMLで作ったedbaseサイトをWordPressに移し替えてみましょう。

素材のedwp_sozaiフォルダを、WordPressのthemes内にコピー＆ペーストします。

　↓

フォルダ名は後々わかりやすいように「wpedbase」変えておきます。
そのまま利用しても構いません。

3.WordPressにテーマと認識させる

themesフォルダ内に、新しくフォルダを加えました。
ですが、残念ながら、このままではWordPressにテーマと認識してもらえません。

管理画面からテーマを見てみると、「足りない部分があります」と言われています。

WordPressがテーマと認識するためには、下記２つのファイルが必要です。

index.php
style.css

必要なファイルを作成しましょう。
テキストエディタで空のファイルを新規作成。
index.phpと名前をつけて、wpedbaseの中に保存します。

style.cssには、テンプレートヘッダーを記述します。
これは、どんなテーマか分かるように説明を付けるイメージです。
一番上に、下記のコードを追加してください。

/*
Theme Name: テーマの名前
Description: このテーマの説明
Author: 作者の名前
*/

:の後は、テーマや製作者の名前を入れます。
今回のテーマだと、下図のような感じですね。
Author:にはご自分の名前を入れてください。

style.cssを上書きして、WordPress管理画面からテーマ設定ページを再読み込みしてください。Edbaseというテーマが、選択肢に加わっています。
カーソルを重ねて「テーマの詳細」をクリック。

有効化をクリックして、自作テーマを適用させてください。

表示画面のほうが真っ白になりますが大丈夫です。

4.index.phpを編集

index.phpを開いてください。
まだ空ファイル、画面表示も真っ白。本当にWordPressに反映されるのか、少しだけindex.hphに中身を入れてチェックしてみましょう。

index.htmlの１行目から<body>タグまでをコピーして貼り付けます。
bodyの中身は中身はコピーせずに、</body></html>で閉じましょう。

<body>と</body>の間に、「index.phpのテストです」という文字を入れます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>エドべース株式会社</title>
  <meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
    index.phpのテストです
</body>

</html>

上書き保存して、WordPressの表示画面をリロード。
入力した文字が表示されていたら、テーマがWordPressで使われています。

こんなんで大丈夫？と思った方もいらっしゃるかもしれません。
これからファイルを編集していくと、HTMLで作成したedbaseサイトがWordPress上に復元されていきますのでご安心を。WordPressの機能も取り入れて、より便利にグレードアップさせていきましょう！

WordPressのテーマの仕組みを知ろう

WordPressのテーマと認識させるために、index.phpを作成しました。
これは、index.phpが「テンプレートファイル」と呼ばれる、WordPressサイトを表示させるために必要なファイルのためです。WordPressのテーマを作成するには、index.php以外にもサイトを構成するための「テンプレートファイル」を作っていく必要があります。

WordPressの仕組みとテンプレートファイルの役割を把握しましょう。

HTMLページとWordPressの違い

HTMLファイルでWebページを作った時は、1ファイルがそのまま1つのWebページとして表示されます。3ページ作りたければ、3つのhtmlファイルが必要です。

このように、書かれていることがそのまま表示されている＝いつアクセスしても毎回同じ情報が表示されるページを静的ページと言います。

対してWordPressは、存在するページの数と同じだけhtmlやphpファイルを用意する必要はありません。1つのファイルに、条件に応じた情報を出力して表示することが出来ます。

テンプレートファイルがあれば、リクエストに応じてデータベースにある情報を取り出し、それをページに表示させることが出来ます。このようにアクセス時の条件によって表示される情報が異なるページを動的ページと呼びます。

index.phpを使って確認してみよう

リクエストに応じてデータベースにある情報を取り出し…と聞いても、馴染みがないとピンと来ないのではないでしょうか？
どういうことか、index.phpを使って実験してみましょう。

index.phpを開いてください。
「index.phpのテストです」の下に、下記コードを貼り付けてください。

これは、投稿のタイトルを取得・表示せよというWordPressのタグです。

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

↓貼り付けイメージ

貼り付けたら上書き保存。
WordPressの管理画面から、投稿一覧を開きます。

テストです、という記事を表示してみましょう。
投稿のタイトル「テストです」が表示されているはずです。

次に、Hello world!の記事を表示させてみます。
こちらも投稿のタイトル「Hello world!」が表示されました。

どのページの情報を表示するか（投稿を選ぶ）
投稿のタイトルを取得・表示せよ（ php the_title(); ）

この２つがWordPressのデータベースに送っているリクエストです。
どちらもindex.phpで表示させていますが、リクエストに応じて表示内容を変えていることが分かりますね。

WordPressテンプレートファイルの考え方

WordPressでは、同じファイルを使って別々のページを表示することが出来ます。
ですが、サイトのトップページ、新着記事一覧、投稿ページなど、それぞれ表示させたいものも、レイアウトも異なります。index.phpで全てを表示させるのは難しいですよね。

そこで、WordPressにはindex.php以外にもテンプレートファイルが設定されています。
テンプレートファイルは、それぞれ役割ごとにファイル名が決められています。投稿のページではsingle.phpなど、決められたファイル名のテンプレートがあれば、自動的にそれを使って表示してくれる仕様になっています。

使用できるテンプレートファイルの一覧図も公開されています。

外部リンク

wp-template-hierarchy.jpg

とはいえ、図にあるもの全てを揃える必要はありません。この中から必要なファイルだけを用意すれば良いので、覚えなくて大丈夫です。

まずは、今回のエドベースサイトをwordPress化するために使うテンプレートを覚えましょう。この４つのテンプレートは、ほぼ確実にどんなWordPressテーマでも必要となります。

トップページがindex.phpで無いことに、違和感を覚えた方もいらっしゃるかもしれません。
WordPressテーマでindex.phpは「なんでも屋」のポジション。
ピッタリ当てはまるテンプレートファイルが無い時は、とりあえずindex.phpを使ってWebページとして表示させる仕様になっています。だからこそ、テーマにindex.phpが必須となっているわけです。

トップページをWordPress化

いよいよ、本格的にhtmlページをWordPressテンプレートファイルに置き換えていきましょう。まずはトップページです。

index.htmlをエディタで開きます。
別名で保存（名前をつけて保存）から、front-page.phpという名前で保存してください。

WordPressサイトを表示してみましょう。

front-page.phpが表示されました！
ただ、画像が表示されていなかったり、CSSが効いていなかったりと、うまく表示されていないところがあります。

どうしてCSSや画像を読み込まないかというと、パスが違うから。
今の書き方では、同じ階層にあるstyle.cssを読み込むように指示しています。

ですが、style.cssはテーマフォルダの中に入っています。
今開いているページとは、かなり離れた場所にあります。

このため、style.cssを読み込めなくなってしまっているのですね。

WordPressでは「テーマフォルダの場所」を出力するタグが用意されています。

style.cssへのリンクに使ってみましょう
WordPressタグの後にスラッシュが必要なので、注意してください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">

front-page.phpを上書き保存して、WordPressのページを再読み込みします。
CSSが効いて、ヘッダーメニューやサイドが横並びに配置されました！

画像部分も、同じように <?php echo get_template_directory_uri()?> でテーマフォルダ内にあるimagesフォルダに辿り着けるようにしてあげます。
トップ画像だと下記のようになります。

<img src="<?php echo get_template_directory_uri()?>/images/top.jpg">

サイドのバナーも同じように設定してみましょう。
ブラウザを再読み込みして、２枚の画像が表示されていれば成功です。

ヘッダーメニューのリンクは、他のページもWordPress化しないと繋げません。
一旦置いておいて、まずリンク先となるページを作りましょう。

WordPressでデザインの異なる固定ページを作成する

会社概要とお問い合わせ、この２ページは固定ページを使って作ります。

会社概要とお問い合わせは、デザインが違いますよね。
固定ページはpage.phpを使って表示されると紹介しましたが、page.phpという１つのファイルでどちらのデザインも再現するのは大変です。

そこで、WordPressでは、固定ページに応じて別のテンプレート（phpファイル）で表示させることができる仕組みも用意されています。
page-スラッグ.phpというファイル名を付けると、「スラッグ」の部分が一致する固定ページに割り当てられます。

スラッグというのは、URL（パーマリンク）の末尾の部分のこと。
スラッグの設定と合わせて、固定ページ部分の作成方法を見ていきましょう。

会社概要ページをWordPress化する

WordPress管理画面から、固定ページの新規追加を開きます。

タイトル部分に「会社概要」と入力してください。
右側のメニューから、パーマリンクの項目をクリック。

URLスラッグを入力します。
会社概要のページなので「company」にしておきましょう。

スラッグを入力したら、公開にします。

次に、WordPressのテーマ（テンプレート）を作成しましょう。
company.htmlをエディタで開きます。

そのまま、名前をつけて保存/別名で保存を選択。
「page-company.php」という名前で保存してください。

page-company.phpを編集しましょう。
やることはfront-page.phpと同じく、 <?php echo get_template_directory_uri()?> を使ったパスの修正です。修正箇所は以下の４つ。

style.cssの読み込み
画像（company.png）
画像（images/banner.png）
gacha.jsの読み込み

<?php echo get_template_directory_uri()?>の挿入イメージ↓

WordPressの管理画面に戻ります。
先程作った、会社概要のページを表示してみましょう。

HTMLページと同じように表示され、格言ガチャも動いていれば成功です！

お問い合わせページをWordPress化する

お問い合わせページの作り方も、基本的には会社概要と同じです。

が、お問い合わせページにはフォームがありますよね。
HTMLでは見た目だけ作りましたが、WordPressならプログラミングの知識がなくても簡単に本当に動くフォームが実装できてしまいます。
せっかくなので、フォーム機能も組み込んでみましょう。

1.プラグインの追加と設定

WordPressは「プラグイン」を追加することで、機能を拡張することが出来ます。プラグインを追加することで、今回の目的であるフォーム機能を付けるなど、WordPress本体にはない機能も使えるようになるのです。

プラグインを追加してみましょう。
WordPress管理画面、プラグインの新規追加を開きます。

右上に表示されている検索窓に「Contact form」と入力。

Contact form 7というプラグインが表示されます。
今すぐインストールをクリックしてください。

インストールが完了すると、ボタンが「有効化」に変わります。
有効化をクリックしてください。

有効化が完了すると、左メニューに「お問い合わせ」という項目が増えています。
クリックしてみましょう。

新規追加をクリックするとフォーム作成画面が開きます。

わかりやすいように、タイトルは「お問い合わせ」とでもしておきましょう。
デザイン上、メールアドレスと題名は不要のようなので削除します。
氏名→名前、メッセージ本文 (任意)→内容に打ち替えます。

元のform.htmlには性別を選択するラジオボタンがありました。

これを追加してみましょう。

ラジオボタン、と書かれているところをクリック。

ウィンドウが開くので、オプション欄に「男」「女」と入力。

右下にあるタグを挿入ボタンをクリックすると、コードが挿入されます。

ラジオボタンのみでは分かりにくいので「性別：」を追加しておきましょう。

右上に表示されている保存ボタンをクリック。
保存が完了すると、下図のようにショートコードが表示されます。

次の固定ページを作成時に、このショートコードを貼り付けます。
コピーしておいてください。

2.固定ページを作る

お問い合わせページを表示するために、固定ページを新規追加します。
タイトルを「お問い合わせ」と入力。
本文部分に、さきほどコピーしたショートコードを貼り付けます。

URLスラッグを「form」に変更し、公開します。

3.テンプレートファイルを作る

固定ページ（お問い合わせページ）を表示させるテンプレートファイルを作ります。

form.htmlをエディタで開き、名前をつけて保存を選択。
「page-form.php」という名前で保存してください。

style.cssと画像部分に<?php echo get_template_directory_uri()?>を挿入して、ファイルを読み込めるようにします。

固定ページを作成した時、本文部分にContact form 7で作ったフォームを表示するのショートコードを挿入しました。
お問い合わせページでプラグインのフォームを表示するために、直打ちしているフォーム部分を固定ページの本文と置き換える必要があります。

エディターを使って設定した本文を表示させるために、下記のコードを挿入します。

<?php while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?>

page-form.phpの<form> ~ </form>タグまでを削除し、上記のコードを貼り付けてみてください。

貼り付けたコードで指示していることは、下図の内容です。
「while (haveposts()) : thepost();」はWordPress特有の書き方です。厳密に意味を捉えようとすると非常に難しいので、大体の意味が分かれば大丈夫。
WordPressでよく使う定型文の１つ、と思っても問題ないです。

ともあれ、page-form.phpを上書き保存して、お問い合わせページを見てみましょう。プラグインを使って作ったフォームが表示されているはずです。

ちなみに、このフォームはローカル環境だとうまく動きません。メールを送ろうとするとエラーになったり、作ってしばらくするとエラー表示が出ていたりします。
これは、ローカル環境でメールサーバーの用意ができていないためです。

Local by Flywheelだと簡単にメールテストも出来るようになります。試してみたい方は、下記サイトを参考に設定してみてください。

外部リンク

【WordPress】ローカル環境でお問い合わせフォームの送信テストをする方法

共通部分を一括で管理する

ここまでで、htmlで作成した３ページがWordPressでも表示されるようになりました。それぞれのページへのリンクを作り直したいところですが、このあとブログのページも作ります。
毎回全ファイルを開いて、リンクを修正したり追加したりは、面倒ですよね。

実は、WordPress化すると「共通部分を使い回せる」ようになります。
データベースにある情報を書き出すだけではなく、phpファイル内で、別のphpファイルの中身を書き出すことも出来るのです。

WordPressのページは、色々なテンプレートファイルとデータベースの情報を１枚にまとめたものと言えますね。

ヘッダー部分をテンプレート化

早速、ヘッダーを分離してテンプレートファイル化してみましょう。

front-page.php
page-company.php
page-form.php

ここまでに作った、３つのテンプレートファイルを見比べてみましょう。
それぞれtitleとdescriptionは違いますが、</header>タグまではほぼ同じ構成になっていますよね。
この共通部分を「header.php」として分離しましょう。

新規ファイルを作成します。
front-page.phpの</header>タグまでをカット＆ペースト。

header.phpという名前で保存してください。

ヘッダー部分をカットしたfront-page.phpには、一行目に「header.phpを出力せよ」というWordPressのタグを挿入します。

<?php get_header(); ?>

上図のようになったら、front-page.phpを上書き保存。
ブラウザでサイトのトップページを確認してみましょう。

今まで通り表示されていれば、うまく出来ています。

page-company.php と page-form.phpも<?php get_header(); ?> に置き換えます。

これで、header.phpを編集すると全てのページのヘッダー部分が変更されるようになりました。header.phpをよりWordPressに適した形に調整していきましょう。

header.phpを編集する

header.phpを共通化しました。
今のままだと、ページのタイトルやmeta descriptionも一緒になってしまいまいます。

これらを細かく設定するには難しい設定、もしくはプラグインの使用が必要です。今回はちょっと簡単に作ってしまいましょう。

ページのタイトルを書き出してくれるように、以下３つのWordPressタグを使います。

<?php echo get_the_title(); ?>
<?php bloginfo('title'); ?>
<?php bloginfo('description'); ?>

この３つのタグを組み合わせて使用します。

header.php

  <title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜<?php bloginfo('description'); ?>">

実際に出力されるページには、赤い文字が入ります。

サイトのトップページ（front-page）だけは、タブに表示されるページタイトルが変になっているかと思います。ここは、そのままでOK。
「会社概要」と「お問い合わせ」が正しく表示されていれば次に進んでください。

wp_head(); を挿入する

WordPressテーマのheadに必要なのが<?php wp_head(); ?>というタグ。
このタグは、WordPress側がhead内に出力したいものがある時に、書き出せる場所を確保してあげる為のものです。

例えば、プラグインを使ってmetaタグを出力する、SNSへのリンクを作るとき。<?php wp_head(); ?>が入っていないと動かなかったり、CSSが読み込まれずに見た目が汚くなったりしてしまいます。

今後プラグインを追加しても動くように入れておきましょう。
挿入場所は</head>タグの直上です。

header.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜<?php bloginfo('description'); ?>">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
～以下略～

WordPressを使ってメニューを作る

ヘッダーメニューのリンクを各ページに繋がるように直しましょう。修正が楽になるよう、管理画面からメニューを追加・変更できるようにます。

管理画面からメニューを作るために、functions.phpという特殊なファイルを使います。
functions.phpはテーマファイルの1つで、WordPressの管理画面の設定、機能の使用不使用の決定、そのほか関数のカスタマイズ等などを行うことができるファイルです。

エディタで新規ファイルを作成してください。
下記のコードをコピーして貼り付けます。
張り付けたら、functions.phpという名前で保存してください。

functions.php

<?php 
    add_theme_support('menus');
    register_nav_menus( );

?>

WordPressの管理画面を開きます。
（開いている方は再読み込みしてください）

外観にカーソルを重ねると「メニュー」という項目が増えています。

開いてみましょう。
メニュー名を付けて、メニューを作成ボタンをクリック。

作成したメニューに、項目を追加できるようになります。
左側にあるメニュー項目を追加で、会社概要とお問い合わせにチェックを入れます。その状態で「メニューに追加」ボタンをクリック。

チェックを入れた項目が、右側のメニュー構造の中に表示されます。
ドラックで順番を変えられるので、表示させたい順に並べます。
順番を揃えたら「メニューを保存」ボタンをクリックして保存してください。

header.phpからメニューを呼び出す

ヘッダーナビゲーション部分を、作成したWordPressの「メニュー」を表示させるコードに置きまえます。

メニューを呼び出すWordPressタグはこちら。

<?php wp_nav_menu( ); ?>

今回のコードの場合は、<nav>タグの中に入れると良いです。

header.php(完成!)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
  <div class="container">
    <header>
      <h1>エドベース株式会社</h1>
      <nav>
        <?php wp_nav_menu( ); ?>
      </nav>
    </header>

上書き保存して、ブラウザで確認してみましょう。
ヘッダーナビゲーションが変わっていれば完成です。

footer.phpを作成

footerも株式会社エドベースのサイトは共通したデザインです。
footer.phpというファイルを作って共通化しましょう。

page-company.phpを開いてください。
<footer>タグから下を全て切り取り、新規ファイルに張り付けます。
新規ファイルを「footer.php」という名前で保存します。

page-company.phpの最下部には、footer.phpを出力するためのタグを挿入します。headerがfooterになっただけですね。

<?php get_footer(); ?>

frontpage.phpとpage-form.phpも同じく、<footer>から下を全て削除。
<?php get_footer(); ?>を挿入します。

上書き保存して、ブラウザで各ページを確認してください。
見た目に変化がなければ、footerのテンプレート化は成功です。

wp_footer; を挿入する

WordPressのfooter.phpには<?php wpfooter(); ?>というタグを挿入します。
このタグもheader.phpに挿入した`<?php wphead(); ?>`と同じく、WordPress側が出力したファイルを書き出せるようにするものです。

挿入する場所は</body>タグの直前。
footer.phpに書いてみましょう。

footer.php(完成!)

    <footer>
      <p>エドベース株式会社</p>
    </footer>
  </div>

  <script src="<?php echo get_template_directory_uri()?>/gacha.js"></script>
  <?php wp_footer(); ?>
</body>

</html>

上書き保存して、WordPressサイト（表示画面）を確認してください。
消えていた管理バーが復活していれば成功です。

右端にあるユーザー名がはみ出していますが、これは後でCSSを調整すると直ります。とりあえずそのまま進めてください。

WordPressでブログの一覧ページを作る

サイトをWordPress化するにあたって追加予定の、ブログ部分を作っていきましょう。最初に記事一覧のページをつくります。

固定ページを２つ作成し、役割を決める

ブログ記事（投稿）の一覧を表示するためのページを作ります。

サイトのトップページと、記事一覧を分けたい時には少し工夫が必要です。
WordPressは元々、ブログの考え方が基本。
そのまま使うとトップページ＝記事一覧という考え方をしてしまいます。

そのため、今回のようなサイトを作る場合は「トップページと記事一覧ページは分けますよ」という設定をしてあげる必要があるのです。

その設定は、WordPress管理画面の設定 > 表示設定で行えます。
下図のように、ホ―ムページと投稿ページ（投稿一覧ページ）を分けたい場合は、固定ページを割り当てる仕組みになっています。

ですので、それぞれの欄に入れられるように、固定ページを追加しましょう！

固定ページの新規追加画面を開きます。
タイトルを「ブログ」
URLスラッグに「blog」
と入力して、公開してください。

もう一度、固定ページの新規追加。
タイトルに「ホーム」と入力して、公開します。

管理画面左メニューの設定 > 表示設定を開いてください。
ホームページの表示を、下図のように変更します。

ページ下部にある「変更を保存」ボタンで保存してください。

メニューに「ホーム」と「ブログ」を追加

ヘッダーナビゲーションのリンクを完成させましょう。

管理画面左メニューの設定 > 表示設定を開きます。
メニュー項目から、追加したページ２つを選択して追加します。

必要に応じて並び替えて、メニューを保存します。

これで最初の構想通りのメニューが表示されるようになりました。
固定ページを割り当てたので、トップページのタイトル（タブに表示される文字）部分も「ホーム」になりましたね。

index.phpを作成（編集）する

下準備は整いました。
index.phpを編集して、記事の一覧が表示されるようにしましょう。

今のindex.phpは確認のために、適当な記述をしていますね。
page-form.phpの中身を丸ごと張り付けてしまいましょう。

mainタグに付いているクラス、トップ画像は要らないので削除します。
h2の文言は「エドベースブログ」に変えましょう。

index.php

<?php get_header(); ?>

    <main>
      <section>
        <h2>エドベースブログ</h2>
          <?php while (have_posts()) : the_post(); ?>
            <?php the_content(); ?>
          <?php endwhile; ?>
      </section>
    </main>

<?php get_footer(); ?>

一旦、上書き保存して、ブログのページを見てみましょう。
下図のように、前回作ったテスト投稿が表示されます。

index.phpに戻ります。
今書かれている指示は<?php the_content(); ?>。
投稿の本文部分を出力せよ、です。
ここを変更すれば、記事一覧を作れそうですね。

アイキャッチを有効にする

作成中のテーマ、実はアイキャッチ機能が使えません。
投稿の追加/編集画面を開いても、アイキャッチの欄が消えてしまっているはずです。

アイキャッチの機能も「メニュー」と同じく、functions.phpに記述しなくては使用できない機能です。functions.phpに下記の２行を追加すると有効化できます。

メニューの時に書いた記述の下に入れましょう。
全体では下記のコードになります。

functions.php（完成!）

<?php 
  add_theme_support('menus');
  register_nav_menus( );

  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(200, 200 );
?>

上書き保存。
投稿エディタを開き直すと、アイキャッチの項目が表示されます。

ループを書く

index.phpで表示させたいのは、記事の一覧。

<?php while ~~> から</endwhile;?>までの繰り返しを「ループ処理」と呼び、このタグに挟まれた部分を「ループ内」などと言い表します。
アイキャッチ画像+投稿タイトルが表示されるように、ループ内を書き換えましょう。

使用するWordPressタグは、下記の３つです。

投稿のアイキャッチ画像を表示する

<?php the_post_thumbnail( ); ?>

投稿のURLを（文字列として）出力する

<?php the_permalink(); ?>

投稿のタイトルを表示する

<?php the_title(); ?>

とりあえずループ内に入れてみましょう。
ただし<?php the_permalink(); ?>はそのまま書くと、http://edbase.local/%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99/など、URLがそのまま文字として表示されてしまいます。
リンクとして機能するように、aタグの中に入れてあげましょう。

index.php

<?php get_header(); ?>

  <main>
    <section>
      <h2>エドベースブログ</h2>
        <?php while (have_posts()) : the_post(); ?>
          <?php the_post_thumbnail( ); ?>
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
          </a>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

上書き保存して、ページを確認します。

うーん…。
あと一歩、というところですね。

記事１つ１つをsectionタグで囲いたいので、ループ内のHTML部分を少し作り込んでみましょう。

上図の構造に合うように、HTML部分を作ります。

index.php（完成!）

<?php get_header(); ?>

  <main>
    <h2>エドベースブログ</h2>
    <?php while (have_posts()) : the_post(); ?>
      <section class="section">
        <div class="image">
          <?php the_post_thumbnail( ); ?>
        </div>
        <div class="desc">
          <h3>
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </h3>
        </div>  
      </section>
    <?php endwhile; ?>
  </main>

<?php get_footer(); ?>

左右横並びにするためにstyle.cssにスタイル指定も加えます。
PC幅でのスタイルは、メディアクエリよりも上に書いてください。

style.css

.section{
  display: flex;
}

.image{
  flex: 1;
}

.desc{
  flex: 3;
}

スマホ幅では縦並びになるようにしましょう。

もう一度、ブラウザで表示を確認します。

イメージした形になりました。

折角style.cssを開いているので、管理バーのところも直しましょう。
ulタグに対して「display:flex」と指定している部分、
セレクタを<header>タグの中にある<ul>タグという書き方に変えます。

そうすると、管理バーの右側も黒い部分に収まります。

cssを更新したのに反映されない時はキャッシュクリア

WordPressの制作を行っていると、style.cssを上書き保存してリロードしたのに表示画面が変わらない…ということが起こります。

これは、ブラウザの“キャッシュ”という機能によるもの。
ブラウザはページを早く読み込むために、同じサイトで使われているjsやcssファイルの情報を一時的に保存しています。毎回、全ファイルを読み込まずに記憶しているものを再利用しているのです。

このためstyle.cssを更新しても、ブラウザは自分が保存している情報を使おうとして、更新が反映されないという状態になることがあります。

Google Chromeには、キャッシュ分も更新して再読み込みをする（スーパーリロード）ショートカットが用意されています。

Mac：Command + Shift + R
Windows：CTRL + Shift + R

cssを上書きしたのに反映されない、という場合は、上記のショートカットを使ってリロードしてみてください。

WordPressでブログの記事ページを作る

いよいよ最後！
ブログの記事を読めるように、single.phpを作成しましょう。

新規ファイルを作成し、page-form.phpの中身を全て張り付けます。
「single.php」と名前をつけて保存してください。

mainタグのクラス、その下の画像（imgタグ）を削除します。

h2タグの中身を、投稿のタイトルを呼び出すWordPressタグ <?php the_title(); ?> に変更します。タイトル部分もループ内に入れましょう。

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、ブラウザで投稿のページを見てみましょう。
投稿（ブログの記事）ページが表示されるようになっています。

サイトを見ている人がわかりやすいように、カテゴリーとタグも表示しましょう。投稿に設定しているカテゴリーとタグは、下記のWordPressタグで呼び出せます。

投稿に設定されているカテゴリーを表示する

<?php the_category( ); ?>

投稿に設定されているタグを表示する

 <?php the_tags( ); ?>

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
          <p><?php the_category( ); ?></p>
          <p><?php the_tags( ); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、表示を見てみましょう。

カテゴリーは縦並び、タグは「タグ：」という文字付きの横並び。
ちょっと変ですね。

カテゴリーもタグと同じように表示させてみます。

single.php（完成!）

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
          <p>カテゴリー：<?php the_category(" / "); ?></p>
          <p><?php the_tags( ); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>