この記事の最終更新日: 2021年10月30日
はじめに
皆さんこんにちは。daigoroです。
最近ではエンジニアならポートフォリオサイトを作るのが当たり前になってきているようです。
今回は、簡単にシンプルなポートフォリオを作りたい方向けに記事を作成しました。
この記事はWordpressインストール済みのサーバーが準備済みであることを前提としています。
完成サンプル図
完成サンプル図になります。
画像は適当なものを用意しました。
それぞれの写真をクリックすると、記事ページに飛べます。
記事ページには、成果物の詳細やデモのURLを張り付けるようにしましょう。
このレイアウトは汎用性が高く、自分好みにカスタマイズもしやすいです。
ポートフォリオ以外の用途で使うこともできます。
作成手順
無料テーマをダウンロード
このポートフォリオは、「Pronto」という無料テーマを使っています。
このサイトから、テーマのzipファイルをダウンロードしましょう。
次に、テーマを取り込みます。
外観>新規追加>テーマのアップロードから、
先ほどダウンロードしたzipファイルを選択＆インストールしましょう。
テーマを適用すると、このようなホームページになります。
基本的な情報の設定
設定＞一般から、サイトタイトルとサイトの説明を書いておきましょう。
サイトの説明はシンプルなものがおすすめです。
wordpressアドレスとサイトアドレスのURLを、httpからhttpsに書き換えておきましょう。
問い合わせフォームの設置
プラグインで、contact form7をインストールして、お問い合わせページを作っておきましょう。
設定で、コンタクトフォーム１を編集します。
フォーム名を、コンタクトフォーム１からお問い合わせに変更して一度保存します。
次に、生成されたショートコードをコピーします。
次に、固定ページのサンプルページをお問い合わせフォームに変えます。
元の文章はすべて消して、次のようなページを作れば、お問い合わせページが完成です。
メニューの作成
次はメインメニューを作成します。
メニュー名を、Menu1からHomeに変更します。
変更したら、メニューを作成ボタンをクリックします。
ウィジェットを整える
外観>ウィジェットからサイドバーを設定します。
ナビゲーションメニュー、カテゴリー、タグクラウド、メタ情報の順に４つ設定しましょう。
（タグクラウドは、タグが０個の間は表示されないので、サイトに見つからなくても慌てないでください。）
表示名も設定できるので、かっこ良い名前をつけましょう。
記事を投稿して完成
投稿>新規投稿から記事を投稿しましょう。これで完成です。
冒頭でも述べましたが記事ページには、
成果物の詳細やデモのURLを張り付けるようにしましょう。
記事に対するコメントやフィードバックは投稿時に設定できます。
基本的に必要ないので、チェックを外しておきましょう。（画像右下）
背景色を決める
背景色を変えたい場合は、
外観>カスタマイズ>色で背景色を決めましょう。
ただし、グレーが安定しているのであまり変更する必要がないかもしれません。
おわりに
いかがでしたでしょうか？期間限定でサンプルページを公開しておきます。
仕事や勉強をしながらポートフォリオを作成するとなると、中々時間が確保できません。
簡単にレスポンシブデザイン（スマホとPCで両立するデザイン）を実現できるのも、
wordpressで作成する利点です。
この記事がポートフォリオサイト作成の手助けになれば幸いです。
以上、daigoroでした。
大阪のエンジニアが書いているブログ。
コメント