WordPressでポートフォリオを作る手順を解説します。

こんにちは、けんぞうです。
WordPressでポートフォリオを実装する手順を解説します。

ちなみに僕が過去にWordPressで作成したポートフォリオサイトは、以下のURLからご確認頂けます。

この記事をざっくり言うと
  • WordPressでオリジナルテーマを作成し、ポートフォリオとして公開するまで学習手順
  • WordPressで仕事をしていくなら、WordPressで作ったポートフォリオサイトが有用
  • ドメイン代を浮かせるための裏技的なものをご紹介します

WordPressで仕事を取るなら、WordPressでポートフォリオを作った方が良い2つの理由

defaultImg

これからWordPressをメインとしてサイト制作の仕事を受注しようと考えているならば、サイトの模写練習をたくさんやるよりも、WordPressでオリジナルテーマを量産する方が確実に仕事に活かせると思います。

もちろんサイト模写でも力はつくのですが、WordPressで制作をするならオリジナルテーマを実装することが前提となるでしょうし、その場合はWordPress特有の関数などに慣れておく必要があります

ですので、自作テーマで作ったWebサイトをポートフォリオとした方が、自分自身も力がつきますし、営業をする場合にも自身のスキルについて説得力を持たせることも可能かと思います。


たまにGoogleドライブ で今まで作ってきた模写サイトを提示している人がいるし、Googleドライブで良いんじゃないの?

疑問くん

けんぞう

いや〜、個人的にはあれは微妙だなと思っています。模写してきたサイトのキャプチャだけ見せられるよりも、「オリジナリティがあって、実際に動くサイト」を見せられた方が説得力があるのは間違いないかと。

ソースコード管理についても、今後エンジニアとしてのキャリアステップを想定しているならば、Googleドライブではなくて、Githubを使いましょう。

【ご注意】エンジニア転職をするならポートフォリオ共有に「Google Drive」はやめとこう

WordPressでポートフォリオサイトを作る具体的な学習手順

defaultImg

WordPressでポートフォリオサイトを作る学習手順
  • ①ドットインストールでWordPressの基礎
  • ②Plusersというサイトで自作テーマ作成
  • ③自分でテーマを調べつつ作る

※HTML/CSSについては習得済みという前提です。

①ドットインストールでWordPressの基礎

WordPressのテーマ作成の全体像を掴むとっかかりとしては「ドットインストールのWordPressコース」が良いかなと思います。僕も最初はこれで勉強しました。

会員登録すれば全部無料で視聴できるので、まずはこれを1周しましょう。

②Plusersというサイトで自作テーマ作成

次に取り掛かる教材としては「Plusers」というサイトがおすすめです。こちらも全て無料で閲覧できますし、レスポンシブ対応まで行なったオリジナルテーマの実装を経験できます。

正直ここまでの知識でかなり十分だと思いますが、何となく勉強量が足りないなあと感じる方は、以下の書籍がおすすめです。

③自分でテーマを調べつつ作る

ここまでの段階でだいたい全体の流れや、WordPress特有の記述について分かるようになっているかと思いますので、あとは自作していくのみです。

僕はこの段階で「pyzou.net」というドメインをとって、オリジナルテーマを当ててみたりして実践的な学習に取り組みました。


自作テーマをたくさん作って練習したいのだけど、ドメインを毎回取得するのはお金がかかって嫌だなあ、、

疑問くん

けんぞう

サブディレクトリを使えば、ドメインは1つでサイトをいくつも作ることができますよ!

テーマ作成の練習をするならサブディレクトリを使おう

具体的なサブディレクトリの作り方については、以下の記事にて解説をしておりますので、こちらをご参照ください👇

サブディレクトリで独立させる流れ WordPressサブディレクトリで特化ブログを作り上位表示させる方法
サブディレクトリを作ることのメリット
  • 追加のドメイン料金が不要
  • 親サイトのドメインパワーを引き継ぐことができる(=SEO的に有利である)
  • 自作テーマを子サイトのみ適用することができるので、自作テーマを量産・公開が可能

実際僕のポートフォリオサイトも「https://kenzooooo.com/portfolio/」というドメインで、当サイトドメイン「https://kenzooooo.com」のサブディレクトリとして公開しています。


今日のまとめ👇

defaultImg

WordPressでポートフォリオサイトを作るメリット👆

defaultImg

具体的な学習手順👆

関連

サブディレクトリで独立させる流れ WordPressサブディレクトリで特化ブログを作り上位表示させる方法 【ご注意】エンジニア転職をするならポートフォリオ共有に「Google Drive」はやめとこう