WordPressとCursorをFTP連携！トップページをAIで「デザインコーディング」する方法

「WordPressのブロックテーマ、使いにくい…」「AIにコードを書いてもらっても、テーマの仕様で反映されない…」

そんな壁にぶつかったことはありませんか？最新のブロックテーマ（Twenty Twenty-Fiveなど）は便利な反面、コードで自由にカスタマイズしようとすると「CSSが効かない」「レイアウトが崩れる」といったトラブルが多発します。

しかし、**AIエディタ「Cursor」と「ある特殊な手法」**を組み合わせれば、これらの制約をすべて突破し、プロ級のデザインを爆速で実装できます。

この記事では、実際に私が検証して確立した**「WordPress × Cursor FTP連携」による最強のトップページ構築フロー**を公開します。

1. なぜ「普通にやる」と失敗するのか？

通常、WordPressのカスタマイズは style.css や functions.php を編集します。しかし、AIにコードを書かせてそこに貼り付けても、多くの場合うまくいきません。

読み込み順序の罠： テーマのデフォルトCSSが強すぎて、自作のデザインが上書きされる。
構造の複雑さ： ブロックテーマはHTML構造が特殊で、AIが書いた一般的なHTML/CSSが適用されない。
キャッシュ地獄： 変更したはずなのに、画面には古いデザインが残り続ける。

結果、「AIはすごいコードを書いたのに、サイトは崩れたまま」という悲劇が起こります。

2. 解決策：ファイルを「完全独立」させる

この問題を解決する唯一にして最強の方法。それが、トップページを**「完全独立型（All-in-One）」の1ファイルで作る**ことです。

テーマのルール（ヘッダーやフッターの呼び出し）に依存せず、**「このページのデザインは、このファイルに書いたことが全て！」**という状態を強制的に作ります。

必要な環境

Cursor： コード生成AIエディタ
FTPソフト： Dreamweaver, FileZilla, Cyberduckなど（サーバーとPCを繋ぐもの）
WordPress： 子テーマを用意しておくこと

3. 実践！爆速構築の3ステップ

STEP 1：Cursorとサーバーを繋ぐ

まず、FTPソフトを使ってサーバー上のテーマフォルダ（/wp-content/themes/子テーマ名/）をPCにダウンロードし、そのフォルダをCursorで開きます。

これで、**「Cursorでファイルを保存 → 即座にサーバーへ反映」**という環境が整います。

STEP 2：魔法のファイル「front-page.php」を作成

ここが最大のポイントです。子テーマの中に front-page.php というファイルを作成し、以下の「完全独立型テンプレート」をコピペしてください。

これ一つで、HTML構造からデザイン（CSS）、WordPress機能の呼び出しまで完結します。

PHP

<?php
/**
 * Template Name: トップページ（完全独立LP版）
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
    
    <style>
        body { margin: 0; padding: 0; background: #000; color: #fff; font-family: sans-serif; }
        .hero { height: 100vh; display: flex; align-items: center; justify-content: center; }
        /* 以降、自由自在にデザイン可能 */
    </style>
</head>
<body>
    
    <header>...</header>

    <main>
        <section class="hero">
            <h1>AIを、実務の現場へ。</h1>
        </section>
        
        <section class="news">
            <?php
            $the_query = new WP_Query( array('posts_per_page' => 3) );
            // ループ処理...
            ?>
        </section>
    </main>

    <footer>...</footer>

    <?php wp_footer(); ?>
</body>
</html>

STEP 3：AI（Cursor）に指示を出す

土台ができたら、あとはCursor（Ctrl + K）に指示を出すだけです。 CSSファイルが分かれていないので、AIも迷わず完璧なコードを書いてくれます。

【プロンプト例】

「この front-page.php を編集して。デザインは『テック企業のLP風』にしたい。

背景は濃いネイビーから黒へのグラデーション。

サービス一覧は『カード型』にして、横並びの3カラムにする。

最新記事を自動で3件表示するPHPコードを含める。」

たったこれだけで、数秒後にはプロ級のデザインが出来上がります。

4. トラブルシューティング

作業中に「あれ？」と思ったらここを確認してください。

Q. ファイルをアップロードしたのにデザインが変わらない！
- A. ブラウザの強力なキャッシュが原因です。Ctrl + F5（スーパーリロード）を押してください。
Q. 画面が真っ白になった！
- A. PHPの記述ミスです。FTPソフトで、編集前のファイルをアップロードし直せばすぐに復旧できます。

まとめ：Web制作は「AIとの共創」へ

この「FTP連携 × 完全独立型ファイル」の手法を使えば、ブロックテーマの制約に悩まされることはもうありません。

デザイン: 自由自在（AIにお任せ）
機能: WordPressの強み（記事管理など）はそのまま
スピード: 爆速

「TOMARU」では、こうした**「現場で使えるAI実装ノウハウ」**をこれからも発信していきます。 Web制作のスピードを劇的に上げたい方は、ぜひこの環境を試してみてください！