トノムラマサシ 
WordPress学習したけど学習範囲広すぎて、結局よくわからない！効率良く学習する方法ないかな？
「WordPressを学習したけど覚えること多すぎて学習だけでメンタルやられました！」みたいな人意外と多くないですか？
実は僕もその一人です。
学習終わってもうできる気になって、ほったらかしてました。そしてできないようになる、、
実はそういう人多いのではないでしょうか？ほんとに勿体無いです！！
学習ではインプットしてから、復習でアウトプットすることにより、完全にスキルとして身に付くので、重要はことはアウトプットをすること、になります。
- WordPressで稼げるようになりたいけど、どうやって学習したらいいのかな？
- WordPressを効率良く学習する方法を教えてほしい。
- WordPressを学習したけど、使い方がよくわからない。
このようなお悩みを抱えた人が対象の記事となります！
僕がフリーランスコーダーとしてWordPressを使って制作をしている経験を含めて今回は徹底的に解説をしようと思います。
まずはオリジナルテーマを作れる。を目標にしよう
テーマとはWordPressの機能の一つで、テーマを設定することでデザインなどのWEBサイトの骨格を決定づけるものがテーマで、簡単にいうとデザインテンプレートみたいなものです。
なので、テーマを変更をすることでいろんなデザインに変更できるのがメリットですが、デザイン部分以外の機能も色々とテーマに入れられるので、実際はあまりテーマを途中で入れ替えることはあまりしないのが実情です。
WordPressのテーマは2パターンあります。
- 既存テーマ（無料、有料）
- オリジナルテーマ
既存テーマには無料テーマと有料テーマがあり、既存テーマを使用するメリットは定期的なWordPressのバージョンアップによっての不具合回避のために、テーマ製作者がテーマのアップデートをおこなってくれて、非常に便利です。
オリジナルテーマはその名の通り、オリジナルでテーマを制作したテーマのことで、WordPressの知識があれば簡単にオリジナルテーマを作れてしまうのが、またWordPressのすごいところでもあります！
唐突ですが、WordPressを使ったサイト制作はどんな人が発注するでしょう？
- Webの知識がある人（制作会社など、）
- Webの知識が無い人（一般事業者）
基本的にこの2パターンに分かれると思います。
ではこの2通りの人に最適なテーマをチョイスしてみましょう！！
答えはこの通りです！
- Webの知識がある人（制作会社など、） → オリジナルテーマ
- Webの知識が無い人（一般事業者） → 既存テーマ
Webの知識がある人（制作会社など、）はカスタマイズ・運用しやすいオリジナルテーマで作って欲しいでしょうし、Webの知識が無い人（一般事業者）は定期的なアップデートを受けることでWebの知識無しでバグを回避できて、とてもありがたいと思います。
実際に現場では制作会社は当たり前にオリジナルテーマ制作でお願するし、WEBの知識の無い人は有料テーマでの制作を希望される人が多い印象です。
なので、最終的には既存テーマも扱える必要があるでしょうし、もちろんオリジナルテーマも扱える必要があります。
まずはベースを整える意味でもWordPressの基礎的な部分を身に付けるにはオリジナルテーマ制作を学習することでWordPressの構造を深く理解できるので、まずはオリジナルテーマ制作が確実にできる。という状態までもっていく必要があります！！
では実際にWordPressのオリジナルテーマを学習する方法をみていきましょう。
オリジナルテーマをマスターするための手順を理解しよう
僕の経験から実際にオリジナルテーマを学習するための手順です。
- 動画でまずWordPress全体を学習する（インプット）
- 動画を観て静的サイトをワードプレス化する（アウトプット）
- 本をみて静的サイトをワードプレス化する（アウトプット）
オリジナルテーマ学習の手順ですが、静的サイトをワードプレス化とありますが、静的サイトはHTML、CSSだけで作ったサイトのことで、それをWordPressのシステムに作り変えることをWordPress化といいます。
実はこのWordPress化するということがオリジナルテーマ制作を作ることと同じ意味になります。意外とこの部分を理解していない人が多いかもです。
オリジナルテーマ制作 ＝ 静的サイトをワードプレス化すること
①動画でまずWordPress全体を学習する（インプット）
まずはWordPressはPHPを使っているので、PHPの基礎をマスターしないと！となりそうですが、PHPの基礎は学習しないでも大丈夫です！WordPressで使うのはWordPress関数というWordPress独自の言語をほぼ使うので、PHPを使うのは基本的な構文のみになります！！なので、PHPの学習をしなくても問題無く進められます。
WordPressを学習するにあたり、WordPress化がなんなのかということを動画で全体的にさらっと学習していきましょう！！大事なことですが、観るだけじゃなく実際に動画の通りに手を動かして学習するようにしてください！
動画はこちらが参考になると思います。
udemyの教材で1ヶ月に一度格安セールで1000円ちょっとで購入出来るので、タイミングをみて購入してください！
こちら谷口誠さんという人が作っていて、優しい喋り口でめちゃくちゃわかりやすいです！！教材はこれ一択でほぼ十分というくらいで、僕もこの教材しか買っていません。
こちらの教材を一通り終わらせたら、それで問題なくOKです。
②動画を観て静的サイトをワードプレス化する（アウトプット）
HTML、CSSを学習した時に作った静的サイトや、ポートフォリオなどはありませんか？もしあるなら、それをワードプレス化していきましょう！
もしないなら、こちらのサイトからサンプルサイトのコードを拾ってこれるので、簡単に静的サイトを作りましょう。
Codestep
ポイントは動画を見ながら進めてもいいということですね。初めてのワードプレス化は一度学習しても全然頭に入っていないので、全然できないと思うので大丈夫です。とりあえず動画見ながらでも自分のサイトをワードプレス化できた！！偉い！と自分を褒めてあげましょうw
ちょっとずつ自信アップさせていくことがポイントです。
③本をみて静的サイトをワードプレス化する（アウトプット）
動画を観ながら静的サイトをワードプレス化できたら、次は本を使って静的サイトをワードプレス化してみましょう！
どういう効果があるかというと、動画をみながらよりも、活字ベースで作業するとより頭を使って作業することができます！頭を使うということは、よりスキルが身につけやすくなります。
おすすめの参考書はWordPressのバージョンがより最新の物を題材として使っているもので、ワードプレス化に特化している本がいいと思います！！
僕は2022年に発売されて、ワードプレス化に特化したこちらの本をチョイス。内容的にもかなり満足で、わからないところがあれば、辞書的にも使えてしまう便利な本でした。
本をみながらだけで、静的サイトのワードプレス化ができたならもうかなりワードプレス化の知識が付いてきていると思います。
ある程度のワードプレス化の手順がわかってきたら、次はより細部の理解を深めていきましょう。
例えば、
- メニューの設定、出力方法
- テンプレートの活用方法
- パンクズリスト自作、ページネーションの設定など、、
めちゃくちゃ学ぶことが多いかもですが、実はWordPressはかなり便利なことに気づくと思います。
何ページもあるサイト制作で静的サイトで作ったら、例えばheaderのリンクの変更で全てのHTMLファイルのheaderのリンクを変更しないといけないとか、めちゃめんどくさいです！！
これをWordPressならheaderはheaderのテンプレートを作っておき、1箇所を変更するだけで全てのページのリンクが変更できる。ということが簡単に実現できます！
WordPressがめっちゃ便利なことに徐々に気づいていくと思います。
まだワードプレス化が不安なら、あと何度か違う静的サイトを使い、WordPress化をしてみてください！！何度もやっていくうちに意外と簡単かもっとなってくると思います！！
④案件でオリジナルテーマを使った制作をしてみよう
今まで、やってきたことはあくまで練習なので、しっかりと自信をつけていくためには、WordPress案件を受注して、実際にオリジナルテーマ制作を経験してみる必要があります。
実案件は、想定していないお客さんの要望を必死に解決しないといけないので、怖さもあると思いますが、柔軟な対応力もついてかなりの自信が付くので、実案件は乗り越えないといけない壁でもあります。
実案件を乗り越えると本当の自信が付くので、ぜひトライしてみましょう！
けど実際にWordPress案件を受けるにあたり、どういうやりとりをお客さんとすればいいのか？と不安だと思うので、実際の案件でオリジナルテーマを採用する時の確認ポイントをリストしておきます。
- 制作後のサイト管理はどうするのか？を確認する
- お客さん自身で管理するのか？管理もこちらで対応するのか？
- 管理をお客さん自身でするなら既存テーマも選択肢に入れる
- お客さんにWebの知識があれば、オリジナルテーマでOKの場合もある
- オリジナルテーマで制作していいか？の確認を取る
- オリジナルテーマは固定ページは管理画面でのテキストや画像の変更は出来ないことを周知する
- 投稿はお客さん自身で変更や更新ができる。と伝える
このようなことをしっかりと事前に相談しておくと制作後に「思っていたのと違う！」とトラブルにならないので、事前にしっかりと相談しておくことがかなり重要になります。
もし作った後に、お客さん自身でやっぱり編集したかった！となった時は、クラシックエディタで固定ページにHTMLを移し変える方法もあって、それなら管理画面からクラシックエディタで編集が可能なので、それで提案してみるという方法も裏技であります。
何にしても事前の取り決めをちゃんとしておけば、トラブルになっても大丈夫なので、ちゃんと事前に相談してその議事録を残しておくと、後々助かるので議事録を付けておくのもおすすめです。
有料テーマも時間があれば学習してみよう
僕は初期の頃、オリジナルテーマ制作がよくわからないというのもあり、Snow Monkeyという有料テーマをデザイン通りにカスタマイズするという方法でサイト制作をしておりました。
ブロックエディタでHTMLの構造を作り、CSSでカスタマイズをしていくという工程なのですが、まずブロックエディタでHTML構造を作るのがめっちゃくちゃめんどくさい。そしてCSSも有料テーマのCSSを打ち消しながらするので工数がめっちゃかかるという問題がありました。
今思えば、かなり大変でしたね。
今、仮に有料テーマを使ってWordPress案件をするなら、まず静的でサイト制作をして、有料テーマをインストールしたWordPressにHTMLをクラシックエディタにコピペ。CSSはプラグインに入れる。header、footer、ドロワーメニューは必要であれば、有料テーマの独自フックでカスタマイズするか、子テーマでheaderとfooterのテンプレートを作る方法で制作します。
はっきりいって有料テーマのカスタマイズの方がオリジナルテーマよりも難しいことをしないと対応できないことがあるので、WordPressマスターの製作者は意外と有料テーマを駆使していますね。
有料テーマでおすすめなのが、こちらの２つになります。
WordPress有料テーマの二大巨頭です。
Snow MonkeyもSwellも製作者がかなりWordPressにコミットしており、機能追加や、WordPressアップデートに対応するためのアップデートをかなりの頻度で出してくれますので、利用者からすると機能的にもセキュリティ的にも安心だと思います。僕自身も２つとも保有しておりましてかなりオススメできます。
有料テーマはある程度、HTMLが決まってしまっているということが多くて、後からここにデザインを追加したいけど、HTMLを入れることができないということがよくあります。
こういう時に便利なのがフックです。
特定の場所に機能追加したり、機能を書き換えたりするのがフックとなります。
フックには2種類あります。
- アクションフック
- フィルターフック
アクションフック
オリジナルテーマを作っていたらよく使う、add_action()の関数で利用できます。特定の機能を追加したり、HTMLを特定の場所に追加できます。
フィルターフック
add_filter()の関数を使うことでフィルターフックを利用できます。特定の箇所の機能やHTMLなどを別のものに書き換えることができます。例えば、現在のHTML構造を変更したい時など。
これらのアクションフックやフィルターフックを利用することで、テーマのもともと機能では、カスタマイズできない部分をフックを使うことでHTMLを追加したり、テンプレートそのものを変更したりすることで、より柔軟に痒いところに手が届く制作が可能になります。
そして、先ほど紹介した、Snow MonkeyやSwellといったテーマにはテーマ独自のフックが用意されていて、そのテーマ独自のフックを使うことで、かなり便利になるので、テーマ独自フックを勉強する価値はかなりあります。
Snow Monkeyの製作者さんがSnow Monkeyの独自フックを紹介してくれている動画
Swellの製作者さんがフックについての解説をしてくれている動画
上記の動画はフックのことをかなり詳しく説明してくれているので、こちらの動画で学習してみてください。
子テーマの使い方も理解しておくとあらゆる状況でも対応可能
既存テーマで制作をしていて、テーマの機能を使っても、フックを使っても、どうしようもない状況が来ると時もあるかと思います。
そういう時に知っていると便利な機能が子テーマです。
どうしてもテーマのテンプレートをいじりたい時、間違って既存テーマそのもののテンプレートをカスタマイズしてしまうと、既存テーマのアップデートでカスタマイズデータが全て消えてしまいます。
既存テーマのテンプレートをカスタマイズするとバージョンアップでカスタマイズが消えてしまうので注意
そうならない為に、既存テーマのカスタマイズ専門テーマを作るのですが、それが子テーマです。
ここでは子テーマを紐づける既存テーマのことを親テーマといいますね。
子テーマの作り方は、子テーマ用フォルダにfunctions.phpファイルと、style.cssファイルを２つ入れて、それぞれに紐づける親テーマの記述を書いて、紐づける親テーマと同じディレクトリに配置するだけです。めちゃ簡単。
子テーマの使い方は、カスタマイズしたい親テーマと同じ名前のテンプレートを子テーマに作って、親テーマのテンプレートのコードをごっそりコピーして、子テーマの同じ名前のテンプレートにペーストするだけ。
あとは子テーマでゴリゴリとカスタマイズします。
すると読み込むテンプレートは子テーマのテンプレートを優先するので、表示上ではちゃんとカスタマイズされるが親テーマをバージョンアップしてもカスタマイズ内容は子テーマにあるので、カスタマイズが消えずに残ります。
いやーなんて子テーマ便利なんでしょう！！はい落とし穴です。
子テーマに持ってきたテンプレートは親テーマをアップデートしても古いままなので、永遠に子テーマのテンプレートが古いままで、タイミング悪くエラーになってしまう可能性があります。テーマ製作者はどんなカスタマイズしているか？なんて知らないので、、
なので、子テーマでカスタマイズする時はなるべく最小のテンプレートで済ます。ということが重要です。子テーマでガシガシとテンプレート作りまくるのは危険です（エラーの温床になる）。
僕の中では子テーマの使用は最終手段という位置付けですが、一度は子テーマで制作してみるとめっちゃ勉強になると思います。
今回の内容のまとめ。
- オリジナルテーマをまずは作れるところまでスキルアップしよう。
- 慣れてきたら、既存テーマのフックを学習しよう。
- 子テーマを学んでおくと困った時に役立ちます。
今回は以上となります。
もしWordPressで難しい実装がありましたら、下記からご相談いただけましたらありがたいです。