【WordPress】オリジナルテーマ制作のコーディングを独学で行った方法
どうも、ナツリンです。
コーディングって、HTML・CSS・JavaScriptなどさまざまな知識が必要で、初心者かつ独学の人間にとってはかなりハードルが高く感じますよね。
今回はWordPressのオリジナルテーマを独学で制作した私が、コーディングを行った方法について書いていきます。細かい知識は専門の方のブログを読んだ方が良いと思いますが、あくまで「初心者・独学でどのように進めたのか」をざっくりとイメージする参考になったら嬉しいです。
▼ 関連記事だよ
あわせて読みたい
あわせて読みたい
本を読んでコーディングの復習
まず初めにコーディングの復習から始めました。
コーディングってやらないとすぐに忘れるんですよね。私は勉強しただけで満足してきたタイプだったので、知識が経験として定着しておらず、数年前に勉強したこともすっかり忘れていました。
そのため過去にお世話になった本を読み直して、HTML・CSS・JavaScriptの知識を思い出すことから始めました。その際に活用した本を紹介します。
HTMLを勉強した本
HTMLの全体概要を思い出すために、最初にこちらの本で復習をしました。
1冊でHTMLとCSSの勉強ができますし、レスポンシブデザインとは何ぞやというところから学ぶこともできます。説明もわかりやすいので、コーディングの入門には非常におすすめの本です。
▼ 『HTML5&CSS3デザインブック』（エビスコム）
CSSを勉強した本
次にCSSの知識を深めるために、こちらの本で勉強しました。
最新のコーディング方法について解説されているので、最適なコードの書き方を知ることができます。手を動かして3つのサンプルサイトを作成しながら進められるため、知識が定着しやすかったです。
▼ 『HTML5/CSS3モダンコーディング』（翔泳社）
JavaScriptを勉強した本
最低限の知識は必要だと思い、JavaScriptの勉強もしました。
簡単なWebサイトを制作するために必要なJavaScriptの知識は、こちらの本1冊で十分だと思います。Web初心者にもわかりやすいように、丁寧にかみくだいて説明してくれている本です。
▼ 『確かな力が身につくJavaScript「超」入門』（SBクリエイティブ）
ベースとなるフォルダの準備
次はコーディングに入る準備として、ベースとなるフォルダの作成をしました。
空のHTMLファイル「index.html」を作成します。次に同じ階層に、全ページ共通で使用する素材を入れるための「assetsフォルダ」をつくり、中に「cssフォルダ」「jsフォルダ」「imageフォルダ」を作成します。
さらに「cssフォルダ」の中には「style.css」を、「jsフォルダ」の中には「script.js」を作成して入れておきます。
各ページのHTMLファイルはこの後の工程で、「index.html」と同じ階層に作成していく流れになります。現段階ではファイルの中身は全て空の状態です。
各ページのコーディング
ここまで準備ができたら、各ページのコーディングをしていきます。
私は以下の順で、「投稿ページ」や「固定ページ」など簡単なページからコーディングをしていきました。「トップページ」は画像をループさせるなど複雑な部分がありましたし、「問合せページ」はフォームを使用しないといけなかったので難しいと思い、後回しにしました。
まずはシンプルなページからコーディングをして、慣れてきたら複雑なページのコーディングに進むのが良いと思います。
コーディングしたページの順番
- 投稿ページ（single.html）
- 固定ページ（page.html）
- アーカイブページ（archive.html）
- 検索結果ページ（search.html）
- 404ページ（404.html）
- トップページ（index.html）
- 問合せページ（contact.html）
初めてでわからないことだらけでしたが、先ほど復習した本を読みながら何とか全ページのコーディングを終えることが出来ました。
まとめ
WordPressのオリジナルテーマ作成におけるコーディングの手順は以上になります。
かなりざっくりした説明になってしまいましたが、全体的な流れをイメージする参考になったら嬉しいです。
次はいよいよ、コーディングしたHTMLファイルをPHPに変換して、オリジナルテーマの完成に向かっていきます。
今回も最後まで読んでくださりありがとうございました！
▼ 次はHTMLをPHPに変換しよう
あわせて読みたい
▼ オリジナルテーマ制作の全体像はこちら
あわせて読みたい
