TOPページを表示しよう

1 初めに
2 この章で覚えて欲しいこと
3 ページ毎にファイル名が決まっている
- 3.1 横から失礼します
4 実際にhome.phpを作成
5 HOMEページ？TOPページ？
6 次の章で学ぶこと

初めに

前の章では最低限必要なファイルを作成しました。

ここから少しずつテーマをカスタマイズしていきましょう。

今回は、サイトの最初にアクセスするページであるTOPページを作成していきます。

Webサイトの顔になるページを作成しながら、開発の流れを学んでいきましょう。

この章で覚えて欲しいこと

テンプレート階層
home.php

ページ毎にファイル名が決まっている

今までにWebサイトを作ったことがある方は既にご存知かもしれませんが、HTMLで作成するWebサイトのURLはファイル名と同じになります。

例えばabout.htmlというファイルを作成したら、URLは

http://○○○○○○.××××/about.html

になります。

作ったファイル名がそのままURLになるので分かりやすいですね。

ですが、WPではファイル名がそのままURLにはなりません！

ここがWPがややこしいポイントの1つですね・・・＞＜

WPでは、URLに関わらずそのページの種類によってファイル名が決まっています。

そのルールのことをテンプレート階層と言います。

種類が多いので一気に覚えると大変ですから、少しずつ覚えていきましょう。

今回覚えていただきたいのは、home.phpです。

こちらは、WPのTOPページを表示する際に使われるファイルです。

横から失礼します

学習を進めている方の中には、「あれ、TOPページのファイルはfront-page.phpじゃないの？」と疑問に思う方がいるかもしれません。
実はWPのTOPページを表示する方法は2種類あるのです。
TOPページが2種類あるという詳しい解説は別のコースで扱おうと思います。
ですので、このコースではhome.phpとして進めていただければ幸いです。

実際にhome.phpを作成

まず、現在のTOPページがどうなっているかを確認しましょう。

Localの下記のボタンをクリックしてください。

クリックすると、下記のような見た目になっているかと思います。

真っ白ですね（笑）

これは、前回作成したindex.phpの中身が反映されているからです。

それでは、home.phpファイルを作成していきましょう。

このコースではHTMLについては深掘りしませんから、簡単なTOPページを作成します。

以下のようにファイルを作成してください。

作成するファイルは、1つ前の章で作成した3229wp-beginnerフォルダの中に配置します。

home.php

<!DOCTYPE html>
<html lang="jp">
<head>
・・・・<meta charset="UTF-8">
・・・・<title>TOPページ|3229WP初級</title>
・・・・<?php・wp_head();・?>
</head>
<body>
・・・・<p>3229WPのTOPページです。<br>
・・・・home.phpで表示されています。</p>
・・・・<?php・wp_footer();・?>
</body>
</html>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^