Webデザイナー/コーダーのためのCusorレシピ集
AI先生があなたの学習をサポートします。今なら無料のWeb/AI制作7講座が受講できます。 （限定100名、8月31日まで）
» 今すぐ無料講座をチェックする
人気急上昇中のAI搭載コードエディタCursor。 「Cusorがなんかすごそうなのは分かるけど…私、エンジニアじゃないしなぁ」とお考えの方もいらっしゃるかもしれません。ですが、Webデザイナーさんやコーダーさん、そしてコーディングを学習中の方にとってもCursorはめちゃくちゃ便利です。苦手な人が多いWordPressのテーマ化、テンプレート化もサクサク進みますよ。
実際に使用したレシピ（プロンプト）と、Cursorで生成されたコードも併せて活用方法をご紹介します。
- デモ素材について
- HTML/CSS編
- WordPress編
- ステップ0：新規テーマフォルダを作る
- ステップ1：テーマとしての型を整える
- ステップ2：WordPressにあったパスにする
- ステップ2.5：AIでパーシャル化（header/footerに分割）
- ステップ3：functions.phpとメニューを設定する
- ステップ4：静的HTMLのカードをWordPressの投稿一覧に
- ステップ5：single.phpを作る
- 最後に
デモ素材について
ズーロッパという架空の動物園サイトの簡単なHTMLをご用意しました。
デモを見ながら実際にCursor AIを使ってみたり、WordPress化がどのくらい楽になるか試したり…ご自由にご活用ください。
※なお、レスポンシブコーディングの記事などでも似たデザインを題材にしておりますが、本ファイルはCursorデモ用に改変しています。
HTML/CSS編
初心者向け：よくある「困った」の解決方法をAIに相談
コーディングの学習を始めてすぐって「レッスン動画や本の通りに書いたのにうまくいかない！」ってなることが多いです。直そうとしても何が悪いかわからないし、うまくいかなくてイライラするし…実はそれで挫折して止めてしまう方も珍しくありません。
そうした時も、実はAIの出番。
うまくいかないところを伝えれば、1分もかからずに問題を解決してくれますよ。
素材の「zooSozai」に入っているファイル、実は問題が何箇所かあります。
Cusorを使ってサクッと解決してみましょう。
imgタグで書いた画像が表示されません
では、さっそく問題の一つ目。
トップページ（index.html）ではフッター上のセクションで画像が表示されていません。
どうして表示されないのか、Cursorを使ってAIに聞いてみます。 問題個所が明確なので、Cmd + K （Ctrl + K） でインラインボックスを出して質問してみましょう。
ここの画像が表示されません。何が間違っているかを確認し、パスを直してください。
実際にCursorで操作したのが、下のアニメーションです。
動きがあって分かりにくかった方は、こちらをご覧ください。
imagesフォルダの名前を打ち間違っていることを把握し、正しい記述に直してくれています。
ブラウザで表示を確認するとちゃんと画像が表示されています。
修正が正しいことが確認出来たら、Keepをクリック（もしくはショートカットキー）してAIが直してくれたコードを採用しましょう。
今回のデモは簡単なところですし、他人が書いた素材コードですので「AI使わなくてもわかるじゃん」と思った方もいらっしゃるかもしれません。でも、ディレクトリ（フォルダ）の階層が深かったり、急いで作業をしていたりすると…意外と気付かずに時間を食うこともあるのです。
レイアウト崩れが直せません
次は、イベント情報の一覧ページ（event.html）です。
カードを横に並べたデザイン…のはずが、ブラウザで見るとめちゃくちゃ崩れています。
コードを見てみます。
閉じタグが少ないか多いかだろうなぁ…と思っても、インデントも崩れているので一個ずつ揃えていって問題個所を探すの、すごく面倒ですよね。時間もかかります。
Cursorを使ってAIにやってもらいましょう。
今度はどこが原因かよくわからないのでCmd + L （Ctrl + L） のチャットパネルの方から聞いてみます。
問題：カード（<artilce class="card">）を並べたいのだけれど、横並び表示が崩れてしまいます。
修正してほしい内容：HTMLを整形して、閉じ忘れや入れ子の不正を直してください。
送信して、少し待つとお願いした箇所の修正を出してくれます。
１つずつ確認して変更を採用（keep）していっても、全体をざっと眺めてチャットパネルにあるKeepAllで一括採用してもOK。
表示崩れが直り、更にコードもきれいになって一石二鳥ですね！
CSSが効きません
イベントの詳細ページ（event1.html）、ここはブログ記事のようなイメージで右サイドバーに新着情報を並べる予定です。
ですが…style.cssに書いた内容が反映されていません。
どうして効かないか…悩むよりAIに聞いてみましょう。
style.cssで.maincolumnや.timestampのスタイル指定を書いているはずなのだけれど、event1.htmlで適用されません。
原因を特定して、修正してください。
原因は、style.css の「ページネーション」部分にある .pagination a の二重記述で、ネスト風の構文エラーになり、それ以降（.maincolumn や .timestamp を含む）のCSSが無効化されていました。重複を削除して修正しました。
ブラウザをリロードすると…直ってますね！
レスポンシブ対応もAIにお任せ
ここまでちょっとしたトラブルの修正をしてきましたが、次はレスポンシブ化をお願いしてみましょう。
PC向けのデザインしか渡されないときとか、考えるのが地味に面倒くさいんですよね。。
このサイトをレスポンシブにしたい。
今書いているCSSはパソコン幅向きなので、タブレット幅とスマホ幅に最適化したCSSを追加してください。
条件：
- htmlは極力変更しない
- 共通 > タブレット幅（1024px以下） > スマホ幅（768px以下）の順で記述する
- 横並びのカードはタブレット幅で２個ずつ横並び、スマホ幅では縦並びにする
- スマホ幅ではindex.htmlの.firstviewの背景画像をtop.jpgに変更する
話題が変わるので、新しいチャットを開いてプロンプトを送信します。
AIパネルの上部にある+アイコン、もしくはショートカットキーのCmd + T （WindowsはCtrl + T）を使います。
しばらく待つと、style.cssにレスポンシブ用に@media{ }に囲われたCSSがずらっと追加されます。
ブラウザで表示を見てみましょう。
完璧とまでは言えなくても、かなりレスポンシブ。
「詳細はこちら」のボタンがズレていたり、キリンの顔に文字がかかっていたり…、問題のある個所はAIに要素を具体的に伝えてると修正しやすいでしょう。
タブレット幅の時に.firstview-leadの幅が広すぎるので、60%にする。
a.btn-moreがline.pngの横に回り込まないようにする。
この2つをstyle.cssのスタイル指定に追加してください。
ただし、今のところAIはCSSに超強い…という感じではないです。
人間の視覚を考慮はしているのでしょうが、機械的にコードを読んでいますからね。以下の回答では、a.btn-moreは回り込まないけれど見た目的には良くない結果になりました。
見た目を細かく整える場合は、指示も細かく入れたほうが良い結果が出ます。
ただし「font-size:18px, padding-inlineは1emで…」とかチャット欄に打つなら、自分で書いたほうが早いですよね。大枠を組んでもらって、細かいところは自分で調整するような使い方が個人的にはおすすめです。
WordPress編
繊細なデザインにはちょっと弱いCursor（AI）ですが、CMSやフレームワークなどルールが決まっているものを扱うのは非常に得意。
例えば、メジャーなCMSであるWordPressのコーディングにも強いです。
HTMLページのまとまりである「zooSozai」をWordPressテーマにして試してみましょう。
ステップ0：新規テーマフォルダを作る
まずはWordPressのテーマフォルダを作りましょう。
wp-content/themes/に、「zooSozai」フォルダを丸ごとコピーしちゃいます。
そのままでも良いですが、分かりにくいので「「zooWp」に名前を変えておきます。
そして「「zooWp」フォルダをCursorで開いたら準備完了です。
ステップ1：テーマとしての型を整える
WordPressにテーマとして認識してもらうためには style.css と index.phpが必要です。
◆ style.css
最上部に、テーマの名札
となるコメントを入れます。
/*
Theme Name: zooWp
*/
◆ index.php
素材の中にあるevent.html （イベント一覧ページ）のファイル名を変更します。
-event.html → index.php
◆ テーマを有効化する
WordPressの管理画面にログインし、外観 → テーマ を開きます。
作成した zooWp がテーマとして認識されていますので、有効化しましょう。
「サイトを表示」すると、CSSが抜け落ちているものの、とりあえずWordPressとして表示されていることが確認できます。
ステップ2：WordPressにあったパスにする
このままだとCSSも画像も表示されないので、WordPressのテーマディレクトリの中にあるstyle.cssやimagesフォルダにパスを直します。 Cursor AIにやってもらいましょう。
zooWpフォルダはWordPressのテーマディレクトリです。
index.phpのCSS,画像パスを適切な書き方に変更してください。
a要素のリンク先は変えなくて良いです。
デモの場合はパスの修正だけではなく、パーシャル化（header/footerの分割）まで一気にやってくれちゃいました。
「いや、私の場合はやってくれなかった…」という方は次の ステップ2.5：AIでパーシャル化（header/footerに分割）
を試してください。
追加してくれたheader.php。 style.cssのパスも直してくれています。
ブラウザで確認すると、HTMLの時と同じページデザインが表示されています。
問題なければ Keep allで確定しちゃいましょう。
ステップ2.5：AIでパーシャル化（header/footerに分割）
-
index.php全文を選択 →Cmd + L（チャット） - 下の一言をそのまま送る
AIへの一言（そのまま）
index.phpをheader.php / footer.phpに分割してください。
<head>～<header>までをheader.php、<footer>～</html>までをfooter.phpに。
index.phpには get_header(); と get_footer(); を挿入。PHP構文エラーが出ないように最小変更で。
できあがった各ファイル（参考）
header.php
<!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'); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body <?php body_class(); ?>>
<header>
<div class="container flex-container">
<div class="header-logo text-center">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="168" height="32" alt="ズーロッパ東京">
</a>
</div>
<nav class="header-nav">
<ul class="flex-container flex-all-row">
<li><a href="event.html">イベント情報</a></li>
<li><a href="about.html">Zooloppaとは</a></li>
</ul>
</nav>
</div>
</header>
footer.php
<footer class="section-padding">
<div class="container text-center">
footer
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
index.php
<?php get_header(); ?>
<main class="bg-base categories">
<div class="container">
<section class="section-padding">
<h1 class="text-green text-center">
イベント一覧
</h1>
<div class="text-center">
<img src="<?php echo get_template_directory_uri(); ?>/images/line.png" width="400" height="6" alt="">
</div>
</section>
<section class="section-padding">
<!-- ここからカード並び -->
<div class="flex-container card-container">
<article class="card">
<div class="card-inner">
<img src="<?php echo get_template_directory_uri(); ?>/images/event1.png" width="629" height="378" alt="猫パーク">
<a href="event1.html">
<h2>猫パークに行こう</h2>
</a>
<div class="text-orange">
★★★★★
</div>
<p class="card-description">
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出
</p>
<div class="card-footer flex-container flex-all-row">
<div class="card-author">
<img src="<?php echo get_template_directory_uri(); ?>/images/michan.png" width="26" height="26" alt="michan">
<a href="event1.html">
michan
</a>
</div>
<div class="card-date">
2023/05/16
</div>
</div>
</div>
</article>
<!-- ほぼ同じarticle.cardの繰り返しになるため省略 -->
</div>
</section>
<div class="pagination section-padding">
<div class="text-center">
<a href="#" class="current">1</a>
<a href="#">2</a>
<a href="#">次へ »</a>
</div>
</div>
</div>
</main>
<?php get_footer(); ?>
ステップ3：functions.phpとメニューを設定する
ここまででWordPressサイトとして表示はできました。
しかし、運用するにはまだ色々足りていません。機能的な部分だと、一般的なテーマには標準搭載されているメニューとアイキャッチは最低限入れたいですね。
Cursor AI にお願いしてみましょう。
このテーマで、WordPress標準の以下の機能が使えるようにしたい。
functions.phpを作成して、必要な記述を入れてください。
- 投稿でアイキャッチ画像が設定できるようにする
- WordPress管理画面の外観＞メニューからメニューを設定できるようにしてほしい。とりあえずグローバルナビゲーションで1つ使いたい。
↓
WordPressで設定したメニューがヘッダーに表示されるよう、header.phpも更新してくれてました。
（header.phpの設定までされなかった方は、AIパネルで追加リクエストしてください）
管理画面でメニューが使えるか、ヘッダー部分に反映するか確認します。
投稿の編集画面で、アイキャッチが使えるかも確認。
問題なければKeepしましょう。
生成されたコード（参考）
functions.php
<?php
// テーマの初期化設定
function zooWp_setup_theme() {
// アイキャッチ画像（投稿サムネイル）を有効化
add_theme_support('post-thumbnails');
// メニューの登録（グローバルナビ）
register_nav_menus([
'global' => 'グローバルナビゲーション',
]);
}
add_action('after_setup_theme', 'zooWp_setup_theme');
header.php
<!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'); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body <?php body_class(); ?>>
<header>
<div class="container flex-container">
<div class="header-logo text-center">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="168" height="32" alt="ズーロッパ東京">
</a>
</div>
<nav class="header-nav">
<?php
wp_nav_menu([
'theme_location' => 'global',
'container' => false,
'menu_class' => 'flex-container flex-all-row',
'fallback_cb' => false,
]);
?>
</nav>
</div>
</header>
ステップ4：静的HTMLのカードをWordPressの投稿一覧に
「イベント一覧」で表示されているカードを、WordPressで投稿されている記事の一覧に置き換えます。
以下の<article class="card">...</article>までをループに書き換える作業です。
<article class="card">
<div class="card-inner">
<img src="<?php echo get_template_directory_uri(); ?>/images/event1.png" width="629" height="378" alt="猫パーク">
<a href="event1.html">
<h2>猫パークに行こう</h2>
</a>
<div class="text-orange">
★★★★★
</div>
<p class="card-description">
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出
</p>
<div class="card-footer flex-container flex-all-row">
<div class="card-author">
<img src="<?php echo get_template_directory_uri(); ?>/images/michan.png" width="26" height="26" alt="michan">
<a href="event1.html">
michan
</a>
</div>
<div class="card-date">
2023/05/16
</div>
</div>
</div>
</article>
投稿タイプやカテゴリなどの設定によって指示内容は多少変わる点にご注意ください。
見本では「投稿」を使用し、イベント情報用のカテゴリ「イベント（スラッグ：events）」として整理しています。
CursorでAIに指示を出します。
場所が明確なのでarticleを範囲選択して、Cmd + K（編集）で指示を送ってみます。
article要素部分をそれぞれWordPressから動的に出力したい。
取得する投稿はpostのなかで、eventsカテゴリーに属しているもの。
最大表示件数は8件まで。
↓
クエリとループを書いてくれました。
ざっと見て問題なさそうなら Accept で採用し、ファイルを上書き保存してください。
ブラウザで表示を確認。
ループ自体は上手くできていますが、HTMLのコードが残ってしまっているようです。そのへんは自分で消しましょう。。
生成されたコード（参考）
index.php
<section class="section-padding">
<!-- ここからカード並び -->
<div class="flex-container card-container">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 8,
'category_name' => 'events'
);
$events_query = new WP_Query($args);
if ($events_query->have_posts()) :
while ($events_query->have_posts()) : $events_query->the_post();
?>
<article class="card">
<div class="card-inner">
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('large', array('width' => 629, 'height' => 378, 'alt' => get_the_title())); ?>
</a>
<?php else: ?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" width="629" height="378" alt="No Image">
</a>
<?php endif; ?>
<a href="<?php the_permalink(); ?>">
<h2><?php the_title(); ?></h2>
</a>
<div class="text-orange">
★★★★★
</div>
<p class="card-description">
<?php echo mb_strimwidth(strip_tags(get_the_excerpt()), 0, 60, '…'); ?>
</p>
<div class="card-footer flex-container flex-all-row">
<div class="card-author">
<?php echo get_avatar(get_the_author_meta('ID'), 26); ?>
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>
</div>
<div class="card-date">
<?php echo get_the_date('Y/m/d'); ?>
</div>
</div>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p>イベントが見つかりませんでした。</p>
<?php endif; ?>
</div>
</section>
ステップ5：single.phpを作る
投稿の詳細ページ（single.php）を作りましょう。
HTMLページではイベント詳細ページ、event1.htmlのデザインを使います。
細かく指示したほうが良い…と言いつつ、面倒なのでAIに丸投げしちゃいます。
event1.htmlのレイアウトを、single.phpとして使用したい。
WordPressのテンプレートとして、動的に出力できるように置き換えてください。
↓
おお！できちゃいました。すごすきる…。
生成されたコード（参考）
single.php
<?php get_header(); ?>
<div class="container flex-container">
<article class="maincolumn section-padding">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'full', ['alt' => esc_attr( get_the_title() )] ); ?>
<?php endif; ?>
<div class="timestamp">
最終更新日：<?php echo esc_html( get_the_modified_time( 'Y/m/d' ) ); ?>
</div>
<h1 class="toptitle text-green">
<?php the_title(); ?>
</h1>
<div class="post-body">
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</article>
<aside class="sidebar section-padding">
<h2 class="text-center">
最新のイベント情報
</h2>
<div class="text-center">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/line.png" width="400" height="6" alt="">
</div>
<ul class="sidelist">
<?php
$recent_posts = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 4,
'post_status' => 'publish',
'ignore_sticky_posts' => true,
]);
if ( $recent_posts->have_posts() ) :
while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<li class="flex-container flex-all-row">
<a href="<?php the_permalink(); ?>" class="sidelist-img">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail', ['alt' => esc_attr( get_the_title() )] );
} else { ?>
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/event1.png" alt="<?php echo esc_attr( get_the_title() ); ?>">
<?php } ?>
</a>
<div class="sidelist-text">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="timestamp"><?php echo esc_html( get_the_date( 'Y/m/d' ) ); ?></span>
</div>
</li>
<?php endwhile;
wp_reset_postdata();
endif; ?>
</ul>
</aside>
</div><!-- /.container -->
<?php get_footer(); ?>
プロンプトで指示をしなかったため、上記の生成されたコードでは「投稿」の記事すべてが対象になっています。
上のステップ4：静的HTMLのカードをWordPressの投稿一覧に
を参考に、イベントカテゴリの投稿だけ表示するなど追加指示を出すとさらに改善されます。
最後に
ざっとHTMLコーディングや、WordPressのテーマ作りの活用をご紹介しましたが、いかがでしたでしょうか？ Cursor AI機能を使ったコーディング、めちゃくちゃ便利ですよね。
いちいちWordPressチートシートとかを調べなくても良いですし、自然言語（先輩や先生に、ここどうやったら良いんですかね？と聞く感じ）でサクサク助けてくれるので時短にもストレス軽減にも役立ってくれます。
今回の素材ではWordPressのフロントページに該当するindex.htmlや、固定ページもしくはカスタム投稿タイプを想定して作ったadoutグループもあります。
上手くいかなくても惜しげのないフォルダですので、Cursor AIを活用しながらWordPressテーマ化してみてください。
もしエラーが出た時も、問題ファイル（わかれば問題個所）を選択してAIに聞くと直してくれますよ！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
8月31日まで