WordPressをカスタマイズしてポートフォリオのようなサイトを作りたいがどうすればいいか分からない。。。
ポートフォリオ作りにオススメのテーマを教えて欲しいのと、具体的なカスタマイズ事例、方法を教えて欲しい！
今回の記事では、僕がWordPressのテーマ(バズ部のXeory Extension)をカスタマイズしてポートフォリオを作った過程をご紹介します！
「WordPressの具体的なカスタマイズ方法を知りたい！」「WordPressの既存テーマをカスタマイズするとどうなるのか知りたい！」
このようなWordPress学習者の方に向けての記事になります。
- WordPressのテーマをカスタマイズする一連の流れがわかる
- WordPressをカスタマイズする前とした後の違いがわかる
- WordPressをカスタマイズして記事更新付きのポートフォリオを作れるようになる
WordPressテーマXeoryをカスタマイズしたポートフォリオの特徴
まずは、WordPressの人気テーマ(バズ部のXeory Extension)をカスタマイズして作ったポートフォリオをご覧ください！
- テーマとしては近未来をイメージ
- 黒、白、緑の3色で統一感を出した
- 実績一覧を管理画面から編集できるようにし管理を容易にした
- お問い合わせフォームをContact Form7プラグインで簡単実装
- Xeoryの良さも残しつつカスタマイズした
いかがでしょうか！
ちなみにXeory Extensionのデフォルトは https://xeory.jp/extension/ このようになっています。
なぜポートフォリをWordPressをカスタマイズして作成したかというと、僕はWordPress制作やカスタマイズを専門としているので、ポートフォリオもWordPressで作ることにより仕事の受注率アップに繋がると思い、作成しました。
もう一つの理由として、制作実績をいちいちコーディングしていくのは面倒なので、WordPressの管理画面から簡単に更新できるようにする為です。
WordPressを専門とする人ならWordPressでポートフォリオ制作を、
マークアップエンジニアならHTML,CSSで１からコーディングしてポートフォリオを作ろう！
WordPressの既存テーマをカスタマイズする流れ
WordPressのテーマをカスタマイズしてポートフォリオを作る一連の流れをざっとご紹介します！
- 完成図を書き起こす（AdobeのXDを使って完成図を書くのがオススメです！）
- 完成図に近いWordPressの既存テーマを探す
- ローカル環境を構築する
- 既存テーマの子テーマを作成する
- HTML,CSS,PHPを完成図通りにコーディングしていく
- サーバー、ドメインの契約
- サーバーにWordPressをインストール
- ローカルでカスタマイズしたファイルをサーバーにアップ
- プラグインをインストール
- 微調整して完成！
WordPressでサイト制作する場合は、元々既存テーマである程度デザインやレイアウトがあるので、デザインのイメージがしやすい点です。
0からデザインを考えてサイト作成するとなると、かなりハードルが高いですが、WordPressの既存テーマをカスタマイズすることにより、その工数を削減することができます。
WordPressのテーマを選ぶ際はできるだけシンプルなものを選ぶとカスタマイズがしやすいですよ！
1.完成図を書き起こす
まずは、完成図のイメージを書き起こすかAdobeXDという無料のサイト設計ツールを使って、作りたいサイトやポートフォリオの完成図を書き起こします。
Adobe XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへの共有を一つのアプリで実現します。
自分用にサイトを作る際は、途中で気が変わったりするので大体の完成図でいいですが、仕事でWordPressのカスタマイズ制作をする場合は、完成度の高いデザインを作成する必要があります。
2.完成図に近いWordPressの既存テーマを探す
完成図ができたら、それに似た、またはカスタマイズしやすようなWordPressのテーマをGoogleの検索エンジンから探します。
1番と2番は逆でもOKで、先にWordPressのテーマを探し、カスタマイズのイメージを掴んで設計図を書くのもいいでしょう！
3.ローカル環境を構築する
次に、カスタマイズするテーマが決まったら、ローカル環境を構築し、ローカルでカスタマイズを進めていきます。
ローカル環境で99%仕上げてから、本番環境にアップして微調整して作業していきます。
なぜかと言うと、ローカル環境だとコーディングをしたら直ぐに反映結果が確認できるからです。
「ローカル環境構築するのってなんだか苦手。。。」このように思われる方も多いかと思いますが、ご安心ください！
とっても簡単にWordPressのローカル環境を構築できる方法があります！
Local by Flywheel と呼ばれるソフトウエアを使えば一瞬でローカル環境を構築することができます！
↓Local by Flywheel のインストール方法、使い方はこちら↓
4.既存テーマの子テーマを作成する
Local by Flywheel でローカル環境を構築し、既存テーマのインストールが終わって、「さて、カスタマイズを始めよう。。。」と思っている方はちょっと待ってください！！
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は長年の歴史から安心感絶大の老舗レンタルサーバー会社です。
その中でもwordpress運営に特化したX10プランは最安値プランにも関わらず、多数のアクセスにも耐えることができ、ドメインも無制限で登録でき、月額1350円で使うことができます！
ドメインはお名前.comで無難に.comドメインを取得しておくといいでしょう。
→ サーバーの契約方法、ドメインのセットアップについてはこちら
7.サーバーにWordPressをインストール
Xserverの契約が完了し、ドメインのセットアップが完了したら、サーバーにWordPressをインストールします。
- Xserverのサーバーパネルにログイン
- WordPress簡単インストールをクリック
- WordPressをインストールしたいドメインを選択
- 下記を参考に記入しインストールする
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の既存テーマをカスタマイズして、思い通りにサイトが作れるようになれば、個人で稼ぐことも可能なので、ぜひトライしてみてください！
最後までご覧いただきありがとうございました！
