ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

WordPressで10万円の案件を受注できるまでの学習全行程まとめ

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回のお悩み

フリーランスとしてWordPressの案件(仕事)を受注できるようになりたいけど、何を勉強すればいいか分からない。

実際にWordPressの仕事をしている現役フリーランスの方から、案件が受注できるレベルまでにするべき学習内容を全て教えて欲しい!

今回の記事では、これからWordPressの学習を始められて、最終的には案件を受注できる様になりたい方向けに、WordPress学習の完全ロードマップをご紹介します!

HTML,CSS,PHPなどの学習方法を紹介しているサイトや、プログラミングスクールは多いですが、WordPressの学習方法をまとめているサイトは非常に少なく、プログラミングスクールもあまりありません。

WordPressを習得し、案件を受注できる様になると、非常に単価の高い(最低10万円〜)収入を得れる様になるので、ノマド的な自由なライフスタイルを得れることにも直結します。

ネコ君
ネコ君

ランサーズとかの仕事紹介サイトを見ても、単価が高い案件が多いもんね!

【高単価】WordPress制作をフリーランスにオススメする5つの理由

未経験の僕でも独学でWordPressの案件を受注できた方法を全て詰め込んだ記事となっているので、全ての人に実現可能な内容となっています!

この記事を読むと得れるメリット
  • WordPressで案件を受注できるまでの学習方法が分かる
  • 最短2ヶ月でサイト制作の仕事ができるレベルになる
  • 今からWordPressの学習ができる様になる。

前提として、HTML,CSSの学習は終わっており、模写コーディングで大体のサイトはコーディングできるレベルである事とします。

こちらの記事の上級レベル程度のスキルは予め身につけておきましょう!↓

スポンサーリンク

WordPressで案件を受注できるまでの学習全行程まとめ

WordPressの学習ロードマップ
  • STEP1
    WordPressでブログorサイトを開設する(本番環境推奨)
    • サーバー、ドメイン、WordPressのインストールについて学ぶ
    • WordPressの使い方の基礎について学ぶ
  • STEP2
    テーマをインストールし、自分好みにカスタマイズしてみる
    • HTML,CSSで好きな様にカスタマイズする
  • STEP3
    子テーマを作って、幅広くテーマをカスタマイズする
    • テンプレートファイルのカスタマイズ方法について学ぶ

  • STEP4
    静的なHTMLファイルをWordPress化する
    • 模写コーディングで作ったHTMLのサイトをWordPress化する
    • FTPツールの使い方を学ぶ
    • ローカル環境での開発手順を学ぶ
  • STEP5
    カスタムフィールドの使い方について学ぶ

  • STEP6
    その他プラグインの使い方について学ぶ
この学習後に受注できる案件の例

WordPressオリジナルテーマ制作

  • 予算:10万円〜20万円
  • 納期:1ヶ月以内
  • 用意している物:デザインデータ、サイトの構成図
  • 15ページのコーディング
  • お問い合わせフォームの実装

※この案件は実際に ランサーズで募集されている案件です。

STEP1:WordPressでブログorサイトを開設する

STEP1では、実際にWordPressでサイトやブログを開設してみて、WordPressとは何なのか概要を掴みましょう!

STEP1で学ぶ事
  • サーバー、ドメイン、インストールの流れを学ぶ
  • WordPressの管理画面の使い方について学ぶ
  • WordPressの概要、基礎知識を学ぶ

WordPressの案件を受注する際には、クライアントはサーバーやドメインの知識は全くないので、この辺りの環境構築も任される場合があります。

自分でブログを開設することによって、サーバーの構築の流れが学べるので、いざ案件をこなす際にもスムーズに対応できる様になります。

サーバーはXserver がオススメで、ドメインはお名前.comで取得するといいでしょう。

サーバー契約からWordPressでブログ開設までの流れはこちらの記事に沿って行なってください!

WordPressのインストールが完了し、ブログを開設できたら、WordPressの管理画面の操作方法について学びます。

WordPressは記事の投稿機能だけでなく、パーマリンクの設定や、カテゴリー階層の設定などサイト運営において非常に重要な設定項目がたくさんあるので、いちばんやさしいWordPressの教本 で基礎的な部分を学習しましょう!

HikoPro
HikoPro

STEP1では、WordPressの大まかな概念と管理画面の使い方や、できる事を学びましょう!

STEP2:テーマをインストールし、自分好みにカスタマイズしてみる

WordPressの案件を行う際には、必ずテーマというサイトにおける機能や見た目を作るファイルを作る必要があります。

STEP2で学ぶ事
  • ネット上にどんなテーマがあるかを知る
  • CSSでテーマを簡単にカスタマイズできる様になる

ネット上にはもうすでに、ブロガー向けのテーマや、企業用のテーマなどが配布されており、誰でもダウンロードしてWordPressにインストールすることができます。

SANGOというテーマ

JINというテーマ

この様にテーマをダウンロードすると、見違えるほどサイトの印象がガラッと変わり、実装されている機能にも違いがあります。(検索機能や、アニメーションなど)

ネコ君
ネコ君

でもみんな同じテーマを使ったら、サイトにオリジナリティがなくなるね!

WordPressの案件では、このようなテーマをインストールしてサイトを作ってしまうと、オリジナリティの低いサイトになってしまいます。

顧客のニーズでは、自社の雰囲気が分かるサイトデザインにしたいとか、顧客それぞれによってニーズは様々です。

まず始めに、自分のブログサイトにインストールするテーマが見つかったら、CSSのスキルを活用して、背景色を変えたり、配置を変えてみたり簡単なカスタマイズをしてみましょう!

管理画面から「外観」→「カスタマイズ」と進むとテーマのカスタマイズを行うことができます。

追加CSSをクリックすると、CSSを追加できる様になるので、好きなスタイルを記述して自分好みにカスタマイズしてみましょう!

  • レイアウトを変えてみる
  • 色の変更
  • hoverの時の挙動を変えてみる
HikoPro
HikoPro

案件の中には、あるテーマのCSSを少しいじって終わってしまう案件もあったりします!

STEP3:子テーマを作って、幅広くテーマをカスタマイズする

WordPressのテーマには、親テーマと子テーマと言うものが存在します。

  • 親テーマ:テーマの核となるファイル
  • 子テーマ:カスタマイズするためのファイル

STEP2では、子テーマを作らずにWordPressの管理画面だけでカスタマイズをしましたが、HTML要素を追加したり、機能を追加するには子テーマを作ってカスタマイズする必要があります。

STEP3で学ぶ事
  • 子テーマの作り方を学ぶ
  • 親テーマと子テーマの関係性を知る
  • 子テーマを作り、大きくテーマをカスタマイズする
HikoPro
HikoPro

ちなみに僕のポートフォリオ(hikoproduction)もXeory Extensiton と言うテーマから子テーマを作成し、カスタマイズして作りました!

子テーマを作ると見違えるほどサイトの雰囲気が変わります!

WordPressの案件において、この子テーマを使ったカスタマイズの案件が非常に多いです。

よっぽど凝ったデザインでなければ、既存のテーマをインストールして子テーマを作り、カスタマイズしてクライアントのイメージに沿ったデザインを作ることができます!

この辺りは、クライアントと相談して決めるといいでしょう!

↓子テーマの作り方とカスタマイズ方法はこちらの記事を参考にしてください↓

STEP4:静的なHTMLファイルをWordPress化する

STEP3では、既存であるテーマをカスタマイズしてお客様の求めているサイトを作る練習をしましたが、STEP4では、テーマを自分で作ると言う作業を行います。

冒頭にも紹介した様に、受注案件の例として「デザインカンプがある」案件を紹介しました。

この案件の制作の流れとして、、、

  1. デザインカンプをみながらHTML,CSSコーディングする
  2. htmlの静的なページをWordPress化する

この様な流れで制作をしていきます。

STEP4で学ぶこと
  • HTMLファイルをWordPress化する流れを知る
  • FTPツールの使い方を学ぶ
  • ローカル環境でのWordPress開発のやり方を知る
HikoPro
HikoPro

このSTEP4が最も重要で、案件でも多いのでしっかりとマスターしましょう!

1.静的なHTMLファイルを用意する

まず始めにWordPress化を行うための静的なHTMLファイルを準備します。

下記のファイル名でURLのサイトをHTML,CSSで模写し、sampleフォルダとして作ってください。

2.WordPressのローカル環境を構築する

次にWordPressをローカル環境で開発するために、Local by Flywheelと言うツールを使って、構築します。

WordPressのローカル環境がボタン一つ【Local by Flywheel】の使い方

一般的には、XAMPPサーバーを構築して作ったりしますが、面倒なのでこのソフトを使えば簡単に構築できるのでオススメです!

HikoPro
HikoPro

WordPressの仕事では、ローカルで完成させて、本番環境にアップロードする流れが一般的です!

3.HTMLからWordPress化を行う

WordPressはPHPと言うプログラミング言語でできているので、HTMLファイルをWordPress化する際にもPHPを使用します。

ネコ君
ネコ君

僕PHPなんか全くわからないよ〜。。。

HikoPro
HikoPro

安心してください!

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とは?ダウンロードから使い方まで解説!

HikoPro
HikoPro

本番環境で、ローカル環境と全く同じサイトが見れていれば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サイトにお問い合わせフォームを作る方法【初心者向け】

まとめ

HikoPro
HikoPro

これで冒頭でお伝えした案件レベルは十分できるスキルが身につきます!

いかがでしたでしょうかか!

WordPressの案件は難しそうなイメージがありますが、HTML,CSSをある程度マスターしている方であれば、少し勉強するだけで十分仕事できるレベルまでいけます。

ぜひこの記事を参考にWordPressの学習を初めて見てはいかがでしょうか!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました