バイブコーディングでWordPressサイトを作る方法｜AIでテーマ制作する実践ガイド

WordPressのテーマを何十個も試して、「どれもしっくりこない」と感じたことはありませんか。

有料テーマを買ってみたけれど、色やレイアウトを変えたい部分が変えられない。管理画面のカスタマイザーで触れる範囲は限られている。「ここだけ直したいのに」が積み重なって、結局テーマを変えてやり直し——。

この記事では、そんな「これじゃない感」を根本から解決する方法を紹介します。バイブコーディングでWordPressテーマを自分の思い通りにカスタマイズする（あるいはゼロから作る）実践手順です。

プログラミングの専門知識は不要です。AIに日本語で指示を出して、WordPressのテーマファイルを編集していきます。実際に使えるプロンプト例も掲載するので、この記事を読みながらそのまま試せます。

バイブコーディングの基本がまだの方は、先に「バイブコーディングのやり方｜始め方から実践手順まで完全ガイド」をご覧ください。

バイブコーディング × WordPressでできること

バイブコーディングとは、AIに自然言語で指示を出してコードを書かせる開発スタイルです。これをWordPressに応用すると、以下のことが可能になります。

テーマの見た目を自由にカスタマイズ

「ヘッダーを固定にしたい」「フッターに3カラムのリンク一覧を置きたい」「トップページのヒーロー画像を全幅にしたい」——管理画面のカスタマイザーでは実現できなかったデザイン変更が、AIへの指示だけで可能になります。

オリジナルのページテンプレートを作成

料金表ページ、サービス紹介ページ、スタッフ紹介ページなど、業種に合わせた専用のページテンプレートをゼロから作れます。既存テーマのレイアウトに縛られません。

functions.phpでサイトの機能を拡張

カスタム投稿タイプの追加、ウィジェットエリアの追加、ショートコードの作成など、プラグインに頼らずサイト機能を追加できます。プラグインの数を減らせるので、表示速度の改善にもつながります。

既存テーマを「子テーマ」で安全に改変

親テーマを直接編集するとアップデートで上書きされます。バイブコーディングなら「子テーマを作って」と指示するだけで、安全にカスタマイズできる環境が整います。

つまり、WordPressの「テーマに合わせてサイトを作る」から「サイトに合わせてテーマを作る」への転換が、バイブコーディングで実現できるということです。

準備するもの

バイブコーディングでWordPressテーマを編集するために必要なものは3つだけです。

1. AIコードエディタ「Cursor」

Cursorは、AIが組み込まれたコードエディタです。無料プランでもAI機能が使えます。詳しいインストール手順は「Cursorでホームページ作成｜プロンプト例付き完全ガイド」で解説しています。

2. WordPressサイト（ローカルまたは本番）

すでにWordPressサイトを運営しているなら、そのテーマファイルをCursorで開くだけでOKです。まだない場合は、Local（無料）でパソコン上にWordPress環境を作れます。

3. FTPまたはSSHでのファイルアクセス

本番サイトを直接編集する場合は、FTPソフト（FileZillaなど）かSSH接続が必要です。ローカル環境ならフォルダを直接開けるのでFTPは不要です。

具体的な手順：CursorでWordPressテーマをカスタマイズする

ここから実践に入ります。既存テーマの子テーマを作成し、カスタマイズしていく手順を解説します。

ステップ1：子テーマを作成する

まず安全にカスタマイズするための子テーマを作ります。Cursorのエージェント機能（⌘+I）を開いて、以下のように指示します。

WordPressの子テーマを作成してください。
・親テーマ: flavor（※お使いのテーマ名に変更）
・子テーマ名: flavor-child
・style.css と functions.php を作成
・functions.php で親テーマのスタイルシートを読み込むこと

AIが style.css（テーマ情報のヘッダー付き）と functions.php（wp_enqueue_scripts で親テーマのCSSを読み込む処理）を生成してくれます。

生成されたファイルを wp-content/themes/flavor-child/ に配置し、WordPress管理画面で子テーマを有効化すれば準備完了です。

ステップ2：functions.phpで機能を追加する

子テーマの functions.php に機能を追加していきます。たとえば「お知らせ」用のカスタム投稿タイプを追加したい場合、Cursorに次のように指示します。

WordPressのカスタム投稿タイプ「お知らせ（news）」を追加するコードをfunctions.phpに書いてください。
・投稿一覧にカテゴリ分類を追加
・管理画面のメニューに表示
・アーカイブページを有効にする

AIが register_post_type() と register_taxonomy() を使ったコードを生成します。生成されたコードを確認し、問題なければ保存します。

確認ポイント：管理画面の左メニューに「お知らせ」が追加されているか、投稿画面でカテゴリ分類が使えるかを確認しましょう。

ステップ3：テンプレートファイルを作成する

専用のページテンプレートを作成します。たとえば料金表ページを作りたい場合：

WordPressのページテンプレート「料金表（page-pricing.php）」を作ってください。
・get_header() と get_footer() を使う
・料金プランを3カラムで表示（ライト/スタンダード/プレミアム）
・各プランに価格・特徴リスト・CTAボタンを配置
・おすすめプランに「人気No.1」バッジをつける
・レスポンシブ対応（スマホでは1カラム）

WordPress固有のテンプレート階層（get_header()、get_footer()、テンプレート名のコメント）を含んだPHPファイルが生成されます。

ステップ4：CSSでデザインを調整する

子テーマの style.css にデザイン変更を追加します。

以下のCSSを子テーマのstyle.cssに追加してください。
・ヘッダーを白背景で上部固定（sticky）にする
・ナビゲーションリンクのホバー時に下線アニメーション
・フッターの背景色を #1E1E2E に変更
・本文の行間を1.8に
・見出しh2の左に青いアクセントバー（3px幅）をつける

CSSの場合、AIの出力をそのまま使えることが多いですが、ブラウザのデベロッパーツール（F12）で実際の表示を確認する習慣をつけてください。親テーマのCSSとの優先度（詳細度）の問題で効かない場合があり、その場合はAIに「詳細度が足りないので修正して」と指示すれば対応してくれます。

ステップ5：プレビューと修正の繰り返し

WordPressのプレビュー画面でデザインを確認し、違和感がある部分をAIに修正指示します。

• 「スマホ表示でヘッダーのロゴが大きすぎるので、max-width: 120px にして」
• 「料金表のボタンの角をもっと丸くして、ホバー時にふわっと拡大するようにして」
• 「フッターのコピーライト表記の年を自動更新にして」

この「指示 → 確認 → 修正」の反復がバイブコーディングの本質です。1回で完璧にはなりません。3〜5回のやり取りで仕上がるイメージで進めましょう。

実際に使えるプロンプト例

ここからは、WordPressテーマのカスタマイズで実際に使えるプロンプトを紹介します。コピーしてそのまま使えます。

プロンプト例1：ブログ記事一覧をカード型レイアウトに変更

WordPressのブログ一覧ページ（archive.php）で、記事をカード型のグリッドレイアウトで表示するように変更してください。

要件：
・PCで3カラム、タブレットで2カラム、スマホで1カラム
・各カードにアイキャッチ画像・投稿日・タイトル・抜粋文（80文字）を表示
・カードにはホバー時にわずかに浮き上がるシャドウアニメーション
・画像がない記事にはダミー画像（グレー背景にカメラアイコン）を表示
・子テーマのファイルとして作成

プロンプト例2：お問い合わせページに地図とアクセス情報を追加

WordPressの固定ページテンプレート「お問い合わせ（page-contact.php）」を作成してください。

構成：
・ページ上部にGoogle Mapsの埋め込み（iframe、横幅100%、高さ400px）
・その下にアクセス情報（住所・最寄駅・営業時間）を2カラムで配置
・右カラムにContact Form 7のショートコード

エラー: コンタクトフォームが見つかりません。

を配置
・レスポンシブ対応（スマホでは1カラムに切り替え）
・子テーマのテンプレートとして作成

プロンプト例3：トップページに「最新のお知らせ」セクションを追加

WordPressのfront-page.phpに「最新のお知らせ」セクションを追加してください。

・カスタム投稿タイプ「news」から最新3件を取得して表示
・日付・タイトル・抜粋を表示し、タイトルクリックで個別記事へ遷移
・セクション下部に「お知らせ一覧を見る」ボタン（アーカイブページへリンク）
・WP_Queryを使い、メインクエリに影響を与えないこと
・wp_reset_postdata() を忘れずに呼ぶこと

プロンプト例4：投稿記事の下に関連記事を自動表示

WordPressの single.php に関連記事セクションを追加してください。

・同じカテゴリの記事を最大4件表示（現在の記事は除外）
・アイキャッチ画像・タイトル・投稿日を表示
・該当記事がない場合は最新記事を表示
・横スクロールではなくグリッド表示（PCで4カラム、スマホで2カラム）
・プラグインは使わず、WP_Queryで実装

ポイントは、WordPressの関数名（get_header、WP_Query、wp_reset_postdataなど）を指示に含めることです。AIはWordPressの関数を理解しているので、こちらが関数名を指定するとコードの品質が上がります。WordPressの関数名がわからなくても、「WordPressのベストプラクティスに従って実装して」と添えれば、AIが適切な関数を選んでくれます。

注意点：バイブコーディング × WordPressで気をつけること

便利な反面、WordPressならではの注意点があります。ここを軽視すると、サイトが真っ白になったり、セキュリティホールを作ってしまったりするリスクがあります。

1. 必ず子テーマを使う

親テーマを直接編集すると、テーマのアップデート時にすべての変更が上書きされて消えます。最初に子テーマを作成し、すべてのカスタマイズは子テーマ内で行ってください。

2. 編集前にバックアップを取る

functions.php の記述ミスはサイト全体を表示不能にします。編集前に必ずバックアップを取りましょう。おすすめの方法は2つです。

• プラグインで自動バックアップ：UpdraftPlusなどで毎日自動バックアップを設定
• Gitでバージョン管理：テーマフォルダをGitリポジトリにして、変更のたびにコミット

Gitを使えば「3日前の状態に戻す」が1コマンドでできるので、バイブコーディングとの相性が非常に良いです。

3. セキュリティに関わるコードは慎重に

AIが生成するコードは機能的には正しくても、セキュリティ面が甘いことがあります。特に以下の点に注意してください。

• ユーザー入力のサニタイズ：フォームの入力値を処理するコードは sanitize_text_field() や esc_html() が使われているか確認
• SQLクエリのエスケープ：$wpdb->prepare() が使われているか確認
• nonce検証：フォーム送信処理に wp_nonce_field() と wp_verify_nonce() があるか確認

Cursorに「このコードにセキュリティ上の問題がないか確認して」と聞くのも有効です。ただし、AIの判断を100%信用するのではなく、上記の3点は自分の目でも確認しましょう。

4. ローカル環境で動作確認してから本番に反映する

本番サイトで直接編集するのは避けましょう。Localなどのローカル環境で動作確認してから、本番に反映するフローが安全です。

5. PHPのバージョンに注意

AIが生成するPHPコードは最新のPHP 8.x向けの書き方になっていることがあります。レンタルサーバーのPHPバージョンが古い（7.4以前）と動かない場合があるので、サーバーのPHPバージョンを確認し、必要に応じてAIに「PHP 7.4互換で書いて」と指示してください。

費用比較：テーマ購入 vs 制作会社 vs バイブコーディング

WordPressサイトのカスタマイズにかかる費用を3つの方法で比較します。

有料テーマは手軽ですが、カスタマイズの限界にすぐぶつかります。制作会社は自由度が高い反面、コストと期間がかかり、修正のたびに追加費用が発生します。

バイブコーディングは、自分のペースで、低コストで、自由にカスタマイズできる点が最大のメリットです。「テーマ探しの無限ループ」から抜け出したい方には、試してみる価値があります。

具体的な費用感をもっと詳しく知りたい方は、「ホームページ制作費用の相場と見積もり｜無料シミュレーターで30秒診断」で簡単に確認できます。

「自分でやるのが不安」な方へ

バイブコーディングは強力な方法ですが、「WordPressのファイルを触るのがどうしても怖い」「自分のサイトで失敗したくない」という気持ちもよくわかります。

そんな方向けに、2つの選択肢を紹介します。

選択肢1：バイブコーディングを学ぶ

アントワが運営する「Vibe教室」では、バイブコーディングの実践スキルをオンラインで学べます。WordPress制作の課題も扱っているので、この記事の内容を講師と一緒に進められます。

• 実際のWordPressサイトを使った実践演習
• つまずいたときにすぐ質問できる環境
• プロンプトの書き方から本番反映までサポート

選択肢2：プロに任せる

「自分でやる時間がない」「確実にプロ品質で仕上げたい」という場合は、アントワのWeb制作サービスをご検討ください。バイブコーディングを活用したAI駆動開発で、通常の制作会社より短納期・低コストでWordPressサイトを制作します。

どちらの選択肢も、まずはお気軽にご相談ください。

関連記事

• バイブコーディングのやり方｜始め方から実践手順まで完全ガイド
• Cursorでホームページ作成｜プロンプト例付き完全ガイド
• WordPress vs Wix vs Jimdo vs STUDIO｜個人事業主に最適なHP作成ツール比較
• 個人事業主がバイブコーディングで自分のホームページを作る方法
• ホームページ制作費用の相場と見積もり｜無料シミュレーターで30秒診断

よくある質問

Q. バイブコーディングでWordPressテーマを作るのにプログラミング知識は必要ですか？

基本的には不要です。AIに日本語で指示を出せばコードが生成されます。ただし、WordPressの基本的な仕組み（テーマフォルダの構成、functions.phpの役割、テンプレート階層の概念）を理解しておくと、より的確な指示が出せます。完全にゼロからの場合は、バイブコーディングの基本を先に学ぶのがおすすめです。

Q. 既存のWordPressテーマをバイブコーディングでカスタマイズできますか？

はい、できます。子テーマを作成して、変更したい部分だけを上書きする方法が安全です。たとえば「ヘッダーのデザインだけ変えたい」なら、子テーマに header.php をコピーしてCursorで編集するだけです。親テーマの他の部分はそのまま使えます。

Q. バイブコーディングで作ったテーマにセキュリティ上の問題はありませんか？

AIが生成するコードは基本的に正しいですが、セキュリティ対策が不十分な場合があります。特にフォーム処理やデータベース操作を含むコードでは、サニタイズ（入力値のクリーニング）とエスケープ（出力値の安全化）が実装されているかを確認してください。確認方法がわからない場合は、AIに「このコードのセキュリティをチェックして」と依頼しましょう。

Q. Cursor以外のツールでもWordPressテーマのバイブコーディングはできますか？

できます。GitHub CopilotやClaude Code、ChatGPTなどでもWordPressのコード生成は可能です。ただし、Cursorはファイルの直接編集やプロジェクト全体の把握に優れており、WordPressテーマの複数ファイルを扱う作業には最も適しています。

Q. バイブコーディングで作ったWordPressサイトの保守・運用はどうすればいいですか？

通常のWordPressサイトと同じです。WordPress本体・プラグインの定期アップデート、バックアップの自動化、セキュリティプラグインの導入を行ってください。加えて、テーマファイルをGitでバージョン管理しておくと、問題が起きたときに過去の状態に戻せるので安心です。不安な方はアントワの制作サービスで保守プランもご用意しています。