こんにちは！コーダーのゆうしです。
WordPressのテーマ制作をしていると「この関数どう書くんだっけ」「functions.phpに何を追加すればいいんだろう」と手が止まる場面、ありますよね。
今回はAIエディタ「Cursor」をWordPressのコーディングに活用する方法を紹介します。テーマ制作の作業時間をぐっと短縮できるので、ぜひ試してみてください。
前提：CursorでWordPressファイルを開く
まずはWordPressのテーマフォルダごとCursorで開きます。ファイル → フォルダを開く でテーマディレクトリ（例：wp-content/themes/●●）を選択するだけです。
フォルダごと開くことで、AIが複数ファイルをまたいで内容を把握してくれるようになります。これがCursorの大きな強みです。
活用例① functions.phpへの追記
カスタム投稿タイプの追加
「カスタム投稿タイプ『お知らせ』を追加したい」という場面で、チャット（Cmd+L）に以下のように入力します。
【プロンプト例】
functions.phpにカスタム投稿タイプ「news（お知らせ）」を追加してください。
アーカイブあり・管理画面のアイコンはdashicons-megaphoneにしてください。
すると既存のfunctions.phpの内容を読んだ上で、追記すべきコードを提案してくれます。
こんな感じです。
wp_enqueue_scriptsの追記
CSSやJSファイルを追加したいときも同様です。「style.cssとmain.jsを正しくエンキューするコードを追加して」と伝えるだけで、既存の記述とバッティングしない形で追記してくれます。
活用例② テンプレートファイルの作成
カスタム投稿のアーカイブページ
「archive-news.phpを新規作成したい」という場面では、既存のarchive.phpをCursorで開いた状態でチャットに伝えます。
【プロンプト例】
archive.phpをベースに、カスタム投稿タイプ「news」専用の
archive-news.phpを作ってください。
1ページ10件表示・ページネーションあり・サムネイルを表示する構成にしてください。
既存テーマの構成を把握した上でコードを出してくれるので、一から書くより大幅に時間を短縮できます。
single.phpのパーツ分割
get_template_part()を使ってテンプレートをパーツ分割したいときも、「single.phpをヘッダー・本文・関連記事の3パーツに分割して」と指示するだけで、分割案とコードを提案してくれます。
活用例③ CSSのデバッグ
レイアウト崩れが起きたとき、該当のCSSファイルをCursorで開いた状態で症状を伝えます。
【プロンプト例】
スマホ（375px）でヘッダーのナビゲーションが横にはみ出します。
style.cssの該当箇所を特定して修正してください。
こんな感じで指示を出すと修正対応してくれます。
※細かな部分は指示が伝わりにくいことが多いので、そこは自分で手直しする場面が多いかもしれません。大枠やわからない部分を任せ、こちらで細部を整える、みたいな使い方をすることが多いです。
躓きやすいポイント
テーマ独自の関数名・クラス名は事前に伝える
CursorのAIはテーマ内のファイルを参照できますが、プロジェクト固有の命名ルールや設計方針は最初に伝えておくと精度が上がります。チャットの冒頭に「このテーマはBEMを使っています」「クラス名のプレフィックスはp-です」などと添えるのがおすすめです。
PHPのバージョン・WordPressのバージョンを伝える
古い書き方を提案されることがあります。「WordPress 6.x・PHP 8.x環境です」と添えておくと、最新の書き方で提案してくれます。
生成されたコードは必ずステージング環境で確認
本番環境に直接反映するのは避けて、必ずローカルやステージング環境で動作確認してからデプロイしましょう。
まとめ
CursorをWordPressのテーマ制作に取り入れると、functions.phpへの追記・テンプレート作成・CSSデバッグといった作業がかなりスムーズになります。
「WordPressの関数を毎回ググっている」という方には特に効果を感じやすいと思います。まずはローカル環境のテーマフォルダをCursorで開くところから試してみてください。
Cursorの基本的な使い方はこちらの記事で紹介しています。まだ読んでいない方はあわせてどうぞ。
→ Cursor入門｜AIにコードを書かせる開発環境のはじめ方
コーディングのご依頼・ご相談はお問い合わせフォームからお気軽にどうぞ！
