WordPressへ入れる

今まで作ったページを、WordPressへ入れる
入れると、文章も画像も後から自分で直せるようになる
今日は入れるところまで。色と背景は次回決める
元の画面と同じ並びで入っているかを確かめる

自分のパソコンの中

WordPressの中

パスワードを発行する

ログイン用とは別の、AIが使うパスワードを作る
WordPressの管理画面で「ユーザー」から「プロフィール」を開く
「アプリケーションパスワード」に Codex と名前を入れて発行する
出てきた文字は画面を閉じると二度と見られない。閉じる前にコピーする

ユーザー

プロフィール

パスワード
を発行

コピー

つながるか確かめる

先に確かめる。つながらないまま進むと、原因が分からなくなる
Codexへ接続情報を渡し、つながるかだけを聞く
つながらない時は、パスワードを作り直すか講師に伝える
つながってから次へ進む

横幅を合わせる

WordPressには、本文がどこまで横に広がるかの設定がある
元のサイトと値が違うと、並びは合っていても横幅だけ狭くなる
自分のサイトのCSSから幅を測って、その値に合わせる
1回の設定で全ページに効く

# WordPress流し込みプロンプト作成プロンプト

今回の対象: 共通部分と横幅

## 対象

作業フォルダ: <自分の作業フォルダ>
このフォルダの中だけで作業する

## 調べること

- CSSの max-width を全部抜き出す
- var(--名前) は定義まで辿る
- 段組みが並ぶ主要セクションの値を1つ選び、理由を1行書く
- ヘッダーとフッターの文言とリンクを出てくる順に全部
- 何カラムに分かれているか

## 作るプロンプト

01_横幅を合わせる.md
02_ヘッダーとフッターを入れる.md

保存の前に文言とリンクを数え、欠けていれば作り直す

## 出力

作業フォルダの中の WordPress流し込みプロンプト集 へ保存。実行はしない

ヘッダーとフッター

ヘッダーとフッターは、ページ本文とは別の場所に入る
全ページに共通で効くので、1回入れれば全部に出る
メニューの文言と行き先を、1つも欠かさず入れる
入れた後、上下が付いた状態で画面を見る

ページを1枚入れる

ページの数だけ繰り返す。1回に1枚
Codexが、セクションの並びとカラム数を先に表にする
画像は先にWordPressへ登録してから使う

# WordPress流し込みプロンプト作成プロンプト

今回の対象: ページ1枚

## 対象

作業フォルダ: 直前に指定したフォルダ
まだプロンプトのないHTMLを1枚選ぶ

## 調べること

PC幅とスマホ幅の両方で表示し、表にする

- セクションの順と、何カラムか
- 各カラムの中身
- 画像のファイル名と形式
- リンクの文言と行き先

## 作るプロンプト

- 表を作業の前に出させる
- 画像は先にWordPressへ登録する
- SVGはPNGへ変換してから登録
- 表のとおりにブロックを作る
- 保存前に数え直して突き合わせ、合わなければ保存しない
- 新しい下書きとして作る

## 出力

作業フォルダの中の WordPress流し込みプロンプト集 へ保存。実行はしない

編集画面で選べるか

WordPressの編集画面を開く
見出しを1つ選んで、書き換えられるか試す
画像を1つ選べるか見る
赤い警告が出ていないか確かめる

元の画面と見比べる

元のページとWordPressのページを並べて開く
セクションの順番が同じか
横に並んでいたところが、横に並んでいるか
スマホの幅でも同じように見比べる

提出するもの

下書きページのURL
10日目ランブック

目次

WordPressへ入れる

パスワードを発行する

つながるか確かめる

横幅を合わせる

ヘッダーとフッター

ページを1枚入れる

編集画面で選べるか

元の画面と見比べる

提出するもの