Aloha Goodies | WordPress Theme (Twenty Twenty-One Child)

Links

• Demo（WordPress）
• GitHub

概要

「Aloha Goodies」は、Next.js 版で制作した EC サイト構成を WordPress（PHP）で再構築した作品です。
トップページから 4 つのカテゴリにアクセスでき、商品一覧・商品詳細まで一貫した導線を実装しています。

カテゴリ構成

• Accessories
• Interior Goods
• Kitchen & Tableware
• Apparel & Fabric

各カテゴリをクリックすると商品一覧ページへ遷移し、
商品をクリックすると オーバレイ表示で商品詳細ページ が開きます。

使用技術

• WordPress（Twenty Twenty-One 子テーマ）
• PHP
• jQuery
• CSS

制作過程・実装内容

本作品は Twenty Twenty-One の子テーマとして制作を開始し、
まずは WordPress テーマ構造と PHP に慣れることを目的に、最小構成で実装しました。

作成した主なテンプレート

• front-page.php
• page.php
• header-plain.php
• footer-plain.php
• 404.php
• functions.php
• style.css

実装のポイント

• 固定ページとして 空のカテゴリページ を作成し、表示制御を PHP 側で行っています
• 投稿タイプやカスタム投稿は使用せず、商品データは functions.php 内で配列として管理
• 商品詳細は jQuery を使ったオーバレイ表示で実装
• デザインは CSS のみで調整し、ライブラリには極力頼らない構成にしました

制作の目的

• PHP でロジックを書けること
• CSS でレイアウトとデザインを整えられること
• WordPress テーマ構造を理解すること

これらを優先し、シンプルな構成で完成させることを目標に制作しました。

今後の展望

次のステップとして、
ブロックテンプレートや theme.json が利用できる Twenty Twenty-Three をベースに、
よりモダンな WordPress テーマ制作にも挑戦したいと考えています。

スクリーンショット