ポートフォリオサイト（yangyang-dev.com）

WordPress 7 PHP HTML CSS JavaScript Docker Compose

★ Live Demo GitHub

概要

自作テーマと自作プラグインで構築したWordPress製ポートフォリオサイト。プロジェクト情報を構造化して管理できるCMSとして設計し、管理画面から追加・編集・公開まで完結できる。テーマ側でフロントページ・プロジェクト一覧・詳細ページ・カテゴリフィルタ・キーワード検索を提供する。

対象ユーザー

開発案件を検討中のクライアント
エンジニアのスキルセットと実績を確認したいリクルーター
ポートフォリオとして技術力と実務経験を提示する場

Demo / GitHub

🔗 サイトを見る　｜　GitHub

スクリーンショット

プロジェクト詳細 — アイキャッチ・技術タグ・Demo/GitHubリンク・本文

開発背景

フリーランスとして案件を獲得するために、自分のスキルと実績を一箇所にまとめて見せるサイトが必要だった。既存テーマでは柔軟なデータ構造や管理画面を実現しづらいため、テーマとプラグインをゼロから自作した。WordPress開発スキルの実証も兼ねて構築した。

解決した課題

プロジェクト情報（Demo URL、GitHub、技術タグ、開発期間等）を構造化して管理
カテゴリフィルタとキーワード検索で、閲覧者が目的のプロジェクトを素早く見つけられる
管理画面からプロジェクトの追加・編集・並び順変更が可能で、運用の手間を最小化
REST APIを提供し、外部システムや別フロントエンドとの連携に対応

主な機能

テーマ（yang-portfolio）

フロントページ（Hero・実績数・Featured Projects・サービス紹介・Tech Stack・開発プロセス・About・Contact）
プロジェクト一覧ページ（カテゴリフィルタ＋キーワード検索）
プロジェクト詳細ページ（アイキャッチ・技術タグ・Demo/GitHubリンク・開発期間・担当範囲・本文）
About / Services / Contact ページ
レスポンシブデザイン

プラグイン（yang-demo-manager）

カスタム投稿タイプ yang_project（Projects）
カスタムタクソノミー project_category（AI、業務システム、Webサイト等8カテゴリ）
カスタムメタフィールド（Demo URL / GitHub URL / Tech Tags / Display Order / Development Period / Responsibilities / Gradient / Featured）
メタボックスUI（管理画面での入力フォーム）
管理画面カラム拡張（Featured / Order / Tech の一覧表示）
カスタムREST API（/yang/v1/projects、Featured・カテゴリフィルタ対応）
Featured Projects / 全プロジェクト取得のヘルパー関数

使用技術

CMS: WordPress 7
テーマ: PHP / HTML / CSS / JavaScript（自作テーマ）
プラグイン: PHP（自作プラグイン）
ホスティング: ConoHa WING
ローカル開発: Docker Compose（WordPress + MariaDB）
バージョン管理: Git / GitHub
API連携: WP REST API / WP Application Passwords

設計上の工夫

テーマとプラグインの分離: プロジェクトデータの管理ロジック（投稿タイプ・メタ・REST API）はプラグインに集約し、テーマはUI表示に専念。テーマを変更してもデータが失われない設計
メタフィールドの柔軟性: Demo URL・GitHub URL・技術タグ・表示順序などをカスタムフィールドで管理し、管理画面から自由に編集可能
REST API対応: プロジェクトデータをJSON形式で取得可能。カテゴリ別・Featured絞り込みにも対応し、将来的な外部連携や別フロントエンドからの利用を考慮
Docker開発環境: ローカルでWordPressとDBをDocker Composeで構築し、本番と同一構成でテスト。アプリケーションパスワードによるREST API認証も検証済み

アーキテクチャ

[管理者]
  ↓ プロジェクト登録・編集
WordPress 管理画面
  ↓ カスタムメタボックス
yang-demo-manager プラグイン
├─ カスタム投稿タイプ
├─ カスタムタクソノミー
├─ メタフィールド管理
└─ REST API エンドポイント
  ↓
yang-portfolio テーマ
├─ フロントページ
├─ プロジェクト一覧（フィルタ・検索）
├─ プロジェクト詳細
└─ About / Services / Contact
  ↓
[閲覧者] ブラウザ表示

開発周期

2週間

担当範囲

企画 / 設計 / テーマ開発 / プラグイン開発 / デプロイ / コンテンツ作成 / 運用

成果・実現したこと

管理画面だけでプロジェクトの追加・編集・公開まで完結し、HTML編集が不要
テーマとプラグインを分離した構成により、デザイン変更時もデータ構造へ影響しない保守性を実現
REST API経由でプロジェクトデータを取得でき、外部システムとの連携やヘッドレスCMSへの拡張にも対応可能

想定導入効果

コンテンツ更新作業の効率化
プロジェクト情報の構造化による管理コスト削減
カテゴリ・キーワード検索による閲覧者の利便性向上

開発で直面した課題と解決方法

REST APIでのメタフィールド設定: WP REST APIではカスタムメタフィールドの書き込みに制約があり、register_post_meta で show_in_rest を有効にして対応。一部フィールドは管理画面からの手動設定で運用
サムネイル表示の互換性: get_the_post_thumbnail_url($post, ‘large’) が小さい画像で空を返す問題を発見し、fullサイズへフォールバックする処理を追加し、画像サイズに依存しない表示を実現
ローカル開発環境の認証: WordPressはHTTP環境でアプリケーションパスワードを拒否するため、WP_ENVIRONMENT_TYPE と wp_is_application_passwords_available フィルタで対応

このプロジェクトで学んだこと

WordPressのカスタム投稿タイプ・タクソノミー・メタフィールドを組み合わせることで、汎用CMSを業務特化型の管理ツールに変えられることを実感した
テーマとプラグインを分離して設計することで、見た目の変更とデータ構造の変更を独立して行える保守性の高い構成が実現できた
Dockerを活用したローカル開発環境を整備することで、本番との差異を抑えながら安全に開発・検証を進められることを学んだ