WordPress でポートフォリオサイトを作るときは、テーマ選びより先に「作品をどう登録し、どう一覧にするか」を決めると、後から作品が増えても崩れないサイトになります。この記事では、ページ構成の設計、テーマの選び方、作品を管理するカスタム投稿タイプとカスタムフィールドの設定、一覧ページと詳細ページの作り方、問い合わせフォームと公開前のチェックまでを、作業の順番に沿って解説します。
最初にサイトの構成を決める
ポートフォリオサイトの目的は、見た人に「この人に頼みたい」と思ってもらい、連絡してもらうことです。そのために必要なページは、多くの場合次の5つです。
- トップページ: 何ができる人かを一言で伝え、代表的な作品を数点見せる
- 作品一覧: 作品をサムネイルで並べ、種類（Webサイト、ロゴ、イラストなど）で絞り込めるようにする
- 作品詳細: 1作品ごとに、画像と合わせて目的・担当範囲・工夫した点を説明する
- プロフィール: 経歴、得意分野、使えるツールや言語
- お問い合わせ: 依頼や相談を受け付けるフォーム
ここで決めておきたいのが、作品詳細に毎回載せる項目です。たとえば「クライアント名（公開可の場合）」「制作時期」「担当範囲」「使用ツール」「公開URL」のように項目を固定しておくと、作品ページの見た目がそろい、見る側も比較しやすくなります。この項目の一覧が、後で作るカスタムフィールドの設計図になります。
環境とテーマを用意する
レンタルサーバーに WordPress をインストールし、SSL（https）の有効化と、パーマリンク設定（「設定」→「パーマリンク」で「投稿名」など）を最初に済ませます。パーマリンクは公開後に変えるとURLが変わってしまうため、作品を登録し始める前に決めておきます。
テーマは、大きく次の2つの方向から選びます。
- ブロックテーマ（Twenty Twenty-Five など）: サイトエディターでトップページや一覧ページのレイアウトを組める。ポートフォリオ向けのパターンが同梱されているテーマもある
- カスタマイザー型の多機能テーマ（Blocksy、Kadence など）: ヘッダーや一覧の表示方法をカスタマイザーの設定で調整できる
どちらを選ぶ場合も、作品画像を大きく見せられること、一覧のカード表示が整っていること、スマートフォンで見やすいことを確認します。テーマのデモで、自分の作品に近い比率の画像（横長・縦長・正方形）がきれいに並ぶかを見ておくと、選んだ後の手直しが減ります。
作品はカスタム投稿タイプで管理する
作品を通常の「投稿」として登録することもできますが、ブログも書く予定があるなら、作品専用のカスタム投稿タイプを作るほうが管理しやすくなります。作品とブログ記事が混ざらず、作品一覧のURL（例: /works/）も独立させられます。
プラグインを使う場合は Custom Post Type UI などで作成できます。コードで登録する場合は、子テーマの functions.php に次のように書きます。
add_action( 'init', function () {
register_post_type( 'works', array(
'labels' => array(
'name' => '作品',
'singular_name' => '作品',
'add_new_item' => '作品を追加',
),
'public' => true,
'has_archive' => true, // /works/ で一覧ページを表示
'show_in_rest' => true, // ブロックエディターで編集するために必要
'menu_icon' => 'dashicons-portfolio',
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
'rewrite' => array( 'slug' => 'works' ),
) );
register_taxonomy( 'work_type', 'works', array(
'labels' => array( 'name' => '作品の種類' ),
'hierarchical' => true, // カテゴリーと同じ親子形式
'show_in_rest' => true,
'show_admin_column' => true,
'rewrite' => array( 'slug' => 'work-type' ),
) );
} );ポイントは show_in_rest を true にすることです。これが無いと、作品の編集画面がブロックエディターにならず、後述のクエリーループブロックで作品を選べないこともあります。thumbnail を supports に入れておくと、アイキャッチ画像を作品のサムネイルとして使えます。
コードを追加したら、「設定」→「パーマリンク」を開いて何も変えずに「変更を保存」を押します。これでURLの規則が更新されます。この操作をしないと、作品ページを開いたときに404エラーになることがあります。
作品の詳細項目をカスタムフィールドで作る
最初に決めた「制作時期」「担当範囲」「公開URL」などの項目は、Advanced Custom Fields（ACF）で入力欄を作ると、作品ごとに入力漏れなく管理できます。ACF をインストールしたら、フィールドグループを作成し、表示する条件を「投稿タイプが作品と等しい」にします。
フィールドは、項目の性質に合わせて種類を選びます。
- 制作時期: 日付選択
- 担当範囲: チェックボックス（デザイン、コーディング、ディレクションなど）
- 公開URL: URL
- クライアント名: テキスト（非公開の案件は空欄にする運用）
クラシックテーマや子テーマのテンプレートで出力する場合は、get_field() で値を取り出し、エスケープしてから表示します。
<?php
$url = get_field( 'site_url' );
$period = get_field( 'period' );
?>
<dl class="work-meta">
<?php if ( $period ) : ?>
<dt>制作時期</dt>
<dd><?php echo esc_html( $period ); ?></dd>
<?php endif; ?>
<?php if ( $url ) : ?>
<dt>公開URL</dt>
<dd><a href="<?php echo esc_url( $url ); ?>" target="_blank" rel="noopener"><?php echo esc_html( $url ); ?></a></dd>
<?php endif; ?>
</dl>値が空の項目は見出しごと出さないようにしているのは、非公開案件などで項目が欠けたときに「公開URL：」だけが残るのを防ぐためです。ブロックテーマで出力する場合は、ACF のバージョンや使い方によって方法が変わるため、ACF の公式ドキュメントでブロックテーマでの表示方法を確認してください。
作品一覧と詳細ページを作る
一覧ページ
ブロックテーマなら、サイトエディターで作品のアーカイブ用テンプレートを追加し、その中のクエリーループブロックで作品を並べます。トップページに代表作だけを並べたい場合は、トップページにクエリーループブロックを置き、投稿タイプに「作品」を選んで表示件数を絞ります。並べ方はグリッド表示にし、アイキャッチ画像とタイトルだけのシンプルなカードにすると、作品そのものが目立ちます。
カスタマイザー型のテーマでは、テーマの設定で作品のアーカイブの表示方法を選べることがあります。選べない場合は、archive-works.php を子テーマに作って一覧の表示を整えます。
詳細ページ
詳細ページでは、画像だけを並べるのではなく、「どんな課題に対して何をしたか」を短い文章で添えることが大切です。依頼を検討している人は、見た目の好みと同じくらい、仕事の進め方や考え方を知りたがっています。
画像は、メディアライブラリにアップロードする前に適切なサイズへ縮小し、WebP などの軽い形式も検討します。大きな画像を何枚も載せると表示が遅くなり、スマートフォンで見る人が途中で離れてしまいます。
問い合わせフォームを設置する
問い合わせページには、Contact Form 7 などのフォームプラグインでフォームを設置します。設置後は、自分で送信テストを行い、通知メールが届くこと、送信者への自動返信が意図どおりの文面であることを確認します。
フォームを公開すると、多くの場合まもなくスパム送信が届き始めます。reCAPTCHA や Cloudflare Turnstile などのスパム対策を組み合わせてください。また、レンタルサーバーによっては WordPress からのメールが迷惑メール扱いになることがあるため、SMTP 経由で送信する設定にすると届きやすくなります。
公開前のチェック
公開前に、次の点を確認します（2026年10月現在の一般的な運用を前提にしています）。
- 掲載する作品は、クライアントから公開の許可を得ているか。守秘義務のある案件は、名前を伏せるか掲載を見送る
- 画像やフォント、素材のライセンスに問題がないか
- プロフィールに、自宅の住所など公開する必要のない個人情報を載せていないか
- スマートフォンとパソコンの両方で、一覧・詳細・フォームが崩れずに表示されるか
- 各ページにタイトルと説明文が設定され、SNSで共有したときの画像（OGP）が表示されるか
- バックアップの仕組み（プラグインやサーバーの自動バックアップ）が動いているか
公開後は、新しい作品を追加するたびに古い作品を見直し、代表作を入れ替えていくと、サイト全体の印象を新しく保てます。
まとめ
- 最初にページ構成と、作品詳細に載せる項目を決める。この項目がカスタムフィールドの設計図になる
- 作品はカスタム投稿タイプで管理し、
show_in_restを有効にする。登録後はパーマリンク設定を保存し直す - 詳細項目は ACF で入力欄を作り、出力時は空欄の扱いとエスケープに気を付ける
- 一覧はクエリーループブロックやテーマの設定で作り、問い合わせフォームはスパム対策とメールの到達まで確認してから公開する