ナツリンブログ

【WordPress】オリジナルテーマを独学で制作!HTMLをPHPに変換した実際の手順

【WordPressオリジナルテーマ制作体験談】HTMLをPHPに変換しよう

どうも、ナツリンです。

WordPressのオリジナルテーマを制作において、PHPの知識は欠かせません。

かつてPHPの知識が全くなかった私は、「なんだかよくわからない」と逃げ続けていました。しかし本腰を入れて勉強してみると、学び始めてから2か月ほどで自分のオリジナルテーマのPHP化を完了させることが出来ました。

今回は独学でWordPressのオリジナルテーマを制作した際に、「どのようにHTMLをPHPに変換したのか」について書きたいと思います。

▼ 関連記事だよ

あわせて読みたい
【WordPressオリジナルテーマ制作体験談】独学で制作した実際の手順
【WordPress】意外とシンプル!オリジナルテーマを独学で制作した実際の手順 どうも、ナツリンです。 前に書いた『不器用人間がオリジナルテーマを独学でつくったワケ』に続き、今回は「WordPre…
あわせて読みたい
【WordPress】不器用人間がオリジナルテーマを独学でつくったワケ どうも、ナツリンです。 最近自分の中で大きな出来事がありました。去年の11月から作成していたWordPressのオリ…

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に変換する手順

  1. 開発環境をつくるためにLocalをダウンロードする
  2. Localの中にテーマを作成するためのフォルダを用意する
  3. 固定ページ、投稿ページ、アーカイブページ、トップページ…と各ページのHTMLファイルにPHPを組み込んでいく(ファイルの拡張子もhtmlからphpに変換)
  4. コンテンツを編集して、実際に反映されているかテストをする

個人ブログのようなシンプルなつくりのサイトであれば、こちらの本の通りに進めることで80~90%くらいは完成できると思います。

私の場合、トップページにカルーセル(回転画像)で表示させる部分があったり、問合せページではプラグインの使用が必要だったりしたので、自分で調べなければいけない箇所が少しありましたが、大枠は本の通りに進めることで完成させることができました。

初めてPHP化を行った感想

以上が、WordPressのオリジナルテーマ制作において、HTMLファイルをPHPファイルに変換した手順になります。

実際にPHP化してみて感じたこととしては、「本に書いてある通りに進めたら意外と簡単にできた」という感動が一番大きいです。

勉強する前は「サーバーからデータを取得するとかよくわからん」とか、「自分のPCに開発環境を用意するって何?」と思ったりしていました。そんな疑心暗鬼な私には、「正しいやり方を体系的に紹介してくれる本」を通して進めるやり方がすごく合っていたみたいです。

社会人として週5日で働きながら空いた時間に作業を進めて、PHPを勉強するのに1ヵ月、自分のサイトをPHP化するのに1ヵ月で、合計2か月ほどかかりました。Webの知識の有無によってもっと時間がかかったり、すぐに終わったりすると思います。スケジュールを立てる際に参考にしていただけたら嬉しいです。

オリジナルテーマをほぼ完成させるところまで書いたので、次は「オリジナルテーマでつくったサイトを公開させるまでにやったこと」について書きたいと思います。

今回も最後まで読んでくださりありがとうございました!

▼ 次はオリジナルテーマを公開しよう

あわせて読みたい
【WordPress】オリジナルテーマが完成してから公開するまでに実際にやったこと どうも、ナツリンです。 WordPressのオリジナルテーマを独学で制作した方法をこれまで紹介してきて、前回の記事で…

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

あわせて読みたい
【WordPressオリジナルテーマ制作体験談】独学で制作した実際の手順
【WordPress】意外とシンプル!オリジナルテーマを独学で制作した実際の手順 どうも、ナツリンです。 前に書いた『不器用人間がオリジナルテーマを独学でつくったワケ』に続き、今回は「WordPre…