サイト概要
Figmaデザインカンプをもとに、HTML/CSS/JavaScriptで静的コーディングを行った後、WordPressオリジナルテーマ化したベーカリーサイトです。
デザインの再現だけでなく、WordPressのテンプレート階層に沿ってPHP化を行い、トップページ、商品一覧ページ、商品詳細ページ、Aboutページ、Contactページ、404ページを実装しました。
商品はカスタム投稿タイプ（Product）で管理し、Advanced Custom Fields（ACF）を利用して価格やトップページ掲載フラグなどのカスタムフィールドを実装しています。また、カスタムタクソノミーによるカテゴリー分類や、カテゴリー切り替え機能、商品カードの共通化など、保守性を意識した設計を採用しました。
開発環境にはDockerとMySQLを利用し、Git・GitHubでソースコードを管理しながら開発を進め、完成後はConoHa WINGへデプロイして公開しています。
使用技術
- HTML
- CSS
- JavaScript
- PHP
- WordPress（オリジナルテーマ開発）
- Advanced Custom Fields（ACF）
- Contact Form 7
- Docker
- Docker Compose
- MySQL
- Git
- GitHub
- ConoHa WING
こだわった点
Figmaのデザインカンプをもとに、レスポンシブ対応を含めたコーディングを行い、デザインをできる限り忠実に再現しました。CSS Gridを利用した商品一覧レイアウトや、JavaScriptによるハンバーガーメニューを実装し、PC・スマートフォンのどちらでも快適に閲覧できるよう工夫しています。
静的サイトで終わらせず、WordPressオリジナルテーマとして再構築しました。テンプレートを header.php、footer.php、front-page.php、archive-product.php、single-product.php、page-about.php、page-contact.php などに分割し、WordPressのテンプレート階層を意識した構成としています。
商品管理にはカスタム投稿タイプ（Product）を採用し、商品価格やトップページ表示、注目商品などはACFのカスタムフィールドで管理しています。また、カスタムタクソノミーを利用したカテゴリー分類と絞り込み機能を実装し、管理画面から柔軟に商品を追加・更新できるようにしました。
商品カードはテンプレートパーツとして共通化し、トップページ・商品一覧・おすすめ商品など複数箇所で再利用できる構成としています。CSSもボタンや商品グリッドなどを共通化し、保守性と再利用性を意識して設計しました。
セキュリティ面では、esc_html()、esc_url()、esc_attr()、sanitize_text_field() などのWordPress関数を利用し、出力時のエスケープや入力値のサニタイズを実装しています。
開発環境にはDocker Composeを利用してWordPressとMySQLを構築し、ローカル環境で開発・検証を行いました。Git・GitHubによるバージョン管理を行い、完成後はConoHa WINGへデプロイしてデモサイトを公開しています。