- フリーランスとしてWordPressの案件（仕事）を受注できるようになりたいけど、何を勉強すればいいか分からない。
- 実際にWordPressの仕事をしている現役フリーランスの方から、案件が受注できるレベルまでにするべき学習内容を全て教えて欲しい！
今回の記事では、これからWordPressの学習を始められて、最終的には案件を受注できる様になりたい方向けに、WordPress学習の完全ロードマップをご紹介します！
HTML,CSS,PHPなどの学習方法を紹介しているサイトや、プログラミングスクールは多いですが、WordPressの学習方法をまとめているサイトは非常に少なく、プログラミングスクールもあまりありません。
WordPressを習得し、案件を受注できる様になると、非常に単価の高い（最低10万円〜）収入を得れる様になるので、ノマド的な自由なライフスタイルを得れることにも直結します。
→ 【高単価】WordPress制作をフリーランスにオススメする5つの理由
未経験の僕でも独学でWordPressの案件を受注できた方法を全て詰め込んだ記事となっているので、全ての人に実現可能な内容となっています！
✔︎この記事を読むと得れるメリット
- WordPressで案件を受注できるまでの学習方法が分かる
- 最短2ヶ月でサイト制作の仕事ができるレベルになる
- 今からWordPressの学習ができる様になる。
前提として、HTML,CSSの学習は終わっており、模写コーディングで大体のサイトはコーディングできるレベルである事とします。
↓こちらの記事の上級レベル程度のスキルは予め身につけておきましょう！↓
WordPressで案件を受注できるまでの学習全行程まとめ
- サーバー、ドメイン、WordPressのインストールについて学ぶ
- WordPressの使い方の基礎について学ぶ
- HTML,CSSで好きな様にカスタマイズする
- テンプレートファイルのカスタマイズ方法について学ぶ
- 模写コーディングで作ったHTMLのサイトをWordPress化する
- FTPツールの使い方を学ぶ
- ローカル環境での開発手順を学ぶ
✔︎この学習後に受注できる案件の例
- 予算：10万円〜20万円
- 納期：1ヶ月以内
- 用意している物：デザインデータ、サイトの構成図
- 15ページのコーディング
- お問い合わせフォームの実装
※この案件は実際にランサーズで募集されている案件です。
STEP1:WordPressでブログorサイトを開設する
STEP1では、実際にWordPressでサイトやブログを開設してみて、WordPressとは何なのか概要を掴みましょう！
✔︎STEP1で学ぶ事
- サーバー、ドメイン、インストールの流れを学ぶ
- WordPressの管理画面の使い方について学ぶ
- WordPressの概要、基礎知識を学ぶ
WordPressの案件を受注する際には、クライアントはサーバーやドメインの知識は全くないので、この辺りの環境構築も任される場合があります。
自分でブログを開設することによって、サーバーの構築の流れが学べるので、いざ案件をこなす際にもスムーズに対応できる様になります。
サーバーはXserverがオススメで、ドメインはお名前.comで取得するといいでしょう。
サーバー契約からWordPressでブログ開設までの流れはこちらの記事に沿って行なってください！
WordPressのインストールが完了し、ブログを開設できたら、WordPressの管理画面の操作方法について学びます。
WordPressは記事の投稿機能だけでなく、パーマリンクの設定や、カテゴリー階層の設定などサイト運営において非常に重要な設定項目がたくさんあるので、いちばんやさしいWordPressの教本 で基礎的な部分を学習しましょう！
STEP1では、WordPressの大まかな概念と管理画面の使い方や、できる事を学びましょう！
STEP2:テーマをインストールし、自分好みにカスタマイズしてみる
WordPressの案件を行う際には、必ずテーマというサイトにおける機能や見た目を作るファイルを作る必要があります。
✔︎STEP2で学ぶ事
- ネット上にどんなテーマがあるかを知る
- CSSでテーマを簡単にカスタマイズできる様になる
ネット上にはもうすでに、ブロガー向けのテーマや、企業用のテーマなどが配布されており、誰でもダウンロードしてWordPressにインストールすることができます。
SANGOというテーマ
JINというテーマ
この様にテーマをダウンロードすると、見違えるほどサイトの印象がガラッと変わり、実装されている機能にも違いがあります。（検索機能や、アニメーションなど）
WordPressの案件では、このようなテーマをインストールしてサイトを作ってしまうと、オリジナリティの低いサイトになってしまいます。
顧客のニーズでは、自社の雰囲気が分かるサイトデザインにしたいとか、顧客それぞれによってニーズは様々です。
まず始めに、自分のブログサイトにインストールするテーマが見つかったら、CSSのスキルを活用して、背景色を変えたり、配置を変えてみたり簡単なカスタマイズをしてみましょう！
インストールするテーマはXeoryがシンプルでカスタマイズのしがいがあり勉強になりますよ！
管理画面から「外観」→「カスタマイズ」と進むとテーマのカスタマイズを行うことができます。
追加CSSをクリックすると、CSSを追加できる様になるので、好きなスタイルを記述して自分好みにカスタマイズしてみましょう！
- レイアウトを変えてみる
- 色の変更
- hoverの時の挙動を変えてみる
案件の中には、あるテーマのCSSを少しいじって終わってしまう案件もあったりします！
✔︎WordPressでオリジナルのサイトを作れば案件は受注できる！
WordPressで案件を受注するには、WordPressでサイトを作った実績が不可欠です！
「実際にどうやってWordPressでサイトを作れるの？」と悩まれる人もいると思いますが、「最短最速」でオリジナルのサイトを作るには、TechAcademyのWordPressコースを受講するといいでしょう。
TechAcademyは１週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。
STEP3:子テーマを作って、幅広くテーマをカスタマイズする
WordPressのテーマには、親テーマと子テーマと言うものが存在します。
- 親テーマ：テーマの核となるファイル
- 子テーマ：カスタマイズするためのファイル
STEP2では、子テーマを作らずにWordPressの管理画面だけでカスタマイズをしましたが、HTML要素を追加したり、機能を追加するには子テーマを作ってカスタマイズする必要があります。
✔︎STEP3で学ぶ事
- 子テーマの作り方を学ぶ
- 親テーマと子テーマの関係性を知る
- 子テーマを作り、大きくテーマをカスタマイズする
ちなみに僕のポートフォリオ（hikoproduction）もXeory Extensiton と言うテーマから子テーマを作成し、カスタマイズして作りました！
子テーマを作ると見違えるほどサイトの雰囲気が変わります！
- カスタマイズ無し：https://xeory.jp/extension/
- 子テーマでカスタマイズ：https://hikoproduction.com
WordPressの案件において、この子テーマを使ったカスタマイズの案件が非常に多いです。
よっぽど凝ったデザインでなければ、既存のテーマをインストールして子テーマを作り、カスタマイズしてクライアントのイメージに沿ったデザインを作ることができます！
この辺りは、クライアントと相談して決めるといいでしょう！
↓子テーマの作り方とカスタマイズ方法はこちらの記事を参考にしてください↓
STEP4:静的なHTMLファイルをWordPress化する
STEP3では、既存であるテーマをカスタマイズしてお客様の求めているサイトを作る練習をしましたが、STEP4では、テーマを自分で作ると言う作業を行います。
冒頭にも紹介した様に、受注案件の例として「デザインカンプがある」案件を紹介しました。
この案件の制作の流れとして、、、
- デザインカンプをみながらHTML,CSSコーディングする
- htmlの静的なページをWordPress化する
この様な流れで制作をしていきます。
✔︎STEP4で学ぶこと
- HTMLファイルをWordPress化する流れを知る
- FTPツールの使い方を学ぶ
- ローカル環境でのWordPress開発のやり方を知る
このSTEP４が最も重要で、案件でも多いのでしっかりとマスターしましょう！
1.静的なHTMLファイルを用意する
まず始めにWordPress化を行うための静的なHTMLファイルを準備します。
下記のファイル名でURLのサイトをHTML,CSSで模写し、sampleフォルダとして作ってください。
- index.html：https://demo-ja.lightning.nagoya/
- single.html：https://demo-ja.lightning.nagoya/new-products-info-20180201/
- archive.html：https://demo-ja.lightning.nagoya/information/
- page.html：https://demo-ja.lightning.nagoya/company/
- style.css：上記のhtmlにおけるCSS
2.WordPressのローカル環境を構築する
次にWordPressをローカル環境で開発するために、Local by Flywheelと言うツールを使って、構築します。
→ WordPressのローカル環境がボタン一つ【Local by Flywheel】の使い方
一般的には、XAMPPサーバーを構築して作ったりしますが、面倒なのでこのソフトを使えば簡単に構築できるのでオススメです！
WordPressの仕事では、ローカルで完成させて、本番環境にアップロードする流れが一般的です！
3.HTMLからWordPress化を行う
WordPressはPHPと言うプログラミング言語でできているので、HTMLファイルをWordPress化する際にもPHPを使用します。
僕PHPなんか全くわからないよ〜。。。
安心してください！
HTMLをWordPress化する際には、それほど高度なPHPは扱いません！
一般的なPHPを使うのでなくWordPress独自のPHPを使うので、PHPをガッツリ勉強しなくてもOKです！
先ほど作ったHTMLファイルをPHPファイルに書き換えます。
- index.html→index.php
- single.html→single.php
- archive.html→archive.php
- page.html→page.php
ファイルの拡張子を変更するだけで、phpと認識できるので、名前を変更するだけでOKです！
style.cssの始めの部分に、これはWordPressのテーマと認識させるために以下のコードを記入します。
/*
Theme Name: テーマの名前を記入
Theme URI: テーマの URI
Description: テーマの詳細
Author: 開発者の名前
Author URI: 作者の URI
*/次に、header.phpとfooter.phpとsidebar.phpを作成し、ヘッダーとフッター、サイドバーにあたる部分を分割します。
index.phpの<!DOCTYPE html>〜</header>までをカットし、header.phpに貼り付けます。
index.phpのサイドバーにあたる部分をカットし、sidebar.phpに貼り付けます。
index.phpの<footer>〜</html>までをカットし、footer.phpに貼り付けます。
次に、WordPressの独自のPHP関数を用いて、投稿機能や画像のパスを通していきます。
やり方を全て書くときりがないので、よく使うWordPress関数についてご紹介します！
✔︎よく使うWordPress関数
- <?php get_header(); ?>：header.phpを読み込む
- <?php get_sidebar(); ?>：sidebar.phpを読み込む
- <?php get_footer(); ?>：footer.phpを読み込む
- <?php the_date(); ?>：投稿日時を表示
- <?php the_title(); ?>：記事のタイトルを表示
- <?php the_content(); ?>：記事の本文を表示
- <?php the_permalink(); ?>：記事のパーマリンク
- <?php the_category(); ?>：記事のカテゴリー
- <?php bloginfo(‘name’); ?>：ブログのタイトル
- <?php bloginfo(‘description’); ?>：ブログの説明文
- <?php echo home_url();?>：TOPのURL
- <?php echo get_template_directory_uri(); ?>：画像パスを通す
他にもまだまだテンプレート関数はあるので、日本語版 WordPress チートシート | Webクリエイターボックス を見てみるといいでしょう！
HTMLファイルをWordPress化する具体的な流れは「WordPress 仕事の現場でサッと使える! デザイン教科書」に全て書かれているので、この本に沿って進めていきましょう！
実務でもよく使う手法が、詰め込まれている中〜上級者向けの本です。
この本さえマスターすれば、簡単なWordPress制作案件はできてしまうので、持っておくと安心です！
4.FTPツールで本番環境にアップする
ローカル環境でWordPress化ができたら、FTPというファイルを本番サーバーにアップロードするためのツールを用いて、契約しているサーバーにアップロードします。
FTPツールの使い方については、下記の記事を参考に行なってください！
→【初心者向け】FTPソフトFileZillaとは？ダウンロードから使い方まで解説！
本番環境で、ローカル環境と全く同じサイトが見れていればOKです！
STEP5:カスタムフィールドの使い方について学ぶ
次に、WordPressの案件で多いカスタムフィールドプラグインの使い方について学びます。
例えば、不動産のサイトをWordPressで作る場合、クライアントのニーズとしてあるのが、「投稿画面で販売物件、賃貸物件の詳細を簡単に投稿できるようにして欲しい！」などの要求があります。
WordPressのデフォルトの管理画面だと、「投稿」「固定ページ」の2つのみなので、そこに追加で「賃貸物件」「販売物件」の投稿画面を追加してあげるイメージです。
それを実装するために必要なのが、カスタムフィールドプラグインです！
こちらの使い方に関しても、「WordPress 仕事の現場でサッと使える! デザイン教科書」に全て書かれているので、マスターしましょう！
STEP6:その他プラグインの使い方について学ぶ
お客様に簡単にWordPressを扱ってもらうにはプラグインの実装が欠かせません。
プラグインを追加すると、コメントの管理やお問い合わせフォームの管理、スパム対策など様々なことができます。
納品する前に、最低限追加しておきたいプラグインは以下の通りです。
- Contact Form 7：お問い合わせフォームを作る
- Back WP up：データのバックアップを定期的に行う
- Jetpack：統計データの詳細や、スパム対策ができる
- All in One SEO pack：SEO対策するサイトなら必須のプラグイン
- Google XML Sitemaps：サイトマップを自動生成する
企業サイトでは、お問い合わせフォームは必ず必要なので、Contact Form 7プラグインで実装しましょう！
→ 【Contact Form 7完全ガイド】WordPressサイトにお問い合わせフォームを作る方法【初心者向け】
まとめ
これで冒頭でお伝えした案件レベルは十分できるスキルが身につきます！
いかがでしたでしょうかか！
WordPressの案件は難しそうなイメージがありますが、HTML,CSSをある程度マスターしている方であれば、少し勉強するだけで十分仕事できるレベルまでいけます。
ぜひこの記事を参考にWordPressの学習を初めて見てはいかがでしょうか！
TechAcadmyのWordPressコースでは、WordPress制作の流れ、WordPressの高度な使い方、コーポレートサイト、オリジナルサイトの制作を全て学習できるので、案件をこなすレベルまでは十分成長できます！
▼合わせて読みたい！
【初心者向け】WordPressとは？できること、使う前の基礎知識を解説
