AIでWordPressをカスタマイズする方法｜ChatGPT・ClaudeでCSS・PHP・JSコードを生成する実践ガイド

WordPressサイトをもっと自分好みに変えたいのに、CSSやPHPがわからなくて諦めた——そんな経験を持つ方は少なくありません。ボタンの色を変えたい、投稿一覧のデザインを整えたい、スクロールで動くメニューを追加したい。どれも「プログラミングができれば5分の作業」なのに、知識がないと外注費を払うか諦めるしかありませんでした。

ChatGPTやClaudeを使えば、やりたいことを日本語で伝えるだけでCSS・PHP・JavaScriptコードが自動で生成されます。この記事では、WordPressのカスタマイズをAIで効率化する具体的な手順と、コピペで使えるプロンプト例を解説します。プログラミング未経験でも今日から試せる内容です。

AIでWordPressカスタマイズが「コピペで完結」する理由

従来のWordPressカスタマイズには、次のような壁がありました。

・CSSの書き方がわからない: ルールを覚えるまでに時間がかかる
・PHPのエラーで画面が真っ白になるリスク: 修正に手間がかかる
・外注すると数万円のコスト: 小さな修正でも費用が発生する

AIを活用するとこの壁がなくなります。「見出しに青い下線を引きたい」と日本語で伝えれば、すぐに動くCSSが出力されます。出力されたコードをコピーしてWordPressの「追加CSS」に貼るだけで完了です。

重要なのは「コードの意味を理解しなくても使える」点です。もちろん理解できるに越したことはありませんが、まずは「日本語 → AIが生成 → コピペ → 確認」のサイクルで動かすことができます。

AIを使ったWordPressカスタマイズの手順

1. やりたいことをAIへ正確に伝えるコツ

AIへの指示（プロンプト）の質がコードの質を決めます。曖昧な指示だと曖昧なコードが返ってきます。以下の情報を盛り込むと精度が上がります。

・使用テーマ名: 「SWELLテーマを使っています」
・具体的な変更箇所: 「h2見出しに」「投稿一覧の各記事カードに」
・期待する動作: 「青いアンダーラインを追加」「ホバー時に薄いグレー背景にする」
・コードの用途: 「追加CSSに貼る」「functions.phpに追加する」

良いプロンプトの例を見てみましょう。

WordPressサイト（SWELLテーマ）を使っています。
h2見出しの下に青色（#1a56db）のアンダーラインを追加するCSSを書いてください。
外観 > 追加CSSに貼り付けて使います。

このように「テーマ名」「対象要素」「変更内容」「色コード」「適用場所」を具体的に伝えると、そのまま使えるコードが返ってきます。

2. CSSで見た目をカスタマイズする

CSSはWordPressの「外観 > 追加CSS」から安全に適用できます。テーマファイルを直接編集しないため、テーマ更新後も消えない安全な方法です。

プロンプト例（ボタンカラーの変更）:

WordPressサイトのCTAボタン（クラス名 .wp-block-button__link）の
背景色を濃い紫（#5b21b6）、文字色を白に変更するCSSを書いてください。
ホバー時は少し明るい紫（#7c3aed）にしてください。
外観 > 追加CSSに貼り付けます。

AIが生成するコード（出力例）:

.wp-block-button__link {
  background-color: #5b21b6 !important;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 12px 24px;
}
.wp-block-button__link:hover {
  background-color: #7c3aed !important;
  transition: background-color 0.2s ease;
}

このコードをそのまま「外観 > 追加CSS」に貼り付ければ完了です。変更が反映されない場合は、クラス名が正しいかをブラウザの「検証ツール（デベロッパーツール）」で確認するようAIに相談しましょう。「このHTML要素を見てクラス名を確認してください」と貼り付けるだけで原因を特定してくれます。

3. PHPで機能をカスタマイズする

PHPは投稿数の変更やバッジ表示など「動作の変更」に使います。必ず子テーマのfunctions.phpに追加してください。親テーマのfunctions.phpは更新で上書きされます。子テーマが設定されていない場合は、あわせてAIに「子テーマの作り方も教えてください」と聞くとステップを案内してくれます。

プロンプト例（最新投稿件数の変更）:

WordPressのトップページの投稿一覧表示件数を
デフォルトの10件から6件に変更するコードを書いてください。
子テーマのfunctions.phpに追加します。

AIが生成するコード（出力例）:

function custom_posts_per_page( $query ) {
  if ( $query->is_home() && $query->is_main_query() ) {
    $query->set( 'posts_per_page', 6 );
  }
}
add_action( 'pre_get_posts', 'custom_posts_per_page' );

注意点: PHPのコードを適用する前に必ずバックアップを取ってください。エラーが発生した場合は、FTPやサーバーのファイルマネージャーでfunctions.phpを直前の状態に戻せます。万が一エラーが出た場合も、エラー内容をコピーしてAIに「このエラーが出ました。直してください」と伝えれば修正コードを出してくれます。

4. JavaScriptでインタラクションを追加する

スクロールに応じたアニメーションや、クリックで開閉するアコーディオンメニューなど、JavaScriptを使ったインタラクションもAIで生成できます。

プロンプト例（スクロールでヘッダーの背景色を変える）:

WordPressサイトで、ページをスクロールしたときにヘッダー（id="masthead"）の
背景色が透明から白（#ffffff）に変わるJavaScriptを書いてください。
スクロール量が80px以上になったら白くなるようにしてください。
プラグイン「Insert Headers and Footers」でフッターに追加します。

生成されたJavaScriptは、プラグイン「Insert Headers and Footers」を使うと全ページへ一括適用できます。コードを<script>～</script>タグで囲んでフッターエリアに貼るだけです。テーマファイルを直接編集しないため安全です。

実務での活用例（Before/After）

実際にAIを使ったWordPressカスタマイズのBefore/Afterを紹介します。

ポイントは「完璧なコードを一発で求めない」ことです。最初は思い通りにいかなくても、AIとの対話で修正を繰り返せば理想のデザインに近づけられます。「思ったより左に寄ってしまいました。右端に揃えるように直してください」と追加の指示を出せばすぐに修正案を返してくれます。

また、既存のコードが何をしているかわからないときは、コードを貼り付けて「このコードの意味を説明してください」と聞く使い方も有効です。詳しい手順はAIで既存コードを解説・ドキュメント化する方法で解説しています。

生成されたコードを整理・最適化したい場合は、AIでコードをリファクタリングする方法も参考にしてください。

うまくいかない時の対処法

【対処法1】エラーメッセージをそのままAIに貼る

PHPのエラーが出たら、エラーメッセージをコピーしてAIへ渡しましょう。「このエラーが出ました。修正してください」とコードとエラー内容を一緒に貼れば、原因と修正案を即座に返してくれます。エラーログはWordPressの管理画面 > ツール > サイトヘルスでも確認できます。

【対処法2】クラス名・IDが合っているか確認する

CSSが反映されない最大の原因は「クラス名やID名の不一致」です。ブラウザで右クリック → 「検証」を開き、変更したい要素の実際のクラス名を確認してからAIに伝えましょう。「このHTML要素を変更するCSSを書いてください」とHTMLをそのまま貼るのが確実です。

【対処法3】テーマ固有の制約を伝える

SWELLやCocoon、Emanonなどのテーマはそれぞれ独自のクラス名を持っています。「SWELLのカテゴリカード部分のスタイルを変更したい」のように、テーマ名を含めて伝えると精度が上がります。テーマ名を伝えたうえでもうまくいかない場合は、該当箇所のHTMLをコピーしてAIに渡しましょう。

【対処法4】変更範囲を小さくして試す

一度に多くの変更を依頼すると、どこが問題か特定しにくくなります。「まず色だけ変える」「次に余白を調整する」と一つずつ確認しながら進めるのがコツです。うまく動いたら次のカスタマイズへ進む、というサイクルを繰り返しましょう。

セキュリティ面の注意点として、AIが生成したコードにも脆弱性が含まれる可能性があります。特にPHPコードは入力値を受け取る処理（フォーム・URLパラメータ）が含まれる場合、AIに「このコードのセキュリティリスクを確認してください」と追加で聞く習慣をつけましょう。AIによるセキュリティ観点でのコードチェックについては、姉妹サイトセキュリティマスターズ.TOKYOでも解説しています。

本記事のまとめ

AIを使ったWordPressカスタマイズのポイントをまとめます。

・CSS（外観 > 追加CSS）: 見た目の変更に最適。テーマ更新でも消えない安全な方法
・PHP（子テーマのfunctions.php）: 機能の追加・変更に使う。必ず子テーマへ追加する
・JavaScript（プラグイン経由）: インタラクション・アニメーションの追加に使う
・プロンプトのコツ: テーマ名・対象要素・変更内容・適用場所を具体的に伝える
・うまくいかない時: エラー内容・実際のHTMLをそのままAIへ渡す

「プログラミングができないからWordPressのカスタマイズは無理」という時代は終わりました。AIを使えば、やりたいことを日本語で伝えるだけでコードが完成します。まず「ボタンの色を変える」「フォントサイズを調整する」といった小さなカスタマイズから試してみてください。成功体験を積み重ねることで、できることがどんどん広がっていきます。