WordPressへ入れる

今まで作ったページを、WordPressへ入れる
入れると、文章も画像も後から自分で直せるようになる
色と背景も含め、元の画面を再現して入れる
元の画面と同じ並びで入っているかを確かめる

自分のパソコンの中

WordPressの中

パスワードを発行する

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

ユーザー

プロフィール

パスワード
を発行

コピー

つながるか確かめる

先に確かめる。つながらないまま進むと、原因が分からなくなる
右のファイルを作り、Codexへつながるかだけを聞く
つながらない時は、パスワードを作り直すか講師に伝える
つながってから次へ進む

ファイル名：WordPress接続情報.env
置き場所：作業フォルダの中の local-only

WordPressのアドレス：https://例.example/wordpress
自分のユーザー名：yamada
発行したパスワード：xxxx xxxx xxxx xxxx

- 3つとも要る。1つでも欠けるとつながらない
- アドレスの終わりに / を付けない
- 中身をチャットや提出物へ書かない

ヘッダーとフッター

ヘッダーとフッターは、ページ本文とは別の場所に登録する
WordPressではテンプレートという入れ物に入る
全ページで共通なので、1回登録すれば全部のページに出る
1つ直せば、全ページのヘッダーが同時に変わる

ブロックエディタ

WordPressの編集画面。見出し、文章、画像を1つずつの部品として置く
1つの部品が1つのブロック。クリックで選んで、その場で直せる
色、背景、余白、文字の大きさも、対応するブロックの設定から直せる
横に並べる時は、段組みのブロックの中に部品を入れる

サイト専用の実行文

AI活用テクニック: プロンプト作成プロンプト
配布されたWordPress流し込み仕様.mdを作業フォルダへ置く
仕様書を作業フォルダへ置き、右の文をCodexへ貼る
作られた実行ファイルをCodexへ貼る

# WordPress流し込み実行文作成

## 前提

- 作業フォルダ: <自分の作業フォルダのパス>
- 作業フォルダに、自分のWebサイト、`local-only/WordPress接続情報.env`、配布された`WordPress流し込み仕様.md`がある

## 条件

- `WordPress流し込み仕様.md`を最初から最後まで読む
- HTML、CSS、JavaScript、画像、全ページ、リンクを実ファイルから確認する
- 仕様書と実ファイルに合わせ、このサイト専用の5工程を書く
- 全ページと共通部分を標準ブロックへ変換し、色、背景、余白、文字、幅、配置をブロックの設定へ入れる
- REST API登録、編集画面での変更確認、PC・スマホ比較まで含める
- この時点ではWordPressへ登録せず、実行文だけを作る
- `WordPress流し込み実行プロンプト.md`へ保存する

## 目的

自分のサイトの見た目を再現し、WordPressで文章、画像、色、背景、余白、配置を後から直せる形で全ページを入れるための実行文を作ってください

編集画面で選べるか

WordPressの編集画面を開く
見出しを1つ選んで、書き換えられるか試す
画像を1つ選び、色や余白の設定も開けるか確かめる
赤い警告が出ていないか確かめる

元の画面と見比べる

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

提出するもの

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

目次

WordPressへ入れる

パスワードを発行する

つながるか確かめる

ヘッダーとフッター

ブロックエディタ

サイト専用の実行文

編集画面で選べるか

元の画面と見比べる

提出するもの