WordPressをAIでカスタマイズ｜子テーマ・追加CSSで壊さない手順

結論: AIのコードは親テーマに貼らないでください。壊れにくい場所から順に使います。

• 作業の前に → データベースとファイルの両方をバックアップ
• 見た目を直すなら → 追加CSS。PHPを触るときだけ 子テーマ
• AIに頼むなら → テーマ名とセレクタ（直したい部品の名前）を渡し、プレビューで確かめてから公開

「ここの余白、AIに聞けばすぐ直るのでは」。そう思ってChatGPTを開いた人がつまずくのは、たいてい頼み方ではありません。

返ってきたコードをどこに貼るかです。以下、貼る場所を壊れにくい順に並べて、その順に作業する手順をまとめます。

この記事の目次

1. AIが書いたCSS、どこに貼れば壊れない？
2. 作業前のバックアップは何を取ればいい？
3. 追加CSSが見つからないのはなぜ？
4. 子テーマは作るべき？SWELL・Cocoonの場合は
5. ChatGPTやClaudeには何を渡せばいい？
6. AIのCSSが効かない・真っ白になったときは？
7. よくある質問
8. もっと詳しく知りたい人へ
9. この記事のまとめ

AIが書いたCSS、どこに貼れば壊れない？

見た目なら追加CSS、PHPなら子テーマ。親テーマのファイルには貼りません。

← 表は横にスクロールできます →

親テーマを直接編集すると、テーマの更新で上書きされます。WordPress公式がそう書いています。

子テーマは、親テーマを書き換えずに変更を足すための仕組みです。公式ドキュメントは、カスタムCSSを書く前にスタイルの設定項目で済ませることも勧めています。

「ご自分で子テーマを導入して、子テーマのstyle.cssを利用するか、プラグインを利用するか等しましょう。」 — Yahoo!知恵袋の回答（2023年9月）

作業前のバックアップは何を取ればいい？

データベースとファイルの両方。CSSしか触らない日も、今のCSSをテキストで控えます。

• データベース: 投稿、設定、追加CSSの中身
• ファイル: テーマ、プラグイン、アップロードした画像、wp-config.php など
• 順番: 公式の目安では、取るときはデータベースが先、戻すときはファイルが先。アップデートの前には毎回取るよう書かれています

レンタルサーバーの自動バックアップも使えます。ただし、戻すときの決まりは会社ごとに違います。

← 表は横にスクロールできます →

（2026-10-14時点の公式ページによる）

AIのコードを貼る直前の状態に確実に戻したいなら、手動で控えるほうが早く済みます。

あなたがプラグインで済ませたいなら、UpdraftPlusが候補です。無料版でもデータベース・プラグイン・テーマを手動でバックアップできます。

追加CSSの控えは、画面上のコピーでつまずきやすいところです。

「WordPress外観→カスタマイズ→追加CSS画面でCSSを全て選択してコピーしても､画面分しかコピーできません｡」 — Yahoo!知恵袋の質問（2025年2月）

カスタマイザーの追加CSSには、変更履歴（リビジョン）が残る仕組みがあります。それでも、作業前にメモ帳へ控えておくほうが戻すのは早いです。

追加CSSが見つからないのはなぜ？

テーマの種類で場所が違うからです。ブロックテーマにはカスタマイザーが出てきません。

← 表は横にスクロールできます →

「ワードプレスについてです。追加でCSSを入れたいのですが、外観→『カスタマイズ』という項目がありません。」 — Yahoo!知恵袋の質問（2023年9月）

ブロックテーマには「ブロックごとの追加CSS」もあります。ここにはセレクタも波括弧も書かず、font-style: italic; のように プロパティ: 値 の形だけを書くのが公式の決まりです。

AIはふつうのCSSの形で返してきます。そのまま貼ると効かないので、頼むときに一言添えておけば防げます。

子テーマは作るべき？SWELL・Cocoonの場合は

CSSだけなら追加CSSで足ります。PHPやテンプレートを触るなら子テーマが要ります。

← 表は横にスクロールできます →

「そもそも、これまでの君のサイトエディターでの編集は元のテーマを書き換えてない。つまり、子テーマを使う必要がない。」 — Yahoo!知恵袋の回答（2025年9月）

クラシックテーマとブロックテーマでは、子テーマが要る場面が違います。ブロックテーマは、サイトエディターで変えた内容がデータベースに入ります。親テーマを書き換えない作りなんです。

公式ドキュメントで目を引いたのは、子テーマの functions.php の扱いでした。子テーマのものと親テーマのものは、両方読み込まれます。AIに「親の functions.php を丸ごとコピーして」と頼むと、関数名が重なって致命的なエラーになります。

ChatGPTやClaudeには何を渡せばいい？

テーマ名、貼る場所、セレクタ、スクショの4つ。これで1回目から使えるCSSが返ってきやすくなります。

セレクタの調べ方は2手です。

1. ブラウザで直したい部分を右クリックし、「検証」を選ぶ
2. 開いた開発者ツール（ページの部品を確かめる画面）で、クラス名をコピーする

あとは次の文をコピーして、自分のサイトに合わせて書き換えてください。

WordPressの見た目を直したいです。
・テーマ：Cocoon（クラシックテーマ）
・貼る場所：外観→カスタマイズ→追加CSS
・直したい所：スマホで見たとき、h2見出しの下の余白が広すぎる
・セレクタ：.entry-content h2（開発者ツールでコピー）
・条件：テーマのCSSは書き換えない。!importantは最小限。スマホ幅だけに効かせる
・スクショを添付します
貼るCSSと、何を変えたかの説明を短く返してください。

• ブロックごとの追加CSSに貼るなら、「セレクタと波括弧なしで」と書き足す
• パスワードや wp-config.php の中身は、AIに貼らない

「どのコードも人間が修正を必要としますのでやはりCSSやPHPのスキルは必要となりそうです。」 — 制作会社のブログ（2026年1月）

AIのCSSは、カスタマイザーのプレビューで確かめてから公開すると安心です。カスタマイザーの左側パネルの下にあるボタンで、スマホやタブレットの表示も見られます。

紛らわしいのが、WordPress.comの「WordPress Agent」というAI機能です。2026-10-14時点のサポートページでは、対象はPersonal・Premium・Business・Commerceの各プランで、ブロックテーマ向けとされています。使える環境は、サポートページで最新をご確認ください。

AIのCSSが効かない・真っ白になったときは？

効かないならキャッシュ→優先順位→貼る場所の順に見ます。真っ白なら、管理者宛てのメールを確認します。

← 表は横にスクロールできます →

真っ白になったときに頼れるのが、WordPress 5.2で入ったリカバリーモードです。致命的なエラーが起きると、管理者のメールアドレスにリンクが届きます。

そのリンクから入れば、原因のプラグインやテーマが止まった状態でログインできます。

よくある質問

Q. 追加CSSと子テーマのstyle.css、両方に書いてもいい？ 書けます。ただ、同じ部分を両方で指定すると、どちらが効いているのか分からなくなります。見た目の修正は追加CSSにまとめるほうが管理しやすいです。

Q. テーマを乗り換えたら追加CSSはどうなる？ 画面から消えます。テーマの更新では消えませんが、切り替えると消えます。乗り換える前にテキストで控えておいてください。

Q. AIが書いたPHPを functions.php に貼ってもいい？ 親テーマのものには貼りません。貼るなら子テーマの functions.php に、バックアップを取ってからです。

管理画面のテーマファイルエディターで直した内容は、保存した瞬間にサイトへ反映されます。手元で試してからアップロードするほうが安全です。

もっと詳しく知りたい人へ

• 子テーマに最低限要るファイルは style.css の1つだけ。ヘッダーの Template: には、親テーマのフォルダ名を一字違わず書きます
• 孫テーマは作れません。テーマは親と子の2段階までです
• エラーの原因を調べる WP_DEBUG は、本番サイトで使い続けることを公式は勧めていません。確認が終わったら元に戻します
• wp-config.php に DISALLOW_FILE_EDIT を書くと、管理画面のファイルエディターを使えなくできます。うっかり親テーマを編集するのを防げます

この記事のまとめ

• 作業前に、データベースとファイルの両方をバックアップする。今のCSSもテキストで控える
• 見た目は追加CSS、PHPは子テーマ。親テーマのファイルには貼らない
• AIにはテーマ名・貼る場所・セレクタ・スクショを渡す。ブロックごとのCSSは「セレクタなし」と伝える
• プレビューとスマホ表示で確かめてから公開する
• 次にやること：今のテーマがクラシックかブロックかを確かめて、追加CSSの画面を開いておく

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。