今回はこれからWordPressの学習を始めようとしている方向けに、自作テーマを作れるようになるまでの学習方法を解説します！
2019年はフリーランスを目指す人も増えてきて、比較的仕事量も多く単価も高いWordPressを学習する人も多いのではないでしょうか！
僕もフリーランスを目指していて案件の多いWordPressを勉強しようと思ってます！でも何から勉強したらいいかさっぱり。。。
WordPressはゴールのない学習なので、何をしたらいいか迷いますよね！
今回は自作テーマを目標としてその道筋を解説します！
この記事を最後まで読むと、自作テーマ開発までの道筋がはっきりと見えて、今何をするべきなのかわかるかと思います。
- フリーランスエンジニアを目指している方
- WordPress初心者の方
- 学習は始めているがどこに向かっているか悩んでいる方
正直この記事通りに学習を進めれば自分でテーマが作れるようになり、クラウドワークスにある案件も取れるようになるでしょう。
※前提としてHTML,CSS,PHPの基礎の学習が終わっているとします。
STEP1：WordPressの概要をつかもう
まず始めにそもそもWordPressとは何かを知る必要があり、WordPressで作れるものと作れないものを理解する必要があります。
- 個人のブログ
- 企業のホームページ
- ブログ機能付きのLP
主にこの3つを開発することが可能です。
逆に言えばwebサービスやアプリケーションはWordPressで作ることはできません。
あくまで私たちのゴールは顧客が欲しいwebページを作成するということを頭に入れておいてください。
概要を学ぶ方法
さて、WordPressとは何か、私たちのゴールが明確になったところで早速学習を始めていきましょう。
学習方法は以下の３つ
- 動画学習サイト
- 参考書を購入
- グーグルで調べて勉強
この3つの中で最も効率がいいのが、動画学習→文字ベースで再確認という流れです。
動画コンテンツは多くありますが、YouTubeかドットインストールをオススメします。
ドットインストールのWordPress入門23本を全て見ればほとんど基本的なことは網羅できると思います。
しかしドットインストールの情報はかなり古いので、環境開発の構築に手間がかかったりするので、できればYouTubeで最新のコンテンツを見ることをオススメします。
動画学習の際は動画を見ながら真似して必ず手を動かしましょう！
この段階では、WordPressでどんなことができるのか、投稿の方法、メニュー、サイドバーの仕組みが分かって入ればとりあえずOKです。
STEP2：WordPressに触れてみよう
さてWordPressの概要が掴めたところで早速WordPressに触れてみましょう。
実際に触れるにはローカル環境を構築するか、レンタルサーバーを契約するかの2つの方法があります。
MAMPサーバーなどを利用して構築してもいいのですが、難しく挫折する人も多いのでボタン一つでWordPress用のローカル環境が作れるアプリを使います。
↓WordPressのローカル環境がボタン一つで！Local by Flywheelの使い方↓
さてインストールと使い方がわかったところで、実際にWordPressに触れてみましょう！
- 記事を投稿しよう
- 固定ページを作成
- Contactフォームをプラグインを使って実装
- サイドバー、ヘッダーメニューのカスタマイズ
- カテゴリー、タグの作成
初心者の方は何が何だかよくわからないかと思いますが、一点だけ意識してもらいたいのが、全てのコマンドを試してみてどこがどう変化するのか確認するということです。
中にはプラグインなど聞いたことないような言葉が多く出てくるかと思いますが、その都度Googleで調べて知識を蓄えていきましょう。
STEP3：無料テーマをインストールして個人ブログを作ってみよう
WordPressの使い方を網羅したら、自身のオリジナルサイトを作ってみましょう。（ここまではプログラミングは使いません）
世の中にはプログラマーが作ったWordPressのテーマというものが存在します。
テーマを簡単にいうと着せ替えです。
テーマをダウンロードすることにより、より洗練されたサイトを構築することが可能です。
なんども言いますが、私たちのゴールはこのテーマを作成することです。
「WordPress無料テーマ」などでググってお気に入りのテーマがあればダウンロードして、有効化してみましょう。
テーマをダウンロードしたらファイルの中身を見てみましょう！
フォルダがどんな構成になっているのかざっくりとでいいです。
テーマの有効化が終わったところで、テーマをインストールしたことによってどこが変わったかを確認しましょう。
記事一覧がカード型になっていたり、サイドバーに検索窓が設置されていたりします。
テーマの便利機能を駆使して、記事を3記事くらい後悔して自分のオリジナルブログを作っってみましょう。
STEP4：テーマをカスタマイズしてオリジナルサイトを作ろう
さてここからが本番です。
STEP3まではコーディングをしてこなかったですが、これからはゴリゴリにコーディングして行きます。
このSTEP4を終えると、デザインの仕様変更案件や、カスタマイズの案件はこなせるようになるでしょう。
- style.cssでデザインを編集
- index.phpを編集し記事一覧の記事数を変更
- pagenation関数をいじってみる
- 検索窓をheaderに設置してみる
index.phpのフォルダを開けてみるとみたことのない関数がズラって並んでいてびっくりすると思いますが安心してください、これらの関数はWordPress独自の関数で暗記する必要はなくWordPressの公式リファレンスにすべて載っています。
なので何か機能を追加したい時にはググれば出てくるので、それをそっくりそのまま真似すればいいだけです。
あとは基礎的なifやwhileの使い方functionを使って関数を作る方法さえ知って入ればあとは自由自在にカスタマイズできてしまいます。
使ったWordPress関数や編集した関数は次回いつでも使えるようにメモするようにしましょう！
STEP5：テーマをHTML,CSSで模写
次に1からWordPressのテーマを作成する段階に移ります。
このフェーズではテーマ作成の下準備として、実際に販売されているテーマのでもサイトをHTML,CSSを使って模写してみましょう。
僕がオススメするのは日本の個人ブログの中で最も人気なJINのテーマです。
7つでもサイトがあるんですが、カルーセル機能やアニメーションがついてなくてシンプルな、4番目か最後のテーマを模写してみましょう。（TOPページのみで大丈夫です）
テーマ化するとスタイリングが多少変わってしまうので80%くらい模写する程度でOKです。
レスポンシブデザインもスマホだけでいいので、スタイリングしておきましょう。
STEP6：静的サイトをWordPress化しよう
STEP5で作ったHTML,CSSファイルをWordPress化します。
↓HTMLからWordPressへの詳しい手順↓
JINそのままのテーマを真似することはこの段階では無理なので、以下の6つは実装してください。
- 検索した時に特定の記事の表示
- 404ページ
- ページネイションの設置
- 個別記事に移動する
- サムネイルの設置
- カテゴリー、日付の設置
このレベルまでできると、自分で簡単なオリジナルテーマが作れるようになるはずです。
テーマ化で使用したWordPress関数は暗記するのでなく、いつでも使えるようにメモにてストックしておきましょう。
STEP7：オリジナルテーマを作ってみよう
さてここまでお疲れ様でした。
あなたはもう自分でオリジナルテーマを作れるスキルが身につきました！
早速簡単なオリジナルテーマを作成してみましょう。
まず始めに手書きでもいいので、ブログのレイアウト（構成）を決めましょう。
最低限実装して欲しいのは以下の10個。
- ブログタイトル
- ヘッダーメニュー
- 記事一覧（サムネイル付き）
- ページネイション
- サイドバー
- フッターメニュー
- 個別ページ
- お問い合わせフォームページ
- 404ページ
- 検索機能
テーマが完成した後に確認するのがScreamingfrog というツールを使って、URLの構造に問題が無いかチェックするようにしましょう。
ふぅ。やっとテーマの開発が終わったー！
いえ！ここからがスタートですよ！
開発したテーマにカスタマイズは無限なので、ググりながら完成度の高いテーマを目指しましょう！
まとめ
お疲れ様でした！
このレベルまで達すると簡単なWordPress案件はこなせるようになるので、実際に仕事を受注して実践力をつけていきましょう！
WordPress学習にゴールは無いので、自分が思い描いてるテーマが作れるまで勉強し続けるようにしましょう！
最後までご覧いただきありがとうございました！
