Wordpress Advanced 02

静的サイト「Advanced 05 - nest-house」を基に、WordPress へ変換してください。

リソースリンク

👉 nest-house

作業要件

1. ローカル環境の構築

• LocalWP または XAMPP を使用し、プロジェクト名を nest-house として開発環境を作成してください。

2. インターフェース構造の分析

• 次の要素を特定し、変換対象としてください：Header、Footer、Sidebar、Main Content。

3. 繰り返し要素の分割

• 繰り返し使用される要素（例：記事リスト）は、template-parts ディレクトリ内のファイルとして分割してください。

4. テンプレートページの作成と設定

• 適切なテンプレートファイルを設定してください：
  • front-page.php
  • page.php
  • single.php
  • archive.php
  • 404.php
  • など

5. カスタム投稿タイプの作成

• 以下のカスタム投稿タイプを作成し、それぞれに適したテンプレートを設定してください：
  • works
  • voice
  • blog

6. Single Work 用の ACF Flexible Content Field の設定

• 必要なコンテンツ要素：
  • 1 column：横幅いっぱいのコンテンツ
  • 2 column：2カラムレイアウト
  • Content：h、p、ul、ol、li タグを含む説明文
  • Video：URL から動画を埋め込み
  • Gallery：画像ギャラリーの表示

7. 3ステップの問い合わせフォーム作成

• プラグイン（例：Contact Form 7 + 確認アドオン）を利用するか、PHP で自作し wp_mail() 関数でメール送信してください。
  • 入力フォーム
  • 確認画面
  • サンクスページ

注意事項

• AI を使ってコードを生成することは禁止です。提出物はチェックされます。 もし80%以上のソースコードがAI生成と判定された場合、課題は無効となり、受験資格を失います。

この課題で身につくスキル

• カスタム投稿タイプ（CPT）の作成： プロジェクト要件に合わせた投稿タイプの設定
• カスタムフィールド（ACF + Flexible Content）の構築： Advanced Custom Fields を使った柔軟なデータ構造の作成
• 多段階問い合わせフォームの実装： スムーズなユーザー体験を意識した多段階フォームの設計・実装
• 管理しやすいソース構造の構築： テンプレートや template-parts への分割による再利用性・管理性の向上
• WordPress テーマ構造と動的インターフェースの理解： テーマ構造の理解と、管理画面データに基づく動的な画面構築