【独学】ワードプレスの自作テーマを作成するための９ステップ
「WordPressのテーマを自分で作ってみたい！」
「でもどんな道筋で進めていけばいいかわからない」
このサイトはなんの知識もなかった状態から独学で作成しました。
時間はかかりますが、着実に１つ１つステップを踏んでいけば誰でもワードプレスのテーマを作れるようになります。
意識したこと
「作りたいものを決める」 → 「知識をインプット」 → 「学んだことを使って作ってみる」ということを常に考えていました。
作りたいものを常にイメージしながら勉強することで、モチベーションを維持することができたと考えています。
学習の順番
学習の順番は、以下の通り。
- 何の知識が必要なのか知る
- progateでhtmlとcssの基礎を理解する。
- 適当なページを模写
- 自分の作りたいサイトをデザイン
- デザインを元にhtml cssでコーディング
- WordPress用のphpを学ぶ
- 4で作ったデザインを発展させ、作りたいサイトをデザイン
- コーディングを行う※ここでテンプレート完成
- 作ったサイトを公開
1. 何の知識が必要なのか知る
まずは、ワードプレスのテーマを自作するために何の言語が必要なのか知っていきましょう。
必要な言語は、html、css、phpの３つです。
それぞれの言語について簡単に説明すると、htmlはWebページを表示させるのに必ず必要です。
cssは、ページの装飾に必要です。
phpは動的なページを作成するために必要です。
それだけでなく、自分用のWebページをデザインする必要もあります。
上記の言語使えるようにすることで、自分の考えたWebページが表現することができるようになります。
それでは早速html、cssを学んでいきましょう！
2. Progateでhtmlとcssの基礎を理解する
htmlとcssはWebサイト書くには避けては通れない言語になります。
これらを学ぶために、Progateというサービスを利用しました。
Progateとは、オンラインのプログラミング学習サービスです。
月額約1000円で様々な言語の基礎的な学習ができます。
Progateをお勧めする理由としては次の通り。
- スライドの質が圧倒的に良い
- 説明がわかりやすい
- 学んだ知識をすぐに使える
- 情報が新しい
学習は知識のインプットにはスライドを使って行います。
その知識を使って簡単なコーディングを行うことで知識を身につけていくことができます。
このような理由からProgateで学びました。
Progateの会員登録ができたら、学ぶセクションは以下のものになります。
- HTML&CSSの全レッスン
- HTML&CSSの開発環境を用意しよう
- 検証ツールの使い方
これができると、最低限のwebページをコーディングすることができます。
3. 適当なページを模写
先ほど学んだhtml、cssを使って適当なページを模写してみましょう。
実際に公開されているサイトを自分でコーディングすることで、得ることが多くあると思います。
かなりハードだと思いますが頑張りましょう。
私が模写に使用したサイトは、Airbnbです。
しかし、サイトがリニューアルされてしまい、私がやったものよりかなり難しくなってしまったので、自分ができそうだなと思ったサイトを模写してみてください。(動いているサイトを模写するにはjavascriptという言語の知識が必要だったりします。今回はスルーします。)
模写の際のルール
- htmlやcssのコピーは禁止
- 画像はサイトからダウンロード or 似ている画像を探してくる
- PC版とモバイル版をレスポンシブでコーディング
- ページの遷移は適当で良い（見た目だけでok）
このようなルールのもと模写を行いました。
4. 自分専用のページをデザイン
この辺りから楽しくなってくると思います。
トップページだけで良いので、自分だけのページをデザインしていきます。
私は、Adobe XDというアプリを使ってデザインを行いました。
紙に書いてデザインしても良いと思いますが、このアプリを使うと、ページの遷移、グループ分け、レスポンシブのデザインがやりやすいので使用しています。
大まかに、デザインをしていく手順は以下の通り。
- 自分が好きだな、作りたいと思うページがあれば、いくつかピックアップする。
- 紙などに大まかなイメージを書き出す
- ヘッダー、フッター、サイドバー、コンテンツなど、領域ごとにデザインをしていく
私は、PC→モバイルの順でデザインをしました。
参考までに私が参考にしたサイトは以下の２つです。
5. デザインを元にhtml cssでコーディング
ここでは、先ほどのデザインを元にコーディングを行なっていきます。
ここで、ページを模写した経験が役立ちます。
バックグラウンドなどの画像が欲しい方は、フリーで使える画像を探すか、自分で持っている画像を使いましょう。
私は画像が必要になったら、写真ACというサイトを利用させていただいています。(利用させていただくときは、規約をよく確認するようにしてください。)
Webページで画像を使用するときに、画像の容量が大きくなると、ページの読み込みに時間がかかってしまうので、画像の圧縮をしてから使用するようにしています。
画像の圧縮には、Squooshというサイトを利用しています。
画像のサイズ、圧縮度を自分で選択できるので大変重宝しています。
6. WordPress用のphpを学ぶ
いよいよ終盤戦です。
ここでは、WordPressを動かすのに必要なphpという言語を学んでいきます。
WordPressを動かすのに必要なphpの知識は、かなり限定されており、また、WordPress特有のルールを理解しなければなりません。そのため、ここで私は本を使い学びました。
「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」という本です。
少し値段は張りますが、phpの基礎からかなりわかりやすく説明してくれていて、理解しやすいです。
また、本にWordPressのサンプルテーマのコードが付属してくるのでそれもよかったです。
次は、この本で学んだ知識と、ググって得た知識を応用しながら自分用のウェブサイトのコーディングをしていきます。
7. 4章で作ったデザインを発展させ、作りたいサイトをデザイン
6章でワードプレスのトップページ、アーカイブページ、個別ページなどについて理解したはずです。
この知識と、4章で作ったデザインを組み合わせて、ワードプレス用のウェブサイトのデザインをしてみましょう。
デザインでは、header.php、sidebar.php、footer.php、contents.phpなど、どのファイルにどのような記述をしていくかということを考えながらデザインしていくと、コーディングする際に非常に楽になります。
必要ファイルについてはこちらの記事で解説しています。
私は、トップページ、アーカイブページ、個別ページの３つについてのデザインをここで行いました。
8. デザインを元にコーディングを行なっていく
5章で行なったコーディングと、基本的にやることはそんなに変わりません。
手順は以下の通り。
- デザインを元に、どのファイルに何を記述していくのか確認
- 5章で作ったhtmlの記述を適宜コピーしながらphpのコードを書いていく
- 一旦必要なファイルを全て書き切る(サイトが動くかどうかの確認は後でする)
- お使いのPCにローカルで動かせるワードプレスのテスト環境を作成
- 作ったテスト環境でコードを動かしてみる
- おそらく、何らかの不具合（画像が表示されなかったり、リンクがおかしかったりするなど)が発生するので対処する。
作ったテーマを公開するサーバーとは別に、テストサーバーを立てて、そこで書いたコードが動くかテストしていきます。不具合に対処していきましょう。
テストサーバーの立て方はこちらの記事で解説しています。
ここまで来たら、あなただけのテーマ自体は完成です！本当にお疲れ様でした！公開まであと一歩！！
9. テーマを公開する
作ったテーマを本番用のサーバーに公開していきますが、そのまま公開することはできません。
SEOの対策とセキュリティの対策がまだ済んでいないからです。
そこで、作ったテーマを公開するまでの大まかな手順は以下の通りです。
- テストサーバーから作ったテーマをエクスポート
- 本番用のサーバーのWordPressにテーマをインストール
- セキュリティの対策を行う
- SEOの対策を行う
- ページを公開！
私は、本番のサーバーは「エックスサーバー 」というレンタルサーバーで行うことにしました。
セットアップが簡単で使いやすいです。(当初はラズベリーパイでサーバーを作って公開しようと考えていたのですが、いろいろ設定することが多かったり容量の制限などの問題があり断念しました。)
テストサーバーから本番のサーバーにワードプレスのデータを移した後、基本的にはWordPressのプラグインの機能を利用して、セキュリティ、SEOの対策を行っていきます。
対策が終わったらいよいよページを公開して、完了です！！
最後に
ここまで読んでくださりありがとうございました。
完全初心者からワードプレスのテーマを作れるようになるまでという長い道のりを書いてみました。
実は、私はプログラミングを学び始めてから、いろいろ寄り道をしたりしましたが、ここまで到達するのに約２年ほどかかりました。
私の記事が誰かの役に立てたなら幸いです。
