HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約21分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • フリーランスとしてWordPressの案件(仕事)を受注できるようになりたいけど、何を勉強すればいいか分からない。
  • 実際にWordPressの仕事をしている現役フリーランスの方から、案件が受注できるレベルまでにするべき学習内容を全て教えて欲しい!

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

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

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

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

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

✔︎この記事を読むと得れるメリット

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

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

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

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

WordPressでブログorサイトを開設する(本番環境推奨)
  • サーバー、ドメイン、WordPressのインストールについて学ぶ
  • WordPressの使い方の基礎について学ぶ
テーマをインストールし、自分好みにカスタマイズしてみる
  • HTML,CSSで好きな様にカスタマイズする
子テーマを作って、幅広くテーマをカスタマイズする
  • テンプレートファイルのカスタマイズ方法について学ぶ
静的なHTMLファイルをWordPress化する
  • 模写コーディングで作ったHTMLのサイトをWordPress化する
  • FTPツールの使い方を学ぶ
  • ローカル環境での開発手順を学ぶ
カスタムフィールドの使い方について学ぶ
その他プラグインの使い方について学ぶ

✔︎この学習後に受注できる案件の例

  • 予算: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のスキルを活用して、背景色を変えたり、配置を変えてみたり簡単なカスタマイズをしてみましょう!

HikoPro
HikoPro

インストールするテーマはXeoryがシンプルでカスタマイズのしがいがあり勉強になりますよ!

https://xeory.jp

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

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

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

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

✔︎WordPressでオリジナルのサイトを作れば案件は受注できる!

WordPressで案件を受注するには、WordPressでサイトを作った実績が不可欠です!

「実際にどうやってWordPressでサイトを作れるの?」と悩まれる人もいると思いますが、「最短最速」でオリジナルのサイトを作るには、TechAcademyのWordPressコースを受講するといいでしょう。

TechAcademyは1週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。

▶︎ WordPressコースのの公式サイト

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の学習を初めて見てはいかがでしょうか!

TechAcadmyのWordPressコースでは、WordPress制作の流れ、WordPressの高度な使い方、コーポレートサイト、オリジナルサイトの制作を全て学習できるので、案件をこなすレベルまでは十分成長できます!

▶︎ WordPressコースのの公式サイト

HikoPro

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

YouTubeTwitterInstagramやってますのでぜひフォローお願いします!!

▼合わせて読みたい!
【初心者向け】WordPressとは?できること、使う前の基礎知識を解説

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)