このページは、このサイト（uni-log）のWordPressテーマ開発で実際に使用したプロンプトを整理したものです。カスタマイズ作業でそのまま使い回せるように、項目別にまとめました。
「AIにどう頼めばいいかわからない」「毎回一から書くのが面倒」という方は、このページを参照してコピペしてください。変数部分（[テーマ名]など）をご自身の環境に合わせて書き換えるだけで使えます。
各プロンプトはそのままコピペしてAIに貼り付けてOKです。
[ ]で囲まれた部分だけ自分の環境に合わせて書き換えてください。目次
- テーマ初期設定・セットアップ
- レスポンシブ対応・ハンバーガーメニュー
- CSSクラス名のWordPress競合チェック
- カテゴリURLから /category/ を削除
- 投稿アーカイブページ（全記事一覧）の作成
- 記事カードのカルーセルスライダー
- トップへ戻るボタン
- カスタムフィールド（CSS/JS/SEO meta）
- meta description / OGPタグ出力
- デフォルトOGP画像（管理画面設定）
- 構造化データ（JSON-LD / Schema.org）
- sitemap.xmlの動的生成
- llms.txtの動的生成・配信
- カードコンポーネントの高さ統一
- コードブロックへのコピーボタン追加
- おすすめ記事メタボックス
- バージョン文字列除去（管理画面除外）
- セキュリティ強化（不要な情報の削除）
- SVG・WebPのアップロード許可
- ブロックエディタとフロントの表示統一
- アーカイブタイトルからプレフィックスを削除
- 月別アーカイブのプルダウン（サイドバー）
- SNSシェアボタン（SVGアイコン）
- 前後記事ナビゲーション（同カテゴリ内）
1. テーマ初期設定・セットアップ
テーマを新規作成するときの最初のプロンプトです。基本ファイル一式を一度に生成させます。
翻訳機能のためにテーマを識別する文字列。テーマフォルダ名と合わせるのが慣習です。
WordPressカスタムテーマを新規作成してください。
以下の仕様でstyle.css・functions.php・header.php・footer.php・index.phpの基本ファイルセットを作成してください。
– テーマ名：[テーマ名]
– テキストドメイン：[text-domain]
– 関数プレフィックス：[prefix]_
– コンテナ幅：[px]
– アクセントカラー：[HEX]
– フォント：日本語対応のシステムフォントスタック
– CSSはカスタムプロパティ（CSS変数）で管理
– コメントで各パーツの役割を明記する
2. レスポンシブ対応・ハンバーガーメニュー
スマホ表示で開閉するハンバーガーメニューを実装するプロンプトです。CSS・JS・PHPの3ファイルをまとめて修正させます。
WordPressが管理画面で設定したナビゲーションメニューを出力するための関数。直接HTMLを書くより柔軟に管理できます。
WordPressテーマのheader.phpとstyle.cssとscript.jsを修正してください。
– ブレークポイント：768px
– 768px以下でPCナビを非表示にし、ハンバーガーボタンを表示
– ハンバーガーボタンは3本線→×のCSSアニメーション
– クリックでドロワーメニューが開閉する
– メニューはWordPressのwp_nav_menu()で出力、ナビゲーションが未設定の場合はカテゴリを自動取得してフォールバック表示
– ドロワー内のリンクをクリックしたらメニューを閉じる
– ウィンドウが768px超になったらメニューを自動で閉じる
– aria属性でアクセシビリティ対応
3. CSSクラス名のWordPress競合チェック
自作クラスがWordPressの自動付与クラスと衝突していないかチェックさせるプロンプトです。予期しないスタイル崩れを防ぎます。
WordPressは表示しているページの種類に応じてbodyタグに自動でクラスを付与します。
home single category などが代表例で、自作クラスと名前が被ると意図しないCSSが適用されます。以下のWordPressテーマのstyle.cssを確認してください。
WordPressが<body>タグに自動付与するクラス名と競合していないかチェックしてください。
特にdisplay:flexやdisplay:gridを持つセレクタが以下のクラス名と一致していないか確認してください。
【WordPressのbodyクラス一覧】
home / blog / archive / single / page / category / tag / search / menu / nav / header / footer / sidebar / widget / section / container / pagination / sticky / logged-in / attachment
競合しているクラスがあれば、テーマ固有のプレフィックス（例：site-、wh-）を付けてリネームしてください。PHPテンプレートファイルとCSSファイル両方を修正してください。
（現在のstyle.cssの内容をここに貼り付ける）
4. カテゴリURLから /category/ を削除
https://example.com/category/news/ を https://example.com/news/ にするプロンプトです。タグURLとの競合に注意した実装が求められます。
WordPressがURLをどのページに対応させるかを決めるルールのこと。変更後はパーマリンク設定の「保存」でルールをフラッシュする必要があります。
WordPressのfunctions.phpに以下の処理を追加してください。
カテゴリURLから「/category/」を除去する実装を行います。ただし、以下の点に注意してください。
– category_linkフィルターのみに適用（user_trailingslashitには適用しない）
– タグアーカイブ・月別アーカイブのURLとの競合を避けるため、リライトルールはrewrite_rules_arrayフィルターでルールの「末尾」に追加する
– カテゴリごとに通常URL・ページネーションURLの両方のルールを生成
– フラッシュはoptionでバージョン管理し、初回のみ実行
– 適用後にパーマリンク再保存が必要な旨をコメントに記載
5. 投稿アーカイブページ（全記事一覧）の作成
投稿タイプ「post」に /all/ というURLで全記事一覧を表示できるアーカイブページを付与するプロンプトです。
WordPressのfunctions.phpに以下を追加してください。
投稿タイプ「post」にアーカイブページを付与して、/all/ というURLで全記事一覧を表示できるようにしてください。
register_post_type_argsフィルターを使ってhas_archive = ‘all’を設定します。適用後にパーマリンク再保存が必要な旨をコメントに記載してください。
6. 記事カードのカルーセルスライダー
ライブラリ不要のCSS Scroll Snapを使ったネイティブスクロール式カルーセルです。複数設置しても独立して動作します。
CSSだけでスライドのスナップ（吸い付き）動作を実現するプロパティ。JavaScriptライブラリ不要で軽量に実装できます。
WordPressテーマのstyle.cssとscript.jsにカルーセルスライダーを実装してください。
仕様：
– CSS Scroll Snap を使ったネイティブスクロール方式（ライブラリ不要）
– 表示カラム数：PC=3カラム / タブレット=2カラム / スマホ=1カラム（次スライドが少し見える）
– 前へ・次へボタン（端に達したら自動で非活性）
– スクロールバー非表示
– タッチスワイプ対応
– 複数カルーセルが同一ページにあっても各自独立して動作
– リサイズ時のボタン活性状態更新（重複登録しない）
– DOMContentLoaded後に初期化
PHPテンプレート側のHTMLは以下の構造を使用：
.carousel-wrap > .carousel-track > .carousel-slide
7. トップへ戻るボタン
300pxスクロールで表示される固定位置ボタンです。ライブラリなしで滑らかなスクロールアニメーションを実装します。
ブラウザの描画タイミングに合わせてアニメーションを実行するJavaScriptのAPI。
setTimeoutより滑らかなアニメーションが実現できます。WordPressテーマにトップへ戻るボタンを追加してください。
仕様：
– footer.php の wp_footer() より前にHTMLを配置（JSが先に読み込まれる問題を防ぐため）
– 300pxスクロールで表示（CSSトランジションでフェードイン）
– window.scrollTo は複数の横スクロール要素がある場合に干渉するため使わない
– requestAnimationFrame + easeOutCubic で自前アニメーション実装
– document.documentElement.scrollTop と document.body.scrollTop 両方を操作
– 固定位置：右下（position:fixed）、丸いボタン
– DOMContentLoaded後に初期化
8. カスタムフィールド（CSS/JS/SEO meta）
管理画面の投稿・固定ページ編集画面に、ページ固有のCSS・JS・SEO設定を入力できるメタボックスを追加するプロンプトです。
フォームの不正送信を防ぐWordPressの使い捨てトークン。カスタムメタボックスの保存処理には必ず含める必要があります。
WordPressのfunctions.phpに投稿・固定ページ用のカスタムメタボックスを追加してください。
① SEO設定ボックス（優先度：high / CSS/JSボックスより上に表示）
– meta description入力欄（120〜160文字推奨、文字数カウンター付き、超過で赤表示）
– 空欄時の自動抽出プレビュー表示
– OGP画像URL入力欄（空欄時はアイキャッチを自動使用）
② カスタムコードボックス（優先度：default）
– カスタムCSS入力欄（<style>タグ不要、黒背景モノスペースフォント）
– カスタムJS入力欄（<script>タグ不要）
– フロントエンドで対象ページのみにインライン出力
共通要件：
– nonce検証・権限チェック・自動保存スキップ
– <style>/<script>タグの混入を正規表現で除去してサニタイズ
9. meta description / OGPタグ出力
カスタムフィールド・抜粋・本文の順で自動取得するmeta descriptionと、完全なOGP/Twitterカードタグを出力するプロンプトです。
SNSでシェアされたときに表示されるタイトル・画像・説明文を指定するHTMLのmetaタグ群。FacebookやX（旧Twitter）、LINEで使われます。
WordPressのfunctions.phpにSEO/OGPメタタグを自動出力する関数を追加してください。
出力するタグ：
– meta description（カスタムフィールド → 抜粋 → 本文の順で自動取得）
– canonical URL
– og:type / og:title / og:description / og:url / og:image / og:site_name / og:locale（ja_JP）
– twitter:card（画像ありでsummary_large_image、なしでsummary）
– 投稿ページのみ：article:published_time / article:modified_time / article:author / article:section
ページ種別ごとに出力内容を切り替え：
– トップページ / 投稿記事 / 固定ページ / カテゴリ / 検索 / その他アーカイブ
OGP画像の優先順位：
カスタムフィールド → アイキャッチ → サイトデフォルト（管理画面で設定）
wp_head アクションに priority:1 で追加してください。
10. デフォルトOGP画像（管理画面設定）
管理画面の「設定 > 一般」にデフォルトOGP画像フィールドを追加するプロンプトです。
WordPressの管理画面 > 設定 > 一般 に「デフォルトOGP画像」フィールドを追加してください。
– register_setting / add_settings_field / settings_section を使う標準的な実装
– URL入力欄（type=”url”）
– 推奨サイズの説明文（1280×630px）
– 現在設定中の画像をプレビュー表示
– sanitize_callbackはesc_url_raw
– 全ページのOGP出力関数でフォールバックとして使用
11. 構造化データ（JSON-LD / Schema.org）
トップページ・投稿・固定ページそれぞれに適切なスキーマを自動出力するプロンプトです。
Googleが推奨するページのコンテンツ情報をマシン向けに記述する形式。検索結果のリッチリザルト（FAQ・パンくずなど）表示につながります。
WordPressのfunctions.phpにJSON-LDの構造化データを自動出力する関数を追加してください。
ページ種別ごとに出力するスキーマ：
– トップページ：WebSite（SearchAction付き）+ Organization
– 投稿記事：Article（headline/description/datePublished/dateModified/author/image/articleSection/timeRequired）+ BreadcrumbList
– 固定ページ：WebPage（breadcrumb込み）
その他の要件：
– null・空文字の値は再帰的に除去してから出力
– wp_json_encode（JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT）
– wp_headにpriority:5で追加
– 著者情報はget_the_author_metaで取得
– 読了時間はMB文字数 ÷ 800で算出
12. sitemap.xmlの動的生成
プラグイン不要でWordPress標準機能のみを使ってsitemap.xmlを動的生成・配信するプロンプトです。
WordPressのデータキャッシュ機能。一時的なデータをDBに保存し、指定時間後に自動削除されます。重い処理の結果をキャッシュするのに使います。
WordPressのfunctions.phpにsitemap.xmlを動的生成・配信する機能を追加してください。
仕様：
– /sitemap.xml でアクセスしたらXMLを返して終了
– サブディレクトリインストール対応（home_url()からパスを取得してマッチング）
– ob_clean()で余分な出力をクリアしてから配信
– 含めるURL：トップページ / 投稿記事（全件・更新日降順）/ 固定ページ / カテゴリ / タグ
– URLエスケープはhtmlspecialchars(ENT_XML1)を使用（esc_url不可）
– 最終更新日はget_post_modified_time()で取得
– Transientでキャッシュ（24時間）
– 投稿・固定ページ更新時にキャッシュ自動クリア
13. llms.txtの動的生成・配信
AIクローラー向けにサイト情報をMarkdown形式で配信するllms.txtを実装するプロンプトです。管理画面から設定変更できます。
AIがサイトの内容を効率よく読み取るためのガイドファイル。robots.txtのAI版のようなもので、
/llms.txt に設置します。WordPressのfunctions.phpにllms.txtを動的生成・配信する機能を追加してください。
仕様：
– /llms.txt でアクセスしたらtext/plainで返して終了
– llmstxt.org仕様に準拠したMarkdown形式
– 自動生成内容：サイト概要 / 固定ページ一覧（タイトル・URL・抜粋）/ カテゴリ別投稿一覧（タイトル・URL・更新日・抜粋）
管理画面（設定 > llms.txt）で以下を設定可能：
サイト紹介文 / AIガイドライン / 除外固定ページID / 除外カテゴリID / カテゴリごとの最大記事数 / キャッシュ時間
– 設定ページにリアルタイムプレビューを表示
– 投稿・固定ページ更新時にキャッシュ自動クリア
14. カードコンポーネントの高さ統一
記事カードの高さをCSSとPHPの両面から均一に揃えるプロンプトです。カルーセルでも一覧でも崩れません。
CSSで文章を指定行数で切り捨てて「…」を表示するプロパティ。タイトルや抜粋の長さを揃えるのに使います。
WordPressテーマの記事カードの高さを均一に揃えてください。
対象ファイル：style.css / template-parts/post-card.php
CSS側：
– .article-card に height:100%
– カード内タイトル（h3）を-webkit-line-clamp:2 + min-heightで2行固定
– 抜粋文（p）を-webkit-line-clamp:3 + min-heightで3行固定
– .entry-meta に margin-top:auto でメタ情報を下端固定
– カルーセルの.carousel-slideをdisplay:flexにして内部カードをflex:1
PHP側（post-card.php）：
– 抜粋を一定文字数（例：60文字）で統一
– 省略した場合のみ末尾に「…」を追加
– 二重「……」にならないよう既存の…を除去してから処理
15. コードブロックへのコピーボタン追加
記事内のコードブロックすべてに自動でコピーボタンを追加するプロンプトです。
JavaScriptからクリップボードへのコピー操作を行うブラウザのAPI。古いブラウザでは
execCommandでフォールバックします。WordPressテーマの記事本文内のコードブロックにコピーボタンを追加してください。
仕様：
– .article-content pre 要素すべてに自動でボタンを追加
– ボタンは右上に絶対配置（preをposition:relativeに）
– Clipboard APIでコピー、非対応ブラウザはexecCommandでフォールバック
– コピー後2秒間「コピーしました」に変えて元に戻す
– 複数コードブロックがあっても各自独立して動作
– DOMContentLoaded後に初期化
– デザイン：黒背景コードブロックに合わせた半透明スタイル
16. おすすめ記事メタボックス
投稿編集画面から「おすすめ記事」を最大5件手動設定できるメタボックスのプロンプトです。フロントでカルーセル表示されます。
WordPressのfunctions.phpに投稿編集画面用の「おすすめ記事」メタボックスを追加してください。
仕様：
– 投稿タイプ「post」のみに表示
– 既存の公開済み記事をセレクトボックスから選択して追加
– 最大5件、重複チェック付き、×ボタンで個別削除
– 選択した記事はhidden inputで保存
– JavaScriptでDOM操作（ReactやjQuery不要）
– nonce検証・権限チェック・自動保存スキップ
– フロントエンドではsingle.phpで記事下部にカルーセル表示
17. バージョン文字列除去（管理画面除外）
CSSやJSのURLに付く ?ver= をフロントのみ除去するプロンプトです。管理画面を除外しないとブロックエディタが壊れます。
現在のリクエストがWordPress管理画面かどうかを判定する関数。管理画面では適用したくない処理に必ずこの条件を入れます。
WordPressのfunctions.phpにCSSとJSのバージョン文字列（?ver=）を除去するコードを追加してください。
ただし、管理画面（is_admin()）では除去しないこと。ブロックエディタのスタイルシート読み込みエラーの原因になるため。
18. セキュリティ強化（不要な情報の削除）
WordPressのバージョン情報など、攻撃者に手がかりを与える情報をまとめて削除するプロンプトです。
WordPressのfunctions.phpに以下のセキュリティ設定を追加してください。
– wp_head()からWordPressバージョン情報を削除（wp_generator）
– xmlrpc.phpを無効化
– RSSフィードのコメントフィードを非表示
– REST APIのWPバージョン情報を非表示
– rel=”next” rel=”prev”を非表示
– 管理画面のフッターテキストを削除
– メディア挿入時のsrcset除去（wp_calculate_image_srcset フィルター）
19. SVG・WebPのアップロード許可
WordPressのメディアライブラリにSVGとWebPをアップロードできるようにするプロンプトです。セキュリティ上の注意点も含めます。
WordPressのfunctions.phpにSVGとWebP画像のアップロードを許可する設定を追加してください。
– upload_mimes フィルターでsvg/svgz/webpを追加
– wp_check_filetype_and_ext フィルターでMIMEタイプ検証を通過させる
– メディアライブラリでSVGをサムネイル表示できるようwp_prepare_attachment_for_jsを修正
– セキュリティ注意（信頼できるユーザーのみのサイト向け）のコメントを記載
20. ブロックエディタとフロントの表示統一
記事編集画面（Gutenberg）の見た目をフロントエンドと揃えるためのeditor-style.cssを整備するプロンプトです。
ブロックエディタ（Gutenberg）専用のCSSを読み込ませるWordPressの関数。style.cssとは別ファイルで管理します。
WordPressテーマのブロックエディタ（Gutenberg）の表示をフロントエンドと統一してください。
– add_editor_style() でエディタ専用CSSファイルを読み込む（style.cssは使わない）
– editor-style.css に以下を定義：
– 基本フォント・行高・文字色
– h2〜h6の見出しスタイル（フロントと同じ装飾）
– コードブロック（背景黒・白文字）
– 入力テキストエリア・contenteditableも黒背景で統一
– テーブル・引用・セパレータ・ボタンブロック
コードブロックの注意点：
– 外枠（.wp-block-code）はpadding:0にして背景色のみ設定
– 実際の入力エリア（textarea/[contenteditable]）にpadding:20px 24pxを設定
21. アーカイブタイトルからプレフィックスを削除
「カテゴリー：」「タグ：」などのWordPress自動付与テキストを削除するプロンプトです。
WordPressのfunctions.phpにget_the_archive_titleフィルターを追加して、「カテゴリー:」「タグ:」などのプレフィックスを削除してください。
ページ種別ごとに適切な文字列を返してください：
– カテゴリ：single_cat_title()
– タグ：single_tag_title()
– タクソノミー：single_term_title()
– 年別：Y年
– 月別：Y年n月
– 日別：Y年n月j日
22. 月別アーカイブのプルダウン（サイドバー）
サイドバーに月別アーカイブをプルダウンで表示するウィジェット用関数のプロンプトです。
WordPressのfunctions.phpに月別アーカイブをプルダウン形式で出力する関数を作成してください。
– DBから公開済み投稿の年月を取得して<select>を生成
– 現在表示中のアーカイブページをselectedにする
– onchangeでlocation.hrefに移動
– sidebar.phpから関数呼び出しで使用
23. SNSシェアボタン（SVGアイコン）
外部ライブラリ不要でX（旧Twitter）・Facebook・LINEのシェアボタンをSVGアイコンで実装するプロンプトです。
WordPressテーマのsingle.phpに外部ライブラリを使わないSNSシェアボタンを追加してください。
対象SNS：X（旧Twitter）/ Facebook / LINE
仕様：
– SVGアイコンをインライン直書き（Font Awesomeなどのライブラリ不要）
– 「シェアする」テキストの横にアイコンを丸いボタンで並べる
– 各SNSのシェアURLを動的生成（get_permalink() / get_the_title()使用）
– 別タブで開く（target=”_blank” rel=”noopener noreferrer”）
– ホバーでopacity低下 + 1px上に浮くアニメーション
– 配置：著者ボックスの前
24. 前後記事ナビゲーション（同カテゴリ内）
同じカテゴリの中で前後の記事へ移動できるナビゲーションを実装するプロンプトです。
WordPressテーマのsingle.phpに同カテゴリ内の前後記事ナビゲーションを追加してください。
仕様：
– get_previous_post() / get_next_post() で同カテゴリ内の記事を取得
– 2カラムグリッド（前の記事：左 / 次の記事：右）
– 「← 前の記事」「次の記事 →」をボタンスタイルで表示
– 記事タイトルはボタンの下に2行で切り捨て表示
– 片方しかない場合は空欄（ホバー・枠線なし）
– スマホでは縦並び
– 配置：著者ボックスの後
まとめ：プロンプトをうまく使うコツ
24のプロンプトを紹介しましたが、コピペする前にいくつかの点を確認してください。
- バージョンを明記する：「WordPress 6.7」「PHP 8.2」など環境を伝えると精度が上がります
- 既存コードを一緒に渡す：「このfunctions.phpに追加して」と既存コードを貼ると、構造を壊さずに追記してくれます
- エラーはそのまま貼る：動かないときはエラーメッセージをそのままAIに渡すのが最速の解決策です
- 変更後はパーマリンク再保存を：URLに関わる変更（4・5番）は設定→パーマリンクを「変更を保存」してルールをフラッシュしてください
WordPressテーマ開発全体の進め方についてはWordPressテーマのカスタマイズをAIで加速させる実践的な方法もあわせて参考にしてください。
