今回でいよいよ爆速ポートフォリオ作成の最終章となりました。
HTMLとBootstrapでポートフォリオはすでに作成していただいていますが、ポートフォリオの作成例として載せる会社のコーポレートサイトのようなページをWordPressを使って作成していきます。
前回はWordPressの初期設定を行ってきましたが、今回はいよいよ実際にページの作成となります。
わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。
たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。
今回はWordPressの初期設定が終わり、実際にページを作成する作業を中心に解説いたします。
- WordPressで実際にページを作る流れを知りたい
- WordPressのテーマを入れた後に何をしたらいいかわからない
- 案件がとれるエンジニアになりたい
実際に案件として多いのはWordPressで会社のページやブログの立ち上げです。今回の内容を踏まえて実際に案件獲得に挑戦してみましょう。
今回は大きな流れの解説となります。具体的なカスタマイズの方法はテーマによって大きく異なるため、テーマごとの学習が必要となります。
流れに沿ってあなたの選んだテーマをぜひご自身でカスタマイズに挑戦してみてください。
爆速ポートフォリオ作成について
爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。
今回の記事は最終章になりますので、この記事から読まれている方はぜひSTEP1の内容から読んでみてくださいね。
前回解説した内容です。まだSTEP1を実施していない方は、STEP1の内容を事前にチェックしてくださいね
ポートフォリオの前にサーバの設定とホームページを公開する手順を確認しましょう
HTML/CSS＆Bootstrapでポートフォリオの作成方法を解説します。
今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。
WordPressをインストール、初期設定をした後にテーマをカスタマイズして会社のコーポレートを作成します。
STEP 5-1 WordPressのインストール
STEP 5-2 WordPressの初期設定
STEP 5-3 WordPressで会社のページ作成 ← 今回解説
今回はWordPressの作り込みの作業となり、WordPressのインストール及び初期設定が完了していることが前提となります。もしまだWordPressのインストールが完了されていない方や初期設定が終わっていない方は、事前に済ませておいてください。
[card2 id=”587″]
[card2 id=”712″]
WordPressでのページの作り込みについて
TwitterなどでWeb制作や案件で○○円稼いだという内容の多くは、WordPressでの案件を獲得し作成しているものになります。
HTML＆CSSの案件もありますが、WordPressで作成できるようになると案件の幅は一気に広がります。
WordPressでの案件で実際に依頼を受けたページを作成する方法は大きく分けて2つあります。
- 完全オリジナルのテーマを作成する
- 既存のテーマのカスタマイズをする
作業量が大きく変わるので、ここの違いは把握しておきましょう。
完全オリジナルのテーマはあなた自身でほぼゼロからテーマをクライアントの要望に沿って作成いたします。
- メリットとしては他社とかぶらない
- 細かい要望や珍しいデザインにも対応できる
といったメリットがあり、クライアントの中でも希望される方が多いです。
しかし、完全オリジナルテーマは
- 作成に時間がかかる
- 作業量が多いため高額で受けないと割りに合わない
といった、みなさんにとっては罠が多くあります。
慣れてくれば自分のためのテーマのフレームワークを作り、ガツガツオリジナルテーマを作成している人もいますが、そこまで極めるならWebエンジニアになることを個人的にはオススメします。
私がオススメしており、今回の記事でも活用するのが既存のテーマのカスタマイズです。
テーマによっては商用＆有償での制作代行が認められているテーマも多く存在しており、駆け出しエンジニアや副業でのお小遣い稼ぎの方にはオススメです。
- 短期間で制作できる
- 実際の作業はWordPress上の操作がほとんど
- 様々なテンプレートが簡単に利用できる
- 簡単なプログラミングで幅を広げられる
といったみなさんにとってのメリットがたくさんあります。
逆にデメリットとしては
- 他社と被ってしまう可能性がある
- カスタマイズに制限や手間がかかる
- 案件の単価は安くなりがち
などがあります。一番のデメリットは案件が安くなりがちですが、テーマの扱いに慣れ、実績を積み、提案力を上げることで単価を上げることは可能です。
デメリット以上にメリットが大きいので個人的にはテンプレートの活用がオススメです。
テンプレートをカスタマイズする
いよいよ実際にWordPressのカスタマイズをやってみましょう。
実際のカスタマイズはテーマによって大きく変わるので様々なテーマを使ってみて引き出しを増やしていくのが案件で活躍できる幅を広げるテクニックでもあります。
今回は前回インストールしたHestiaというテーマをカスタマイズしていきます。
もしまだインストールされていない方は前回の記事を参考にインストールしてみてください。
[card2 id=”712″]
テンプレートによってカスタマイズできる項目や機能はバラバラで、会社のランディングページに適したテンプレートやブログに強いテンプレート、クールなイメージや柔らかいイメージなど本当に様々です。
クライアントや案件の要望に対して、いかにマッチするテンプレートを導入できるかで完成までにかかる時間と労力が大きく左右されるといっても過言ではありません。
自分が得意なテーマを一つに絞り、コーディングによって幅を広げてもいいですし、複数のテーマを引き出しとして用意しておきなるべくコーディングをしないという方針もありです。
テーマによってはテーマインストール後に、テーマの設定が可能なものもあります。
Hestiaの場合は外観からHestia Optionsという項目が追加されます。
さらにテンプレートによっては、テンプレート専用に用意されたプラグインが提供されているものもあります。
プラグインを利用することで、カスタマイズの幅が広がったり、スムーズに進めることができたりしますので、テーマをいじってみる場合は積極的に活用しましょう。
テーマのカスタマイズは独自に用意された項目から行うタイプと、標準のカスタマイズが拡張されたタイプが存在します。
Hestiaは標準のカスタマイズのページでカスタマイズ可能ですので、カスタマイズのページを開きます。
カスタマイズを開くとブログの画面とメニューが表示されます。
編集には大きく2つ方法があります。
画面に表示されたブログから編集をしていく方法になります。
画面に表示された鉛筆のマークをクリックすると、メニューの表示が変わり対象の部分のカスタマイズの項目が表示されます。
直感的にカスタマイズを進めたい方はプレビューから編集をしましょう。
ざっくりテーマの機能を把握する場合にも便利です。
左に表示されているメニューからカスタマイズしたい場所を探し、カスタマイズを行う方法です。
プレビューに表示されていない項目のカスタマイズも可能なので、慣れてくるとメニューからカスタマイズを行う方が早く作成できるようになります。
カスタマイズ例
今回はHestiaのテーマのカスタマイズのみで、どんなものが作れるのかを試してみました。
私がWordPress制作代行会社をイメージして、比較的簡単に作れるサイトとして作成してみました。
ちょっとシンプルで、ベタすぎ！もうちょっとおしゃれにしたい！という方も多いと思います。
しかし、ポイントはこのサイトを作るのに1時間もかかっていません。
もしテーマについてもう少し慣れていれば30分もかからないかもしれないです。
作り込もうと思えば時間をかけてじっくり作り込んでもらうのも自由です。
しかし、作り込むのは実際に作りたい目標を決めたり、案件をとって実際に作るときで十分です。
まず最低限これぐらいは作れる。という体験がとても重要ですし、これぐらいで良ければ作りますとココナラなどに少し安めの設定で販売してみるのもいいでしょう。
テンプレートでカバーしきれない部分はプログラミング
テンプレートでかなりの項目をカバーできますが、どうしても表示したい場所に表示できない項目などが出てきます。
そう言ったときにPHPのコードを書くスキルがあれば、どんなカスタマイズでも可能になります。
どう言った項目がテーマだけで完結でき、どう言った内容であればプログラミングが必要かを把握するのも、多くの案件をさばくためのポイントになるので、案件を受けながらテーマの勉強もしましょう。
上でさらっと触れましたが、WordPressはPHPという言語で書かれています。
今回はテーマのカスタマイズだけで完結するように作成しましたが、テーマでカスタマイズできない部分はテーマを改造することでより大きなカスタマイズが可能です。
WordPressのプログラミングに興味がある方はWordPressを通してPHPを学習してみましょう。
[itemlink post_id=”753″]
[itemlink post_id=”754″]
WordPressの案件を本格的にとって稼いでいきたい方にはPHPの学習をオススメしますが、Webエンジニアになりたくてこの爆速ポートフォリオを見ていただいている方には、別の言語の学習を個人的にはオススメしています。
そのため、WordPressはあくまでちょっとした副業という場合は、テーマを探すというのもありです。案件にぴったり合うテーマを知ってさえいればプログラミングが不要になり、納品のスピードも劇的に上がります。
クライアントの要望通りにそのままサイトを作るのはエンジニアからすると最低限のアウトプットです。
クライアントがなぜその項目が欲しいのか本当の要求をヒアリングし、テーマのカスタマイズだけで済むけど、初めのクライアントよりも成果の上がるサイトを提案できればWin-Winになることを覚えておいてください。
もし、他のテーマで具体的なカスタマイズの流れが知りたい！サポートして欲しい！と言った要望があればぜひTwitter(@1000sideincome)にご連絡ください。
サポート内容によっては有償にはなりますが、徹底サポートさせていただきます。
爆速ポートフォリオ作成を終えて
大きく5つのステップを紹介し、大きくスキルを伸ばせた人、すでに知っていたことを復習だけだった人、様々な人がいると思います。
ステップ5まで終わらせた皆さんは、サーバを自分の手で契約でき、簡単なサイトをBootStrapやWordPressを活用して独自ドメインで公開できるスキルを持っています。
このスキルをお金に稼ぐスキルに変えるのか、ただ作ることができるスキルで終わるのかはあなたのこれからのアクション次第です。
様々なテンプレートでサンプルを作りココナラに出品して案件を獲得している人もいらっしゃいますし、転職に向けてBootStrapのサイトをさらに作り込む方もいらっしゃいます。
ココナラに出品し、実際に案件を獲得してから足りない部分をPHPを勉強して作成した方もいらっしゃいます。
あなたが身につけたスキルを今後どう伸ばし、どう活用するかは全てあなた次第です。
ステップ全てを終えることができたあなたはすでに一般的な人よりもずば抜けたスキルを持っています。より優秀なエンジニアたちと比べるだけでなく、あなたのスキルで誰かの役に立てるかと考えることも重要ですよ。
コメント