身につくWP

WordPressを身につけて稼ぎたい人のためのブログ

4.TOPページを表示しよう

初めに

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

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

今回は、サイトの最初にアクセスするページである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つ分です。コピーせずに自分で入力しましょう^^

設置が出来たら、改めてサイトの見た目を確認します。

先ほど作成したhome.phpの中身が表示されていることが確認出来ると思います。

今起きたことを専門的に言うと、最初はindex.phpが使われていたのですが、home.phpが出来たことでより優先度の高いファイルであるhome.phpが使われるようになった、ということになります。

テンプレート階層はこのように各ページを表示するファイルは複数存在し、その優先度が高い順に適応してくれます。

難しく感じるかもしれませんが、無理せず少しずつ覚えていけば大丈夫です◎

HOMEページ?TOPページ?

ここで折角なので、用語について触れておきたいと思います。

サイトの一番最初に出てくるページをこのコースではTOPページと言いましたが、他の言い方でHOMEページとも言われることがあります。

この違いは何なのでしょうか?

結論から言うと、最初のページのことをTOPページと呼ぶのは日本だけです。

海外だと、HOMEページと呼ぶんですね。

日本では、Webサイト全体を指してホームページと言われることが多いので、最初のページのことはTOPページと呼ぶようになったようです。

ちなみにWPは世界中で使われているCMSですから、最初のページのことはHOMEページと呼ばれています。

ですから、ファイル名もhome.phpになるんですね!

次の章で学ぶこと

次の章では、WPの肝となる機能ブログについて解説していきます。

そもそもブログと言うのは何なのか、説明出来るくらいの知識はつける必要があります。

馴染み深い単語ですが、改めてブログとは何なのか理解していきましょう。

この記事のまとめ

  • テンプレート階層という用語を知る
  • home.phpがTOPページ用のファイル

学習 かばちゃんた
かばちゃんた
未経験から独学でプログラミングを勉強し、今ではフリーランスとして生活出来るようになった現役のプログラマーです。MENTAというサービスでこれまで100名以上学習サポートをしてきました。分かりやすく丁寧な解説を心掛け、プラグラミング学習に役立つ情報を発信していきます。

コンテンツ一覧