WordPressのHTMLはどこにある(*’ω’*)

「WordPressのHTMLファイルは、どこにある?」

皆さんはWordPressを使い始めてF12(開発者ツール)でhtmlを編集し、「よし、ローカルファイルも同様に編集しよう。」と思ったとき、「あれ!ファイルマネージャーにindex.htmlがない!!!!!」となった事はありませんか?

一般的には、ホームページ作成=HTMLファイルの作成というイメージです。制作したサイトやサーバーのフォルダを見ると次のようにHTMLファイルやCSSファイルが保存されています。

Dreamweaverで作成したホームページのファイル構成イメージ
ホームページのファイル構成イメージ

しかし、WordPressのインストール先のフォルダを見てもHTMLらしきファイルは見当たらないので、このような疑問が生じます。

WordPressにはHTMLファイルが見当たらない
WordPressにはHTMLファイルが見当たらない

先に結論を書くと、「WordPressにHTMLファイルはありません」となります。

ここでいうHTMLファイルとは、会社概要として作ったcompany.htmlやサービス紹介ページのservice.htmlです。これらの物理的なファイルは存在しません。

この点でWordPressはDreamweaverと大きな違いがあります。頭を切り換えないと、この「HTMLファイルはどこに?」の疑問で時間を費やすことになるので注意しましょう。➔ちなみに私は費やしました(*’ω’*)b

ではなぜ、WordPressのサーバーにHTMLファイルがないのか説明していきます。

この記事の内容

● WordPressでは「URL=ファイル名」ではない

● 存在しないHTMLファイルを「動的」に作る

●動的HTMLファイルの作成ステップ

WordPressでは「URL=ファイル名」ではない

まず、WordPressではURL=HTMLファイル名ではないということです。

普通は作成したサイトで「http://example.com/company.html」にアクセスするのは、サーバーにある「company.html」というファイルを開くことでした。URLはファイル名を示していると言っても良いでしょう。これは理解しやすいです。

それに対してWordPressでは「http://example.com/company.html」にアクセスしたからといって、「company.html」や「company.???」という物理的なHTMLファイルを開くわけではありません

●「http://example.com/company.htmlにアクセスする」の違い
 ・一般的にはcompany.htmlを開く
 ・WordPressにはcompany.htmlというページはない

では、どういう仕組みなのでしょうか。簡単に説明します。比較のため「.html」という拡張子を付けていますが、WordPressでは「.html」という拡張子に意味がないので通常は「http://example.com/company.html」ではなく「http://example.com/company」のようなURLになることが多いです。

WordPressでは「URL書き換え」(URLリライト)という技術が使われています。

それにより、「http://example.com/company にアクセスされたら、companyというスラッグを持つページを表示する」のような柔軟な動作が可能になっています。company.htmlというHTMLファイルを開くわけではありません。

●「http://example.com/company.htmlにアクセスする」の違い
 ・一般的にはcompany.htmlを開く
 ・WordPressにはcompanyというスラッグのページを開く

サーバーにHTMLファイルが存在しないのは、このような理由です。

存在しないHTMLファイルを「動的」に作る

とはいえ詳しい方は、ホームページというものは例外なく、サーバーからクライアントにHTMLファイルを転送する仕組みで成り立っていることをご存じかもしれません。

WordPressで作成したサイトも例外ではなく、サーバーからクライアントにHTMLファイルを転送することでブラウザにホームページが表示される仕組みになっています。

ここで疑問がわいてきます。

「WordPressにはHTMLファイルがない」と「WordPressでもHTMLファイルをクライアントに転送している」が矛盾しているように聞こえませんか?

存在しないHTMLファイルを、どのようにクライアントに送信しているのか、その答えが「静的」と「動的」です。

仮に、Dreamweaverで作成した、内容が固定のHTMLファイルを「静的HTML」と表現します。

これに対してWordPressの仕組みを「動的HTML」と表現します。

動的HTMLとは、固定の静的HTMLが存在するわけではなく、必要に応じて内容を組み立ててHTMLを作るという意味です。

どういうことでしょうか?

動的HTMLファイルの作成ステップ

WordPressで作成したサイトにアクセスすると、ユーザーの見えない部分でダイナミックな動きが起きています。

まず、会社概要のページ(http://example.com/company)にアクセスすると、そのページに必要なデータとテンプレートを判別します。

ページの表示にはテンプレートとデータが使われる
ページの表示にはテンプレートとデータが使われる

必要なデータとはダッシュボードから入力した会社概要の内容で、タイトルや本文などで構成される文字情報です。サーバーのデータベースに保存されています。念のため書きますがデータベースはFTPソフトでダウンロードしたり開いたりすることはできません。

WordPressデータベースの例
WordPressデータベースの例

そのデータを表示するため、必要なテンプレートを読み込みます。会社概要は固定ページなので一般的にはpage.phpが使われます。page.phpは実際に存在するファイルで、サーバー内のテーマフォルダ内に保存されています。(FTPソフトでもダウンロードできます)

今回使われるのは固定ページ用のテンプレートpage.php
今回使われるのは固定ページ用のテンプレートpage.php

ちなみに、テーマフォルダとはWordPressインストール先のwp-content/themesフォルダです。このフォルダに1テーマ1フォルダ単位で格納されています。

page.phpの中に共通レイアウトファイルが読み込まれます。典型的にはヘッダー(header.php)、フッター(footer.php)、サイドバー(sidebar.php)などです。

page.phpに共通パーツを読み込む
page.phpに共通パーツを読み込む

これらのPHPファイルには「ここにタイトルを表示する」とか「ここに本文を表示する」などのプログラムが埋め込まれています。そのプログラムを実行して、データベースから取り出した文字(ページのタイトルや本文など)をテンプレートに埋め込めば、ページのHTMLが完成です。

会社概要ページの組み立て
会社概要ページの組み立て

多くのパーツが登場して複雑な動きをしましたが、最終的にHTMLが作成されてクライアントに転送され、ブラウザで表示される点では、一般的はホームページビルダーと同じです。

ブラウザに表示される会社概要
ブラウザに表示される会社概要

ユーザーから見れば指定したURLのページが表示されるだけなので、まるで最初からcompany.htmlが存在していたのと同じ動きです。

どうでしょうか。Dreamweaverは「静的HTML」でWordPressは「動的HTML」だと表現した意味が理解できたでしょうか。

WordPressではサーバーに固定のHTMLファイルが存在しないのは、このようなダイナミックな動きによってHTMLが動的に作成される仕組みになっているためです。

>Mixchannelで配信中!

Mixchannelで配信中!

この度私東雲にゃもは10月末で株式会社ITComeTrueを退社致します。11月からはフリーで活動していきます。また、かねてからご縁のありました経営者様にお声掛けを頂き、千葉美少女図鑑の一員として再スタートをきる事となりました。これまで応援して下さった方々には感謝しかありません。これからの東雲にゃもの応援を宜しくお願い致します。

CTR IMG