Wordpress Advanced 03

リンク集

👉 Sugoo Wheelchair

ツール: Adobe XD

作業要件

1. ローカル環境の構築

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

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

• Header、Footer、Main Content など、変換する要素を特定してください。

3. 繰り返し要素の分割

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

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

• 適切なテンプレートファイルを設定し、Webサイトはトップページとポップアップのみを使用します:
  • front-page.php
  • 404.php

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

• Sugoo_車椅子365.pdf ファイルをよく読み、プロジェクト要件に従ってカスタム投稿タイプを作成してください。
• どの内容をカスタム投稿タイプにすべきか判断できるスキルが必要です。

6. Advanced Custom Fields (ACF) の設定

• デザインに合わせてカスタムフィールドを設定し、すべての動的コンテンツが管理画面から直接入力できるようにしてください。
• 各データフィールドの表示順（上から下）に従ってカスタムフィールドを整理・作成し、データ入力や管理がしやすいようにしてください。
• カスタムフィールドの設定で不明点や困難があれば、リーダーに積極的に相談してください。

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

• プラグイン（例：Contact Form 7 + 確認アドオン）を利用するか、PHPで自作し wp_mail() 関数でメール送信してください。
• 添付リソースの validate required ファイルを参照してください。
• 3ステップは以下の通りです：
  • フォーム（情報入力）
  • 確認（内容確認）
  • サンクス（送信完了）

8. 料金計算機能 (*)

• 料金計算式は note.txt ファイルを参照してください。
• 価格表・詳細情報：商品ラインナップ.xlsx
• 都道府県別送料：送料）エリア別一覧表_車椅子365（202503）.xlsx
• ExcelファイルのデータをJSON形式に変換するか、CMSに入力して管理・取得しやすくしてください。
• fetch、async/await などの手法でAPIと連携し、フロントと管理システム間のデータ同期を確保してください。
• 料金計算機能はJavaScriptで開発し、オブジェクト指向（class）または関数型（function）で実装し、保守性・拡張性を高めてください。

注意事項

• データのJSON変換にはAIツールの活用を推奨します。
• ただし、AIによるコード自動生成に頼りすぎず、自身で開発・問題解決する力を養ってください。

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

• カスタム投稿タイプ（CPT）の作成: どの機能にCPTが必要か判断し、要件に合ったカスタム投稿タイプを設定できる。
• カスタムフィールド（ACF + Flexible Content）の構築: Advanced Custom Fieldsを使い、各コンテンツに柔軟なデータフィールドを作成できる。
• 多段階お問い合わせフォームの実装: スムーズなユーザー体験を意識した多段階確認付きフォームを設計・実装できる。
• 管理しやすいソース構造の構築: テンプレートやtemplate-partsでUIを分割し、再利用・管理しやすい構造を作れる。
• WordPressテーマ構造と動的UIの理解: テーマ構造を理解し、管理画面データをもとに動的なUIを構築できる。
• 機能単位でのプロジェクト設計思考: 各機能を分析・設計し、全体目標に沿った拡張性・保守性の高いシステムを構築できる。