現役エンジニアが徹底解説！WordPressで自作テーマを作るための手順【30DAYSトライアル3rd】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事を書いている僕は、現役フリーランスとしてWebサイトやWebアプリの制作の仕事をしつつ、プログラミングスクールのカリキュラム作成・学習コミュニティの運営など、学習コンテンツ作りにも力を入れています。

最近はゼロからプログラミングを学びたいという方に向けた学習コンテンツ『30DAYSトライアル』をリリースしたところ、述べ5000人以上の方が実践してくださいました。

実際に転職や案件獲得につながったとメッセージを下さる方も多く、「ネットに公開した記事にこんなに反響があるとは…」と驚いています。

これまでに第一弾として【初心者から副業で月5万を稼ぐためのトライアル】、第２弾として【コーダーとして企業と仕事できるレベルになるためのトライアル】 を連載してきました。

「いま初めて知った！」「興味あるぞ！」という方は、以下の記事に30DAYSトライアル（以下、デイトラ）を実践された方々からの声も載せてますので、こちらからどうぞ。

2019.03.31

30DAYSトライアル【ゼロから始めるコーディング学習】〜導入編〜

『ゼロからプログラミングを学びたい』『プログラミングを通して人生の幅を広げたい』そんな方のために、30日間でできるコーディング学習カリキュラム【30DAYSトライアル】を作りました。第一歩はこの記事から。...

そして、このデイトラ第3弾では、WordPressサイトの作り方を覚えて仕事の幅を広げようをテーマに連載していきます。

【導入編】WordPressを使ったサイト制作ができるようになるメリットとは

内容に入っていく前に、『なぜWordPressでサイト制作ができると仕事の幅が広がるのか』について少し解説しておきます。

現在、世界のインターネット上に存在するすべてのサイトのうち、実に34%がWordPressで作られています。

しかも、この比率は年々増加しているという状態。

ネット上にある全てのサイトの1/3ですよ！すごくないですかw

つまり、WordPressを使ったサイト制作ができるようになれば、コーディングしかできない人に比べて圧倒的に受けられる仕事の母数が増えるということです。

そして、増えるのは仕事の『数』だけじゃありません。

コーディングではページ単位の見積り（レスポンシブでも1万〜2万程度）だったのに対し、WordPressを使った動的なサイト制作であれば、サイト単位で仕事が受注できます（1サイトあたり10万〜数十万程度）。

またお問い合わせフォームや予約管理機能など、機能単位での追加開発（3万〜数十万）や、ブログ機能を活用したSEO支援、サーバー・ドメインの運用保守など、サービス提供できるポイントも増えます。

つまり、単価も上がりやすいです。

上記のように、WordPressの知識をつけるメリットは絶大！

今やサイト制作を仕事にする上でWordPressの知識は必須と言っても過言ではありません。

このデイトラ3rdでは、WordPressの自作テーマを作りながら、実務でも役立つカスタマイズ術までお伝えしていきます。

効率的に自作テーマの作り方を学ぶため、スターターテーマも用意しました👍

このテーマは「html / css / js」のみを用意しており、この後の連載で解説する手順に沿って組み立てていくと完成する、という組み立て式WordPressテーマになっています。

組み立てたら実用できるように作ってあるので、ぜひ自作テーマ完成を目指してがんばってください！

なお、このトライアルではWordPressのカスタマイズに関することのみを扱いますので、コーディングはある程度できる前提です。

まだコーディングに取り組んでない方はぜひ、こちらのデイトラ1stからどうぞ！

2019.03.31

30DAYSトライアル1st【コーディング基礎学習〜環境設定編】

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになるための30DAYSトライアル、その前編です。ファーストステップであるこの記事では、コーディングの基礎学習〜エディタなどの環境設定までを10日間で進めていきます。...

デイトラ1stは完走していて、デイトラ2ndがまだ終わってないという方は、先に3rdからやるのもアリ。ただ、コーディングもできなければ仕事に繋がりにくいので、3rdのあとで必ず2ndも完走してくださいね！

それでは前置きはこのくらいにして、さっそく内容に入っていきましょう！

ProgateでPHPとSQLの基礎を学ぶ

DAY1. 『Progate PHP Ⅰ』

WordPressはPHPで出来ているので、カスタマイズするにはPHPの基礎知識が必須！

というわけで、まずはプログラミング学習サイト『Progate』で、PHPの基礎を学びましょう💻

Progateとは、環境設定不要でブラウザのみでプログラミングが学べる学習サイトで、学習開始までの手軽さとわかりやすい解説でプログラミング初学者にはイチオシのサービスです。
※この記事はProgate様にも掲載確認いただいております

目安時間は4hと書かれてますが、基本的な構文はデイトラ2ndでやってきたjavascriptと変わりません。なので目標2hでトライしてください！

DAY2. 『Progate PHP Ⅱ』

引き続き『Progate』でPHPの基礎を学びます。オブジェクト指向は超重要な概念。

https://prog-8.com/lessons/php/study/2

正直、WordPressでコーポレートサイトを作るだけなら、書き方を覚えていけばオブジェクト指向を理解してなくても作れてしまいます。が、応用が効きません。

『$post』は投稿オブジェクトで、『$post->ID』でプロパティ「ID」の値を参照している、くらいの理屈は理解しておいた方が『呪文としての暗記』を減らせます。

また、大事なのでこの先何回か言うと思いますが、『var_dump( )』は超頻出です。

var_dump( )で値を確認するクセを付けましょう❗️

DAY3. 『Progate PHP Ⅲ』

引き続き『Progate』でPHPの基礎を学びます。

このへんの理解をもう少し深めたければ、以下の書籍を読んでみるといいですよ！

この2冊をやれば、PHPでのフルスクラッチ開発に関する知識は十分網羅できると思います。

あと余談ですが、「気づけばプロ並み」のレビュー書いてる方々のモチベが高すぎてこちらのモチベまで上がります（笑）

トライする方はぜひ始める前にレビュー見てみてくださいw

DAY4. 『Progate PHP Ⅳ』

引き続き『Progate』でPHPの基礎を学びます。PHP基礎はこれで最後❗️

https://prog-8.com/lessons/php/study/4

この演習が終わればWPでも必要な知識が身に付きます。

初心者がPHPを学習するのはなかなか難しかったと思うんですが、これを完璧に理解してなくてもWordPressをいじるぶんには支障ないです。

「こういうもんなんだ」という感覚があればOK👍

ただ、本来どう書くのかを知らないと、何が起こってるのかわからないまま『呪文の暗記』をすることになるので、一通りの基礎をやってもらいました。

DAY5. 『Progate SQL Ⅰ』

僕たちが日々使っているWebサービスは、ユーザー情報や投稿されたデータをSQLという言語でデータベースに保存しています。必要に応じてそれらのデータを取得して表示してるんです。

WordPressもDBを使ってるので、SQLの基礎を学んでおきましょう❗️

とはいえ最近は便利なプラグインも増えたので、WordPressを扱う上では、SQLを直接さわる機会は稀です。

今はサイト移行すらプラグイン一個で済みますからね（WordPressカスタマイズ編に入ったら紹介します。）

SQLを書く必要があるのは、例えばユーザーID / パスワード / 登録したメールアドレスの全てを忘れてしまい管理画面に入れなくなる、といったケースです。

珍しいとはいえゼロではないので、いざという時にテンパらないためにも基本は押さえておきましょう👍

DAY6. 『Progate PHP Ⅰ〜Ⅳ / SQL Ⅰ 復習』

ここまでPHPとSQLの基礎を学んできました。 かなりハイペースで進んだので、１日は復習に当てましょう！

「Progateはもう大丈夫」という方は、paizaのPHP演習問題を解いたりしてみてください。

DAY7. 『ローカル開発環境を作ろう』

それでは導入編のラストに、WordPressテーマをカスタマイズしてくためのローカル環境を整えましょう！

開発環境構築ツールを使って、Apache・MySQL・PHPなど、WordPressの動作に必要なものをまとめてインストールしていきます。

有名な開発環境ツールとしては「MAMP / XAMPP」と「Local by Flywheel」があります。

Macの人はMAMPかFlywheel、Windowsの人はXAMPPかFlywheelを使いましょう。

Flywheelの方が新しく、WordPressの環境構築のために特化してるので、これからWordPressを勉強するならFlywheelを使う方がいいかと思います！（もうMAMPかXAMPPが入ってる方はそのままで大丈夫です。）

それぞれ以下の記事を参考に、ツールのインストールとWordPressの導入まで完了させてください。

Mac × Flywheel

Mac × MAMP

Windows × Flywheel

Windows × XAMPP

最後にブラウザからWordPressの初期画面を確認できたらクリアです❗️お疲れ様でした。

まとめ：WordPressを使ったサイト制作に必要な準備は「PHPの基礎」「SQLの基礎」「ローカル開発環境」の3つ

これで無事にWordPressを使ってサイト制作していくための準備が整いました。

次はいよいよスターターテーマを元に、WordPressの自作テーマの作り方を解説していきます。

スターターテーマは以下のボタンからダウンロードできます。

テーマをダウンロードする

この組み立て式テーマ『TF-30』は、「HTML/CSS/JavaScript」のみを用意しています。

テーマの見本ページ（トップのみ）

次回以降の記事では、WordPressで自作テーマをつくる際のポイントを連載で解説していきますので、ぜひ自作テーマ完成を目指してがんばってください👍

テーマをダウンロードしたら、これらのファイルが入ってることを確認してくださいね。