「AIにコードを生成してもらったけど、どこに貼ればいいかわからない」「そもそもWordPressのテーマってどうやって作るの？」——そんな疑問を持つ方に向けて、この記事ではAIを活用したWordPressテーマカスタマイズの実践的な進め方を解説します。
このサイト（uni-log）自体もAIを活用してゼロからオリジナルテーマを開発しました。その実例も交えながら、既存テーマのカスタマイズから独自テーマの開発まで、段階別に紹介します。
まず整理：2つのアプローチの違い
WordPressのテーマ開発には、大きく分けて2つのアプローチがあります。
| アプローチ | 向いている人 | 難易度 |
|---|---|---|
| ① 既存テーマのカスタマイズ | Cocoon・SWELLなどの既存テーマを使っている方 | ★★☆ |
| ② ゼロベースからの独自テーマ開発 | デザイン・機能を完全にコントロールしたい方 | ★★★ |
どちらのアプローチでも、AIに適切な情報を渡すことで作業時間を大幅に短縮できます。
① 既存テーマのカスタマイズ：子テーマ＋AIの組み合わせ
子テーマとは？
既存テーマを直接編集すると、テーマ更新のたびに変更が消えてしまいます。そこで使うのが子テーマです。親テーマのデザインを引き継ぎながら、カスタマイズ部分だけを別管理できる仕組みです。
親テーマを「継承」しながらカスタマイズを加えるWordPressの手法。
style.cssとfunctions.phpの2ファイルを用意するだけで作成できます。テーマを更新しても上書きされないため、安全にカスタマイズできます。
AIへの依頼の基本：情報を揃えて渡す
AIにカスタマイズを依頼するとき、情報が少ないと的外れなコードが返ってきます。次の情報を最初からプロンプトに含めましょう。
- 使用テーマ名とバージョン（例：Cocoon 2.7.x）
- WordPressのバージョン（例：6.7）
- 変更したい箇所と目的
- 子テーマへの追記であることを明示
プロンプト例①：ヘッダーのロゴサイズを変更する
WordPressテーマ「Cocoon」の子テーマ（style.css）に追加するCSSを書いてください。
・ヘッダーのロゴ画像の最大幅を200pxに変更する
・スマホ表示では最大幅を120pxに変更する
・既存スタイルを上書きするため !important を使用してください
・使用Cocoonバージョン：2.7系 / WordPress 6.7
プロンプト例②：カスタム投稿タイプを追加する
WordPressのfunctions.phpに追加するPHPコードを書いてください。
・カスタム投稿タイプ「work」（表示名：制作実績）を登録する
・管理画面アイコン：dashicons-portfolio
・タクソノミー「work_category」も合わせて登録する
・子テーマのfunctions.phpに追記する前提で書いてください
・使用WordPressバージョン：6.7
プロンプト例③：特定ページだけCSSを当てる
WordPressの子テーマfunctions.phpに追加するコードを書いてください。
・固定ページ「about」（スラッグ：about）のときだけ、追加のCSSファイルを読み込む
・CSSファイルのパスは子テーマの /assets/css/about.css
・wp_enqueue_style を使用すること
WordPressが推奨するCSSの読み込み方法。直接
<link>タグを書くより安全で、プラグインとの競合も防ぎやすくなります。
カスタマイズ依頼パターン一覧
| やりたいこと | 対象ファイル | プロンプトのポイント |
|---|---|---|
| デザインの細部を変える | 子テーマ style.css | テーマ名・バージョン・変更箇所のクラス名を伝える |
| 機能を追加する | 子テーマ functions.php | 「子テーマに追加」「WPバージョン」を必ず明記 |
| 投稿一覧の表示を変える | テンプレートファイル | 対象のテンプレート名（archive.phpなど）を指定 |
| ショートコードを作る | functions.php | 出力したいHTMLの形を一緒に渡す |
② ゼロベースからの独自テーマ開発
「既存テーマでは限界がある」「表示速度を最大限に最適化したい」「機能を完全にコントロールしたい」——そう考えるなら、独自テーマの開発が選択肢になります。
実際にこのサイト（uni-log）のテーマ「Web Howto LAB」も、AIと対話しながらゼロから開発しました。
最低限必要なファイル構成
WordPressのテーマとして認識されるためには、最低2ファイルが必要です。
mytheme/
├── style.css ← テーマ情報を記述（必須）
├── functions.php ← 機能の追加・設定
├── index.php ← 全テンプレートの基本（必須）
├── header.php ← ヘッダー部分
├── footer.php ← フッター部分
├── single.php ← 個別投稿ページ
├── page.php ← 固定ページ
├── archive.php ← アーカイブ・カテゴリー一覧
└── front-page.php ← トップページ（任意）WordPressがどのPHPファイルを使って表示するかを決めるルールのこと。たとえばカテゴリーページなら
category-{slug}.php→category.php→archive.phpの順に探します。AIにファイル名を伝えると、それに合った構造のコードを生成してくれます。
uni-logテーマ開発の実例：進め方と役割分担
uni-logのテーマ開発では、おおよそ次の流れでAIと作業を進めました。
- 設計の言語化：「どんなサイトにしたいか」をテキストで整理してAIに渡す
- ベースコード生成：AIにファイルごとのコードを生成してもらう
- 動作確認とエラー修正：実際に動かして問題をAIに相談しながら修正
- デザイン調整：CSSをAIで生成→ブラウザで確認→修正を繰り返す
- 機能追加：必要な機能をその都度AIに依頼して追加
最初に渡す情報：プロジェクト設計書プロンプト
ゼロから開発するときは、最初に「設計書」をAIに渡しておくと、その後の依頼がスムーズになります。
WordPressのオリジナルテーマを作成しています。以下の設計情報を踏まえて、今後のコード生成に役立てください。
【基本情報】
・テーマ名：mytheme
・WordPressバージョン：6.7
・テキストドメイン：mytheme
・関数プレフィックス：mytheme_
【デザイントークン】
・メインカラー：#3e8685（ティール系）
・背景色：#fafafa
・フォント：-apple-system, “Noto Sans JP”, sans-serif
・コンテナ幅：1200px
・角丸：4px
【サイト概要】
・Web制作学習サイト
・ターゲット：初心者〜中級者
・主なコンテンツ：ブログ記事、カテゴリーアーカイブ
最初にstyle.cssとfunctions.phpの雛形を作成してください。
プロンプト例：header.phpの生成
WordPressテーマのheader.phpを作成してください。
【要件】
・テーマ名：mytheme / テキストドメイン：mytheme
・ロゴ画像をカスタマイザーで設定できるようにする（custom_logo使用）
・グローバルナビゲーションを表示する（wp_nav_menuを使用、メニュースロット名：primary）
・ハンバーガーメニューボタンをスマホ表示時に表示する（クラス名：js-menu-toggle）
・wp_head()を必ず含めること
・セマンティックなHTML5構造で書くこと
WordPressが必要なスクリプトやメタタグを出力するための関数。
</head>タグの直前に必ず記述する必要があります。これがないとプラグインが正常に動作しないことがあります。
プロンプト例：functions.phpにスタイルとスクリプトを登録する
WordPressテーマのfunctions.phpに追加するコードを書いてください。
【要件】
・テーマのstyle.cssをwp_enqueue_styleで登録する
・assets/js/script.jsをwp_enqueue_scriptで登録する（jQueryに依存、フッターで読み込み）
・アドミン画面（is_admin()がtrue）では読み込まない
・バージョン管理はfilemtimeで行う（キャッシュ対策）
・関数名のプレフィックスはmytheme_を使用
プロンプト例：カスタムメタボックスを追加する
WordPressテーマのfunctions.phpにカスタムメタボックスを追加するコードを書いてください。
【要件】
・メタボックス名：「ページ設定」
・投稿タイプ：post（通常の投稿）
・フィールド①：カスタムCSS入力欄（テキストエリア、フィールドキー：_mytheme_custom_css）
・フィールド②：メタディスクリプション入力欄（テキストエリア、フィールドキー：_mytheme_meta_desc）
・nonceによるセキュリティ検証を含めること
・関数プレフィックス：mytheme_
フォームの不正送信を防ぐためにWordPressが発行する使い捨てのトークン（番号）のこと。カスタムメタボックスや設定保存の処理には必ず含める必要があります。
AIとのやりとりで押さえておくコツ
コツ①：エラーはそのままコピーして渡す
コードが動かないとき、エラーメッセージを自分で解読しようとすると時間がかかります。ブラウザのデベロッパーツール（F12）のコンソール画面、またはWordPressのデバッグログに表示されるエラー文をそのままAIに渡してください。
以下のエラーが発生しました。原因と修正方法を教えてください。
（エラーメッセージをここにペースト）
該当のコードはこちらです：
（コードをここにペースト）
コツ②：「動いたコード」を起点に追加依頼する
ゼロから依頼し直すより、すでに動いているコードを貼り付けて「このコードに〇〇を追加してください」と依頼する方が、AIは既存の構造を崩さずに改修してくれます。
以下のfunctions.phpのコードに、カスタムフィールドの値を使ったWP_Queryによる記事一覧取得を追加してください。既存の構造は変えないでください。
（現在のコードをここにペースト）
コツ③：「なぜこのコードなのか」を聞く
コードをそのまま使うだけでなく、「このフックはなぜ必要ですか？」「この関数の役割を説明してください」と聞くことで、理解が深まります。次回の依頼精度も上がります。
コツ④：WordPressバージョンを必ず伝える
WordPressは頻繁に更新されており、バージョンによって推奨される書き方が変わります。「WordPress 6.7で動作するコードを書いてください」と明記するだけで、非推奨関数（deprecated）の使用を避けられます。
将来的に削除される予定のため使用を避けるべき関数や機能のこと。WordPressのアップデートで突然動かなくなることがあります。
コツ⑤：クラス名の競合に注意する
AIが生成したクラス名が、WordPressが自動で付与するbodyクラスやテーマ既存のクラスと衝突することがあります。たとえば.nav.menu.tagなどは衝突しやすい名前です。AIに依頼するときは「クラス名にmytheme-のプレフィックスをつけてください」と指定すると安全です。
よくある失敗パターンと対処法
| 失敗パターン | 原因 | 対処法 |
|---|---|---|
| 貼ったら画面が真っ白になった | PHPの文法エラー | デバッグモードをONにしてエラーを確認→AIに渡す |
| CSSが反映されない | キャッシュ or セレクタの優先度負け | ブラウザのキャッシュクリア / !importantを追加依頼 |
| プラグインが壊れた | functions.phpで既存フックを上書き | add_actionではなくremove_action→add_actionの順で依頼 |
| 管理画面が崩れた | is_admin()チェックがない | スタイル/スクリプト登録時にis_admin()で除外するよう依頼 |
| カテゴリーページが404になった | リライトルールの競合 | 設定→パーマリンク設定を「保存」してフラッシュする |
WordPressのwp-config.phpに
define('WP_DEBUG', true);を追加すると、PHPエラーが画面に表示されます。本番環境では必ずfalseに戻してください。
uni-log開発の実例：こんな形でAIを活用した
このサイト（uni-log）のテーマ開発では、おもに以下のような使い方をしました。
設計情報を「プロジェクト知識」として共有
テーマ名・カラー・フォント・コンテナ幅・関数プレフィックスなどの設計情報を最初にAIに渡しておき、その後の依頼では詳細を省略して「このプロジェクトの設計に合わせて〇〇を作ってください」と依頼できる状態にしました。
テンプレートファイルをひとつずつ育てていく
最初はシンプルなindex.phpだけを作り、動作を確認してからsingle.php→archive.php→front-page.phpと順番にファイルを追加していきました。一度に全部作ろうとせず、小さく動かして確認するサイクルを繰り返すことで、エラーの発生場所が特定しやすくなります。
バグ修正はエラーメッセージをそのまま貼る
たとえばカテゴリーURLのリライトルールが原因でタグアーカイブが404になるバグが発生しましたが、エラー状況と該当コードをAIに渡したところ、rewrite_rules_arrayフィルターを使う方法を提案してもらい解決しました。
機能はZIPファイルで管理してリセットポイントを作る
大きな変更を加えるときは、直前の動作している状態のテーマをZIPで保存しておき、問題が起きたら戻せる状態を保ちながら開発を進めました。Gitを使えればより理想的ですが、ZIP管理でも十分に実用的です。
ファイルの変更履歴を管理するバージョン管理ツール。「いつ・何を変更したか」を記録でき、過去の状態に戻すことができます。
まとめ
AIを使ったWordPressテーマ開発のポイントを整理します。
- 既存テーマのカスタマイズなら、子テーマ＋AIで安全に変更できる
- 独自テーマ開発なら、設計情報をAIに最初に渡しておくと以降の依頼が楽になる
- プロンプトには「テーマ名・WPバージョン・子テーマへの追加」を必ず含める
- エラーが出たらメッセージをそのままAIに渡す
- 小さく動かして確認するサイクルを繰り返す
WordPressのPHPやフックの仕組みを完全に理解していなくても、AIに正確な情報を渡すことで、実務レベルのカスタマイズが実現できます。まずは子テーマへの小さな変更から試してみてください。
テーマ選びの基準についてはWordPressテーマ選びの基準も参考にしてください。
