【現在2000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

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

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

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

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

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

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

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

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

そして、このデイトラ第3弾では、実務で使えるWordPressカスタマイズを覚えて仕事の幅を広げるをテーマに連載していきます。

 

【導入編】WordPressをカスタマイズできるようになるメリットとは

内容に入っていく前に、『なぜWordPressをカスタマイズできると仕事の幅が広がるのか』について少し解説しておきます。

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

WordPress公式より( https://ja.wordpress.org/ )

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

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

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

 

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

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

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

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

 

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

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

このデイトラ3rdでは、実際にWordPressテーマを自作しながら、実務で使うWPカスタマイズのエッセンスまでお伝えしていきます。

カスタマイズのためのスターターテーマも用意しました👍

テーマデザイン:マヤさん( @Mayayan6
コーディング協力:はにわまんさん( @haniwa008  

デイトラ3rdのスターターテーマは、上記の信頼できるスキルを持ったフリーランスお二人に制作協力いただきました。お二人ともいつもありがとうございます🙇‍♂️

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

組み立てたら実用できるように細部にもこだわってるので、自分でカスタマイズしたテーマを使ってブログをスタートするのもいいと思います。

自分で作った愛着のあるテーマの方が、ブログのモチベーションも上がるってもんです😀

 

こんな方におすすめ

  • デイトラ2ndを終えたレベルのコーディング力をお持ちの方
  • WordPressカスタマイズの重要ポイントを手を動かしながら学びたい方
  • 本を読めばわかる技術的な解説ではなく、実務で使う知識がほしい方

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

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

デイトラ1stは完走していて、デイトラ2ndがまだ終わってないという方は、先に3rdからやるのもアリです。

リアルタイムでやった方が効率いいと思います。


ただ、WPのカスタマイズだけができても仕事には繋がりにくいので、3rdのあとで2ndも完走してくださいね!

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

 

ProgateでPHPとSQLの基礎を学ぶ

DAY1. 『Progate PHP Ⅰ』

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

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

https://prog-8.com/languages/php

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

 

 

DAY2. 『Progate PHP Ⅱ』


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

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

正直、WPをいじるだけなら、書き方を覚えていけば、オブジェクト指向を理解してなくてもカスタマイズできちゃいます。が、応用が効きません。

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

 

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

 

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

 

DAY3. 『Progate PHP Ⅲ』

引き続き『Progate』の料理注文サイト作成でPHPの基礎を学びます。

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

WPでは、これらの大部分をコアファイルがやってくれてます。『サービスのスタンダードな作り方』を知ることで、WPがどれだけ便利か分かりますよ👍

 

このへんの理解をもう少し深めたければ、ドットインストールのPHP講座もやってみるのもいいし、もっと本格的に学ぶたい人は以下の書籍を読んでみるといいですよ!

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

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

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

 

DAY4. 『Progate PHP Ⅳ』


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

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

✔︎演習の『レビュー表示』→投稿やコメントの表示
✔︎演習の『ユーザーとレビューの紐付け』→投稿と著者の紐付け

WPもこの演習と同じような仕組みで動いてます。

 

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

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

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

PHP Ⅲ / PHP Ⅳ は1回やれば十分なので、PHP Ⅰ / PHP Ⅱ、そしてvar_dump( )を復習しといてください。

 

DAY5. 『Progate SQL Ⅰ』


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

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

 

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

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

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

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

 

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


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

「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

超簡単にローカル環境が構築できるLocalbyFlywheelの使い方

Mac × MAMP

MAMPの使い方:WordPressのローカル環境構築方法【Mac】

Windows × Flywheel

たった1分でWordPress開発環境が作れる!「Local by Flywheel」がノンプログラマーに超絶おすすめ

Windows × XAMPP

XAMPPを使ってWordPressをローカル開発環境にインストールしよう!

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

 

まとめ:WordPressのカスタムに必要な準備は「PHPの基礎」「SQLの基礎」「ローカル開発環境」の3つ

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

次はいよいよスターターテーマを元に、ゼロからWordPressのテーマ作成を行なっていきます。

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

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

テーマの見本ページ(トップのみ)

次回以降の記事では、WordPressテーマを自作するためのポイントを連載で解説していきますので、その連載とこのテーマを元に、自力でテーマ作成を進めていってください👍

組み立て式テーマ『TF-30』内容物

  • cssフォルダ
  • imgフォルダ
  • jsフォルダ
  • index.html
  • page.html
  • single.html
  • category.html
  • search.html
  • 404.html

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

 

そして、最後に一つお願いです。

今回、このテーマや解説の作成にかなりの工数をかけてしまいました。

解説作成に至っては、もう3万字以上書いてるのにまだ書き終わってません…w

文章書くの嫌いなのに!!

ですので、TF-30はどなたでも無料で利用できますが、「¥1000くらいサポートしてもいいよ」という方は下のサポートボタンから応援してもらえると嬉しいです<(_ _)>

 

 

サポートしてくださった方限定で、ちょっとした特典もつけてます。

入力いただいたメールアドレスにサンクスメールが届くので、そちらをご確認ください☺️

それでは、導入編お疲れ様でした。

↓カスタマイズ編も頑張りましょう!

1.WordPressテーマの初期設定+テンプレートファイルを作成する【30DAYSトライアル】

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

WordPressカテゴリの最新記事