【WordPress】オリジナルテーマを独学で制作!HTMLをPHPに変換した実際の手順
どうも、ナツリンです。
WordPressのオリジナルテーマを制作において、PHPの知識は欠かせません。
かつてPHPの知識が全くなかった私は、「なんだかよくわからない」と逃げ続けていました。しかし本腰を入れて勉強してみると、学び始めてから2か月ほどで自分のオリジナルテーマのPHP化を完了させることが出来ました。
今回は独学でWordPressのオリジナルテーマを制作した際に、「どのようにHTMLをPHPに変換したのか」について書きたいと思います。
▼ 関連記事だよ


PHPとは
まず気になるのが、「PHPって何なのか」「なぜPHPファイルの作成が必要なのか」ということですよね。
PHPとは、HTMLに組み込んで使用することで、サーバー内にあるデータを取得して、HTMLにコンテンツとして表示させることができる、Web開発に特化したプログラミング言語です。サーバーとHTMLの架け橋のようなイメージになります。
WordPressのテーマ作成においてPHPが必要な理由は、WordPressの大部分がPHPで作成されているからです。記事の「タイトル」「画像」「見出し」「本文」などのデータがサーバーに保存されており、それらのデータを取得してブラウザに表示させるためには、HTMLにPHPを組み込むことが必要なのです。
WordPressは「コンテンツ」と「デザイン」を別々で管理しており、それらを組み合わせて構成することでWebページを表示させています。このような仕組みのおかげで「コンテンツを更新すること」と「好きなデザイン(テーマ)に着せ替えること」の両立が可能になっているのです。
このように、WordPressは仕組みとして「コンテンツ」と「データ」を分けて管理しているため、それらを組み合わせてWebページを表示させるために、PHPは不可欠なのです。
HTMLをPHPに変換した手順
それでは実際にどのようにHTMLにPHPを組み込んでいけばよいのか、私がPHP化を進めた手順を紹介したいと思います。
本を読んでPHP化のやり方を学習
私はPHPについて「きちんと体系化された知識を学びたい」と考えていたため、本を読んで学習することにしました。
Webで検索すれば断片的な知識は得られますし、コピペして完成させることもできます。しかし「なぜこのコードを書く必要があるのか」という仕組みまで理解しておかないと、知識を定着させることはできないと思うのです。
私はこちらの本を活用して学習を進めました。PHPの概念的な説明から始まり、用意されたHTMLファイルにPHPを組み込んでサンプルサイトを一通り完成させることで、手を動かしながら学ぶことができます。
▼ 『WordPressオリジナルテーマ制作入門』(技術評論社)
私はこの本を2周することで学びを深めました。1周目は「全体像を理解すること」を目的に、2周目は「学んだ知識を定着させること」を目的に進めました。2回も同じことを繰り返すと、「次はこのコードを書かないといけないな」ということが体感としてわかるようになってきます。
知識が体に染み込んだことを実感したら、自分のテーマをPHP化する準備が整ったと判断してOKでしょう。
実際に自分のサイトをPHP化
本を使った学習が終わったら、実際に自分のHTMLファイルにPHPを組み込む作業に取り掛かりました。
本の3周目を読み進めながら、サンプルサイトではなく自分のサイトを作り上げるイメージで進めていきます。ざっくりした手順は次のようになります。
HTMLをPHPに変換する手順
- 開発環境をつくるためにLocalをダウンロードする
- Localの中にテーマを作成するためのフォルダを用意する
- 固定ページ、投稿ページ、アーカイブページ、トップページ…と各ページのHTMLファイルにPHPを組み込んでいく(ファイルの拡張子もhtmlからphpに変換)
- コンテンツを編集して、実際に反映されているかテストをする
個人ブログのようなシンプルなつくりのサイトであれば、こちらの本の通りに進めることで80~90%くらいは完成できると思います。
私の場合、トップページにカルーセル(回転画像)で表示させる部分があったり、問合せページではプラグインの使用が必要だったりしたので、自分で調べなければいけない箇所が少しありましたが、大枠は本の通りに進めることで完成させることができました。
初めてPHP化を行った感想
以上が、WordPressのオリジナルテーマ制作において、HTMLファイルをPHPファイルに変換した手順になります。
実際にPHP化してみて感じたこととしては、「本に書いてある通りに進めたら意外と簡単にできた」という感動が一番大きいです。
勉強する前は「サーバーからデータを取得するとかよくわからん」とか、「自分のPCに開発環境を用意するって何?」と思ったりしていました。そんな疑心暗鬼な私には、「正しいやり方を体系的に紹介してくれる本」を通して進めるやり方がすごく合っていたみたいです。
社会人として週5日で働きながら空いた時間に作業を進めて、PHPを勉強するのに1ヵ月、自分のサイトをPHP化するのに1ヵ月で、合計2か月ほどかかりました。Webの知識の有無によってもっと時間がかかったり、すぐに終わったりすると思います。スケジュールを立てる際に参考にしていただけたら嬉しいです。
オリジナルテーマをほぼ完成させるところまで書いたので、次は「オリジナルテーマでつくったサイトを公開させるまでにやったこと」について書きたいと思います。
今回も最後まで読んでくださりありがとうございました!
▼ 次はオリジナルテーマを公開しよう

▼ オリジナルテーマ制作の全体像はこちら


