【WordPress制作実践④】固定ページ・ヘッダーの作成からCodexによるテーマ開発へ

前回は環境構築が完了しました

【WordPress制作実践③】WordPressの環境構築

固定ページを5つ作成

1

トップページ

キャッチコピー・事業概要・お知らせ

2

事業・サービス紹介

加工技術・対応業務・設備

3

実績・事例紹介

加工事例3件

4

会社・事業者情報

会社概要・企業理念

5

お問い合わせ

デモ用フォーム

トップページをサイトのホームページとして設定する

左メニューの 「設定」→「表示設定」 を開く

「ホームページの表示」で 「固定ページ」 を選択

「ホームページ」のプルダウンから 「トップページ」 を選択

「投稿ページ」は 未選択 のままにする

画面下部の 「変更を保存」 をクリック

http://localhost:8888/aoba/

ヘッダーとナビゲーションの作成

外観 → エディター をクリック

「パターン」を開く

「テンプレートパーツ」の 「ヘッダー」 を選択

既存のヘッダーをクリックして編集画面を開く

順番を整える

自然な文言にした

メインビジュアルを配置する

固定ページ → トップページ → 編集 を開く

「トップページ」という見出しがあれば削除する（本文の見出しブロックの場合）

「＋」から カバー ブロックを追加

先ほど作成した金属加工のメインビジュアル画像をアップロード

カバーブロック内にキャッチコピーを入力

時間がかかりそうだったので、方向転換する

Codex登場

Codexでテーマを開発

MAMPのWordPressに反映

ブラウザで動作・デザイン確認

Codexで改善を繰り返す

最初のプロンプト

MAMP上のWordPressに、あおば精密工業のオリジナルブロックテーマを新規作成してください。
対象：/Applications/MAMP/htdocs/aoba/wp-content/themes/aoba-theme/
既存のTwenty Twenty-Five、WordPress本体、データベース、ki-hi-ro.comのファイルは変更しないでください。
テーマは theme.json とHTMLテンプレートを中心に構成し、WordPressのサイトエディターで編集可能にしてください。
デザインは白・ネイビー・淡いブルーを基調としたシンプルな製造業向けサイトです。
トップページには、メインビジュアル、キャッチコピー、事業紹介、加工事例3件、お知らせ、問い合わせ導線を設けます。
既存の5つの固定ページを活用し、ナビゲーションを設定してください。画像やテキストは管理画面から編集できるようにしてください。
まず既存環境を読み取り専用で調査し、変更対象と実装計画を提示してください。承認前にファイルを変更しないでください。