この記事の最終更新日: 2021年10月30日
はじめに
皆さんこんにちは。daigoroです。
最近ではエンジニアならポートフォリオサイトを作るのが当たり前になってきているようです。
今回は、簡単にシンプルなポートフォリオを作りたい方向けに記事を作成しました。
この記事はWordpressインストール済みのサーバーが準備済みであることを前提としています。
完成サンプル図
完成サンプル図になります。
![シンプル wordpress ポートフォリオサイト作成 portfolio](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-4.png?resize=1024%2C545&ssl=1)
画像は適当なものを用意しました。
それぞれの写真をクリックすると、記事ページに飛べます。
記事ページには、成果物の詳細やデモのURLを張り付けるようにしましょう。
このレイアウトは汎用性が高く、自分好みにカスタマイズもしやすいです。
ポートフォリオ以外の用途で使うこともできます。
作成手順
無料テーマをダウンロード
このポートフォリオは、「Pronto」という無料テーマを使っています。
このサイトから、テーマのzipファイルをダウンロードしましょう。
![](https://yurupro.cloud/wp-content/uploads/cocoon-resources/blog-card-cache/f040dde15af31ce86f5271fd72fb8f17.png)
![シンプル wordpress ポートフォリオサイト作成 Pronto](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-5.png?resize=1024%2C576&ssl=1)
次に、テーマを取り込みます。
外観>新規追加>テーマのアップロードから、
先ほどダウンロードしたzipファイルを選択&インストールしましょう。
![wordpress テーマの取り込み](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-7.png?resize=1024%2C523&ssl=1)
![wordpress テーマ取り込み](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-6.png?resize=1024%2C497&ssl=1)
テーマを適用すると、このようなホームページになります。
![](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-8.png?resize=1024%2C609&ssl=1)
基本的な情報の設定
設定>一般から、サイトタイトルとサイトの説明を書いておきましょう。
サイトの説明はシンプルなものがおすすめです。
wordpressアドレスとサイトアドレスのURLを、httpからhttpsに書き換えておきましょう。
![wordpress ポートフォリオ作成 基本設定](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-9.png?resize=1024%2C344&ssl=1)
問い合わせフォームの設置
プラグインで、contact form7をインストールして、お問い合わせページを作っておきましょう。
![wordpress お問い合わせ](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-10.png?resize=1024%2C518&ssl=1)
設定で、コンタクトフォーム1を編集します。
![wordpress お問い合わせ ポートフォリオ](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-11.png?resize=1024%2C511&ssl=1)
フォーム名を、コンタクトフォーム1からお問い合わせに変更して一度保存します。
![お問い合わせフォーム コンタクトフォームの設定](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-12.png?resize=1024%2C532&ssl=1)
次に、生成されたショートコードをコピーします。
![お問い合わせ コンタクト contact wordpress](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-13.png?resize=1024%2C461&ssl=1)
次に、固定ページのサンプルページをお問い合わせフォームに変えます。
![wordpress contact 問い合わせ ポートフォリオ](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-14.png?resize=1024%2C401&ssl=1)
元の文章はすべて消して、次のようなページを作れば、お問い合わせページが完成です。
![お問い合わせ 固定ページ wordpress](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-15.png?resize=1024%2C506&ssl=1)
メニューの作成
次はメインメニューを作成します。
メニュー名を、Menu1からHomeに変更します。
変更したら、メニューを作成ボタンをクリックします。
![wordpress メニュー ポートフォリオ](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-17.png?resize=1024%2C573&ssl=1)
![portfolio wordpress 簡単 メニュー](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-18.png?resize=1024%2C530&ssl=1)
ウィジェットを整える
外観>ウィジェットからサイドバーを設定します。
ナビゲーションメニュー、カテゴリー、タグクラウド、メタ情報の順に4つ設定しましょう。
(タグクラウドは、タグが0個の間は表示されないので、サイトに見つからなくても慌てないでください。)
表示名も設定できるので、かっこ良い名前をつけましょう。
![ワードプレス wordpress 外観 ウィジェット](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-19.png?resize=1024%2C418&ssl=1)
記事を投稿して完成
投稿>新規投稿から記事を投稿しましょう。これで完成です。
冒頭でも述べましたが記事ページには、
成果物の詳細やデモのURLを張り付けるようにしましょう。
記事に対するコメントやフィードバックは投稿時に設定できます。
基本的に必要ないので、チェックを外しておきましょう。(画像右下)
![コメント許可 無効](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-24.png?resize=1024%2C592&ssl=1)
![ポートフォリオ 作り方](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-4.png?resize=1024%2C545&ssl=1)
背景色を決める
背景色を変えたい場合は、
外観>カスタマイズ>色で背景色を決めましょう。
ただし、グレーが安定しているのであまり変更する必要がないかもしれません。
![ポートフォリオ 簡単 作り方 背景色](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2021/01/image-23.png?resize=1024%2C594&ssl=1)
おわりに
いかがでしたでしょうか?期間限定でサンプルページを公開しておきます。
仕事や勉強をしながらポートフォリオを作成するとなると、中々時間が確保できません。
簡単にレスポンシブデザイン(スマホとPCで両立するデザイン)を実現できるのも、
wordpressで作成する利点です。
この記事がポートフォリオサイト作成の手助けになれば幸いです。
以上、daigoroでした。
![ゆるプロ日記](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/01/12245_paint.png?resize=100%2C100&ssl=1)
大阪のエンジニアが書いているブログ。
コメント