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

WordPressテーマXeoryをカスタマイズしてポートフォリオ作ってみた

WordPress
この記事を書いた人
HikoPro

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

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

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

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

→ セールの詳細はこちら!

HikoPro
HikoPro

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

WordPressをカスタマイズしてポートフォリオのようなサイトを作りたいがどうすればいいか分からない。。。

ポートフォリオ作りにオススメのテーマを教えて欲しいのと、具体的なカスタマイズ事例、方法を教えて欲しい!

今回の記事では、僕がWordPressのテーマ(バズ部のXeory Extension)をカスタマイズしてポートフォリオを作った過程をご紹介します!

WordPressの具体的なカスタマイズ方法を知りたい!」「WordPressの既存テーマをカスタマイズするとどうなるのか知りたい!」

このようなWordPress学習者の方に向けての記事になります。

この記事を読むと分かる事
  • WordPressのテーマをカスタマイズする一連の流れがわかる
  • WordPressをカスタマイズする前とした後の違いがわかる
  • WordPressをカスタマイズして記事更新付きのポートフォリオを作れるようになる
スポンサーリンク

WordPressテーマXeoryをカスタマイズしたポートフォリオの特徴

まずは、WordPressの人気テーマ(バズ部のXeory Extension)をカスタマイズして作ったポートフォリオをご覧ください!

https://hikoproduction.com/

WordPressをカスタマイズしたポートフォリオの特徴
  • テーマとしては近未来をイメージ
  • 黒、白、緑の3色で統一感を出した
  • 実績一覧を管理画面から編集できるようにし管理を容易にした
  • お問い合わせフォームをContact Form7プラグインで簡単実装
  • Xeoryの良さも残しつつカスタマイズした

いかがでしょうか!

ちなみにXeory Extensionのデフォルトは https://xeory.jp/extension/ このようになっています。

なぜポートフォリをWordPressをカスタマイズして作成したかというと、僕はWordPress制作やカスタマイズを専門としているので、ポートフォリオもWordPressで作ることにより仕事の受注率アップに繋がると思い、作成しました。

もう一つの理由として、制作実績をいちいちコーディングしていくのは面倒なので、WordPressの管理画面から簡単に更新できるようにする為です。

WordPressを専門とする人ならWordPressでポートフォリオ制作を、

マークアップエンジニアならHTML,CSSで1からコーディングしてポートフォリオを作ろう!

HTML,CSSで0からコーディングしたポートフォリオはこちら

WordPressの既存テーマをカスタマイズする流れ

WordPressのテーマをカスタマイズしてポートフォリオを作る一連の流れをざっとご紹介します!

  1. 完成図を書き起こす(AdobeのXDを使って完成図を書くのがオススメです!)
  2. 完成図に近いWordPressの既存テーマを探す
  3. ローカル環境を構築する
  4. 既存テーマの子テーマを作成する
  5. HTML,CSS,PHPを完成図通りにコーディングしていく
  6. サーバー、ドメインの契約
  7. サーバーにWordPressをインストール
  8. ローカルでカスタマイズしたファイルをサーバーにアップ
  9. プラグインをインストール
  10. 微調整して完成!

WordPressでサイト制作する場合は、元々既存テーマである程度デザインやレイアウトがあるので、デザインのイメージがしやすい点です。

0からデザインを考えてサイト作成するとなると、かなりハードルが高いですが、WordPressの既存テーマをカスタマイズすることにより、その工数を削減することができます。

Hiko
Hiko

WordPressのテーマを選ぶ際はできるだけシンプルなものを選ぶとカスタマイズがしやすいですよ!

1.完成図を書き起こす

まずは、完成図のイメージを書き起こすかAdobeXDという無料のサイト設計ツールを使って、作りたいサイトやポートフォリオの完成図を書き起こします。

AdobeXDとは?

Adobe XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへの共有を一つのアプリで実現します。

https://www.adobe.com/jp/products/xd.html

自分用にサイトを作る際は、途中で気が変わったりするので大体の完成図でいいですが、仕事でWordPressのカスタマイズ制作をする場合は、完成度の高いデザインを作成する必要があります

2.完成図に近いWordPressの既存テーマを探す

完成図ができたら、それに似た、またはカスタマイズしやすようなWordPressのテーマをGoogleの検索エンジンから探します。

1番と2番は逆でもOKで、先にWordPressのテーマを探し、カスタマイズのイメージを掴んで設計図を書くのもいいでしょう!

3.ローカル環境を構築する

次に、カスタマイズするテーマが決まったら、ローカル環境を構築し、ローカルでカスタマイズを進めていきます。

ローカル環境で99%仕上げてから、本番環境にアップして微調整して作業していきます。

なぜかと言うと、ローカル環境だとコーディングをしたら直ぐに反映結果が確認できるからです。

「ローカル環境構築するのってなんだか苦手。。。」このように思われる方も多いかと思いますが、ご安心ください!

とっても簡単にWordPressのローカル環境を構築できる方法があります!

Local by Flywheel と呼ばれるソフトウエアを使えば一瞬でローカル環境を構築することができます!

Local by Flywheel のインストール方法、使い方はこちら↓

4.既存テーマの子テーマを作成する

Local by Flywheel でローカル環境を構築し、既存テーマのインストールが終わって、さて、カスタマイズを始めよう。。。」と思っている方はちょっと待ってください!!

WordPressのテーマをカスタマイズする際には、必ず子テーマを作成して子テーマをカスタマイズするようにしてください!

WordPressの子テーマとは?

親テーマはサイトの軸となるテーマに対し、子テーマは親テーマのデータを引き継ぎつつ、カスタマイズするためのテーマになります。

↓子テーマの作り方についてはこちらの記事をどうぞ↓

5.HTML,CSS,PHPを完成図通りにコーディングしていく

子テーマの作成が完了したら、あとは完成イメージ通りにHTML,CSS,PHPをコーディングしていきます。

ちなみに僕がカスタマイズしたファイルを載せておきます。

TOPのページを大きくカスタマイズしたので、front-page.phpを大幅にカスタマイズしました。

あとはstyle.cssに色を変えたり、レイアウト調整のためのスタイリングを記述しました。

Githubにソースコードをアップしたので、気になる方はどうぞ!

https://github.com/hiko0216/hikoproduction

6.サーバー、ドメインの契約

ローカル環境で99%カスタマイズが完成したら、ローカルから本番環境に移行するために、サーバードメインの契約を行います。

WordPressサイトにオススメのサーバーはXserverのX10がダントツでオススメです!

XserverのX10がオススメな理由

Xserverは長年の歴史から安心感絶大の老舗レンタルサーバー会社です。

その中でもwordpress運営に特化したX10プランは最安値プランにも関わらず、多数のアクセスにも耐えることができ、ドメインも無制限で登録でき、月額1350円で使うことができます!

Xserverのお申し込みはこちら

ドメインはお名前.comで無難に.comドメインを取得しておくといいでしょう。

サーバーの契約方法、ドメインのセットアップについてはこちら

7.サーバーにWordPressをインストール

Xserverの契約が完了し、ドメインのセットアップが完了したら、サーバーにWordPressをインストールします。

  1. Xserverのサーバーパネルにログイン
  2. WordPress簡単インストールをクリック
  3. WordPressをインストールしたいドメインを選択
  4. 下記を参考に記入しインストールする

8.ローカルでカスタマイズしたファイルをサーバーにアップ

WordPressのインストールが完了したら、FTPソフトを使って、ローカルでカスタマイズしたファイルをアップロードしていきます。

↓FTPソフトの使い方はこちらの記事を参考にしてください!↓

アップロードする場所(ディレクトリ)は

「ドメイン名.com/public_html/wp-content/themes/ここに親テーマ、子テーマをアップロードします」

イメージとしてはこのような感じです。

サーバーにテーマをアップロードし終えたら、WordPressの管理画面で、子テーマを有効化しましょう!

9.プラグインをインストール

次に必要なプラグインをインストールします。

  • Contact Form7:お問い合わせフォーム
  • All in SEO pack:SEO対策に効果的
  • Akismet Anti-Spam:アンチスパム対策
  • BackWPup:自動バックアップ
  • Jetpack by WordPress.com:PV数などの確認に便利

この辺りをインストールしておけばとりあえずはOKです。

10.微調整して完成!

最後に、本番環境でレイアウト崩れが無いかや、ちゃんとシステムが動作しているかチェックします。

WordPressでjQueryを使う場合は$では動かないので、jQueryと記述するようにしましょう!

  jQuery(function() {
    jQuery("#header-fnav").hide();
    jQuery("#header-fnav-area").hover(function(){
      jQuery("#header-fnav").fadeIn('fast');
  }, function(){
    jQuery("#header-fnav").fadeOut('fast');
  });
});

WordPressでjQueryを使う場合は上記のようにコーディングしないと動作しません。

またSSL化してhttps://になっているのであれば、絶対パスでhttp://となっている箇所をhttps://に変更する必要があります。

WordPressをテーマをカスタマイズしてポートフォリオを作る方法 まとめ

ネコ君
ネコ君

WordPressの既存テーマをカスタマイズして、ポートフォリオやサイトを作るイメージができたよ!僕もチャレンジしてみよう!

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

WordPressをカスタマイズすれば、このようなおしゃれなポートフォリオやサイトを作ることもできます!

WordPressについてもっと詳しく知りたい、フリーランスとして収益をあげれるようになりたい方は、【TechAcademy】  の WordPressコースを受講するといいでしょう!

個別に現役プログラマーがメンターとしてサポートしてくれるので、挫折することなく学習を進めることが可能です!

WordPressの既存テーマをカスタマイズして、思い通りにサイトが作れるようになれば、個人で稼ぐことも可能なので、ぜひトライしてみてください!

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

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

HikoPro
HikoPro

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

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

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

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

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

HikoProをフォローする
WordPress
HikoPro Blog

コメント

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