【エンジニア向け】WordPressで簡単!シンプルなポートフォリオサイトの作り方【ポートフォリオ作成手順】

PC作業

この記事の最終更新日: 2021年1月9日

はじめに

皆さんこんにちは。daigoroです。

最近では、エンジニアなら、ポートフォリオサイトを作るのが当たり前になってきているようです。

今回は、簡単にシンプルなポートフォリオを作りたい方向けに記事を作成しました。

注意

この記事はWordpressインストール済みのサーバーが準備済みであることを前提としています。

完成サンプル図

完成サンプル図になります。

シンプル wordpress ポートフォリオサイト作成  portfolio

画像は適当なものを用意しました。

それぞれの写真をクリックすると、記事ページに飛べます。

記事ページには、成果物の詳細やデモのURLを張り付けるようにしましょう。

このレイアウトは汎用性が高く、自分好みにカスタマイズもしやすいです。

ポートフォリオ以外の用途で使うこともできます。

作成手順

無料テーマをダウンロード

このポートフォリオは、「Pronto」という無料テーマを使っています。

このサイトから、テーマのzipファイルをダウンロードしましょう。

Pronto Free Masonry Gallery WordPress Theme
Pronto is a very clean and minimal free Masonry Gallery WordPress theme created by WPExplorer.com that's perfect for blogs and portfolios.
シンプル wordpress ポートフォリオサイト作成  Pronto

次に、テーマを取り込みます。

外観>新規追加>テーマのアップロードから、

先ほどダウンロードしたzipファイルを選択&インストールしましょう。

wordpress テーマの取り込み
wordpress テーマ取り込み

テーマを適用すると、このようなホームページになります。

基本的な情報の設定

設定>一般から、サイトタイトルとサイトの説明を書いておきましょう。

サイトの説明はシンプルなものがおすすめです。

wordpressアドレスとサイトアドレスのURLを、httpからhttpsに書き換えておきましょう。

wordpress ポートフォリオ作成 基本設定

問い合わせフォームの設置

プラグインで、contact form7をインストールして、お問い合わせページを作っておきましょう。

wordpress お問い合わせ

設定で、コンタクトフォーム1を編集します。

wordpress お問い合わせ ポートフォリオ

フォーム名を、コンタクトフォーム1からお問い合わせに変更して一度保存します。

お問い合わせフォーム コンタクトフォームの設定

次に、生成されたショートコードをコピーします。

お問い合わせ コンタクト contact wordpress

次に、固定ページのサンプルページをお問い合わせフォームに変えます。

wordpress contact 問い合わせ ポートフォリオ

元の文章はすべて消して、次のようなページを作れば、お問い合わせページが完成です。

お問い合わせ 固定ページ wordpress

メニューの作成

次はメインメニューを作成します。

メニュー名を、Menu1からHomeに変更します。

変更したら、メニューを作成ボタンをクリックします。

wordpress メニュー ポートフォリオ
portfolio wordpress 簡単 メニュー

ウィジェットを整える

外観>ウィジェットからサイドバーを設定します。

ナビゲーションメニュー、カテゴリー、タグクラウド、メタ情報の順に4つ設定しましょう。

(タグクラウドは、タグが0個の間は表示されないので、サイトに見つからなくても慌てないでください。)

表示名も設定できるので、かっこ良い名前をつけましょう。

ワードプレス wordpress 外観 ウィジェット

記事を投稿して完成

投稿>新規投稿から記事を投稿しましょう。これで完成です。

冒頭でも述べましたが記事ページには、

成果物の詳細やデモのURLを張り付けるようにしましょう。

記事に対するコメントやフィードバックは投稿時に設定できます。

基本的に必要ないので、チェックを外しておきましょう。(画像右下)

コメント許可 無効
ポートフォリオ 作り方

背景色を決める

背景色を変えたい場合は、

外観>カスタマイズ>色で背景色を決めましょう。

ただし、グレーが安定しているのであまり変更する必要がないかもしれません。

ポートフォリオ 簡単 作り方 背景色

おわりに

いかがでしたでしょうか?期間限定でサンプルページを公開しておきます。

Portfolio – daigoroのポートフォリオサイト

仕事や勉強をしながらポートフォリオを作成するとなると、中々時間が確保できません。

簡単にレスポンシブデザイン(スマホとPCで両立するデザイン)を実現できるのも、

wordpressで作成する利点です。

この記事が、ポートフォリオサイト作成の手助けになれば幸いです。

以上、daigoroでした。

コメント

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