- Aloha Goodies の WordPress 版として、まずは Twenty Twenty-One の子テーマを用いて、PHP や WordPress テーマ構造の理解を目的に制作を行いました。
- その学習を踏まえ、今回は ブロックエディタに慣れることを目的として、Twenty Twenty-Three テーマを使用した制作 に取り組みました。
- 今回は ブロックエディタに慣れること を主な目的とし、あえて 子テーマは作成せず、Twenty Twenty-Three をそのまま使用 しています。
以下に、今回修正・設定を行った主なポイントをまとめます。
テンプレート / 固定ページ
- 固定ページのテンプレートを編集
- タイトル、アイキャッチ画像、コメントをテンプレートから削除
パターン / ヘッダー
- デフォルトのナビゲーションを削除
- Hero 画像を追加
- Hero 画像をグループ化し、横幅を 1200px に固定
パターン / フッター
- 3 カラム構成に変更
- 以下の情報を配置
- Location
- Hours
- Contact
スタイル設定
- カラーパレットをカスタマイズ
- テキスト
- 背景
- ボタン
- フッター
- 商品カードに CSS を追加
- hover 時やクリック時に視覚的な変化が出るよう調整
固定ページの作成
以下の固定ページを作成しました。
- home
- accessories
- interior-goods
- kitchen-tableware
- apparel-fabric
- 「設定 ＞ 表示設定」から home をトップページとして指定
商品カードのレイアウト
- 商品カードは CSS Grid を使用して作成
- カラム数は固定せず、画面幅に応じて自動で変化する構成
- PC / タブレット / スマートフォンそれぞれで自然にレイアウトが切り替わるようにしています
Demo
このブログの サブディレクトリとして WordPress をインストール し、デモ環境を構築しました。
今後の取り組み
- 今回はノーコード寄りの構成で制作しましたが、今後は Twenty Twenty-Three の子テーマ化や、PHP を用いたカスタマイズにも取り組んでいく予定です。