EZO -いいぞ-

1分で考えたブログ名。特に、意味はない。

【WordPress】index.phpに困惑している方へ【テーマ作成】

こんにちは。
1ヶ月ほど前になってしまうかも知れませんが、ひょんなことからWebサイトを作っていました。

「WebサイトといえばHTMLで構成、CSSで装飾を書いていく。ブラウザでURLにアクセスした時最初に読み込まれるのはindex.htmlで、だからそこにトップページを作って、各htmlファイルに飛ばすためのリンクを貼るんだ……」

という最低限の知識はあったため、とりあえずデザインは作っていくことができました。
さていざWordPressに載せようとしたところで、詰みました
サーバー上にhtmlファイルが無い。

……ということがあった僕と同じように混乱するデザイナーサイドの方が他にもいらっしゃるのではないかと思い、今回の記事を書いていきます。
WordPressの概念を前提知識ゼロの人に説明するページってあまり無いなあと思ったので、ここが役に立てば幸いです。

なおここに書いていく内容は、「テーマを作っていく上でとりあえずこう解釈しておけば最低限混乱すること無くやれると思う」と僕が勝手に判断したものですので、正確であるかどうかは保証しません。ご了承ください。

静的と動的

「静的Webサイト」と「動的Webサイト」というものがあります。 単純に言ってしまえば、サーバーにhtmlファイルが存在するかどうかです。

しかし、そこで僕は疑問に思いました。

「サーバーにhtmlファイルが無いのに、ブラウザは何を読み込んでページを表示するのか?」
「Webサイトとはhtmlで構成されているものではなかったのか、アレは嘘だったのか」

結論から言うと、ブラウザが読み込むのはhtmlファイルという点で両者に変わりはありません。
静的サイトとは、サーバーにそのままhtmlファイルが置かれているパターンのものです。いわゆる普通のサイトです。
動的サイトとは、データベースにある情報(ブログなら記事)phpファイルとして置かれているテンプレート(詳細は後述)を組み合わせて、ブラウザからアクセスされるたびにhtmlを作り直すタイプのサイトを指します。

この概念がわからなくて僕は死んでいたので、これを知らない人にわかりやすく伝えるべく、超ウルトラスーパー図解をご用意しました。こちらになります。 f:id:clank0920:20180621222009p:plain

どちらにしてもWebページを開いた時に「ソースを表示」できますよね。ソースとはhtmlファイルのことですので、まあそういうことです。

index.htmlとindex.php

ではWordPressをインストールした時に現れる「index.php」とは何なのか。
お前はindexの名を持つにもかかわらずトップページではないのか。
これは完全にWP開発者のネーミングセンスを疑っていきたいところなのですが、index.htmlとindex.phpの役割は全く違います。
全く違います。

本当になんでこの名前にしたのか、これのせいで何億人のWebデザイナーが混乱し正気を失い狂気状態に陥ったのか。

重要なのでもう一度書きます。 index.htmlとindex.phpの役割は完全に違います。(これを知らなかった僕は本当にここで投げたくなりました)

WordPressにおけるトップページ

index.phpがindex.htmlと対応しないなら、WordPressでトップページはどのように定義されるのか。ここも僕は詰まりました。
ざっくりと書いてしまいますが、これに関しては「任意のページ」です。 WordPress上で作ったページのうちどれをトップにしたいのか決めたら(トップにしたいページを作ったら)、あとはWordPressの設定画面からそのページを選ぶだけです。
front-page.phpというテンプレートファイルがあり、これにトップページにしたいhtmlを全部書き込むという方法もあります。

WordPressCMSと呼ばれるものの1つであり、基本的にはブログ管理を想定されています。 まとめサイトなどを見るとわかりますが、ブログにいわゆる「トップページ」はありませんよね。アクセスすると即、新しい順に記事が並んでいると思います。 これにトップページをつけるためには、固定ページというものを作り、それを「ここがトップです」と設定してやればいいのです。

固定ページと投稿ページ

また変な単語が出ました。「固定ページ」とは何でしょうか。
WordPressには2種類のページを作成できます。固定ページとは日付のデータを持たないものです。
逆に日付のデータを持つものは「投稿ページ」と呼ばれます。違いはそれだけと思って良いのではないでしょうか。
ちなみに投稿ページでもトップページには設定できます。日付のデータなどあっても意味がないので、多くの人は固定ページにすると思います。

大量のphpファイル

WordPressをサーバーにインストールすると、サーバー上には大量のphpファイルが並びます。
プログラミングに触れるなど露程も思っていなかったデザイナーはここでアレルギー反応を起こして内側から爆発します。そう、僕です。
僕の場合は単純にナメてて知識不足だっただけですが……

沢山のphpファイルがありますが、ここではテーマのフォルダにあるものだけを考えることにします。 前述の通り、WordPress上のページはすべてブラウザからアクセスされて初めてhtmlファイルを生成します。データベース上のデータとテンプレートであるphpファイルを組み合わせることも前述のとおりです。

phpファイルの中身は、実は見慣れたhtmlソースとほとんど同じです。
プログラミングで言うところの変数に当たる部分にPHPのコードを書くことになります。例えば記事のタイトル、日付、そして大切な本文の部分などですね。
デザイン時点では「ここに本文がこれくらいの大きさで入って~」とやっていくわけですが、その時に仮置きでテキストを入れることが多いと思います。
その仮置きテキスト部分に代わりにphpコードが入っていくというだけなのです。ね、簡単でしょ?

最後に

本当に大雑把ではありますが、WordPress(というよりCMS?動的サイト?)の概念を書いてみました。
触ったこともない言語であるphpという文字で心が折れそうになった僕でしたが、なんだかんだでhtmlと分かってからは逐一調べながら作業していくことでなんとかできました。
案外やればイケる。かも知れない。

重ねて注意なのですが、あくまで「こう解釈しておけば投げずにやっていけると思う」と僕が判断しただけの内容ですので、全てが正確な情報である保証はありません。ご了承ください。
本職デザイナー・プログラマーの方、もし間違いを発見したら教えていただけると幸いです。