wp-theme-dev

WordPress テーマ開発

概要

公式の WordPress コーディング標準、WordPress.org のテーマ審査要件、WCAG 2.1 レベル AA のアクセシビリティ標準、最新のウェブ開発のベストプラクティスに準拠した、本番環境対応の WordPress テーマを作成します。このスキルで作成するすべてのテーマは、アクセシブルで、安全性と翻訳対応に優れ、パフォーマンスが高く、WordPress.org への申請に対応しています。

クイックスタートのワークフロー

1. リファレンスを読む — コードを書く前に、関連するリファレンスファイルを読みます。
   • references/block-theme-architecture.md — ブロックテーマの構造、theme.json、テンプレート、パターン
   • references/classic-theme-architecture.md — クラシックテーマの構造、テンプレート階層、The Loop
   • references/accessibility.md — WCAG 2.1 AA の要件、WordPress のアクセシビリティ対応基準
   • references/review-requirements.md — WordPress.org のテーマ審査チェックリスト（14 カテゴリー）
2. テーマの種類を決める — ブロックテーマ（推奨）、クラシックテーマ、子テーマのどれを希望するかユーザーに確認します。
3. 要件を確認する — デザインの目標、カラーパレット、タイポグラフィ、必要な機能を確認します。
4. ひな形を作成する — ディレクトリ構造、必須ファイル、theme.json を生成します。
5. テンプレートとパターンを作成する — 各テンプレート／パターンを個別のファイルとして作成します。
6. readme.txt を生成する — WordPress.org に準拠した readme.txt を必ず含めます。
7. 納品する — ダウンロード用のファイルにするか、指定したパスに保存するかをユーザーに確認します。

基本原則 — 必ず従うこと

1. ブロックテーマをデフォルトにする

ユーザーからクラシックテーマの明示的な依頼がない限り、常にブロックテーマ（フルサイト編集）を作成します。ブロックテーマは次のとおりです。

• HTML のテンプレートファイルを使用します（PHP のテンプレートファイルは使用しません）。
• theme.json を通じてデザインを設定します（PHP／CSS では設定しません）。
• サイトエディターによる完全なビジュアル編集に対応します。
• 再利用可能なレイアウトにブロックパターンを使用します。
• ヘッダー、フッター、サイドバーにテンプレートパーツを使用します。

ユーザーから明確に依頼された場合、またはクラシックテーマでのみ利用できる機能が必要な場合に限り、クラシックテーマを作成します。

2. 整理された functions.php

functions.php ファイルに含めるのは、次のものだけです。

• テーマのセットアップ（after_setup_theme フック）— テーマ機能への対応を宣言します。
• アセットのエンキュー（wp_enqueue_scripts フック）
• ブロックパターン、パターンカテゴリー、ブロックスタイルの登録
• ナビゲーションメニューの登録（クラシックテーマ）
• ウィジェットエリアの登録（クラシックテーマ）
• inc/ ディレクトリからの追加 PHP ファイルの読み込み

絶対に、長大なロジック、HTML の出力、複雑な機能を functions.php に直接記述しないでください。 追加機能は inc/ ディレクトリ内のファイルに分割します。

3. アクセシビリティ — 必須事項

すべてのテーマは、WCAG 2.1 レベル AA および WordPress のアクセシビリティ要件を満たす必要があります。これは任意ではありません。

要件の詳細については、references/accessibility.md をお読みください。主な必須項目は次のとおりです。

スキップリンク： 最初にフォーカス可能な要素とし、フォーカス時に表示され、メインコンテンツに移動できるようにします。

キーボード操作： すべてのインタラクティブ要素にキーボードで到達して操作できるようにします。フォーカス可能なすべての要素に、視認できるフォーカスインジケーターを表示します。フォーカス順序は論理的な読み上げ順序に沿わせます。

セマンティック HTML： 適切な HTML5 ランドマーク要素（<header>、<main>、<nav>、<aside>、<footer>）を使用します。補強として ARIA ランドマークロールを使用します。適切な見出し階層（1 ページにつき H1 は 1 つ、レベルを飛ばさない）を維持します。

カラーコントラスト： すべてのテキストは背景とのコントラスト比 4.5:1 を満たす必要があります（太字の 18px 以上、または通常の 24px 以上の大きなテキストは 3:1）。UI コンポーネントとフォーカスインジケーターは 3:1 を満たす必要があります。

コンテンツ内のリンク： 本文コンテンツ内のリンクには、必ず下線を付けます。太字、斜体、色だけで区別することは認められません。

フォーム： すべてのフォーム入力には、明示的な <label> 要素を付ける必要があります。プレースホルダーだけのラベルは使用しないでください。エラー状態はスクリーンリーダーで認識できる必要があります。

画像： すべての <img> タグに、意味のある alt 属性を指定する必要があります。装飾用の画像には alt="" を使用します。

スクリーンリーダー用テキスト： 視覚的には非表示でもアクセス可能なテキストには .screen-reader-text クラスを使用します。「続きを読む」リンク、アイコンのみのボタン、繰り返し表示されるリンクテキストに適用します。

繰り返し表示されるリンクテキスト： 「続きを読む」リンクには投稿タイトルを含める必要があります（視覚的に非表示でもかまいません）。

メディア： 埋め込みメディアを自動再生してはいけません。すべてのメディアにコントロールを用意します。

4. セキュリティ

• すべての出力をエスケープします：esc_html()、esc_attr()、esc_url()、wp_kses_post()
• すべての入力をサニタイズします：sanitize_text_field()、absint() など
• フォーム送信にはノンスを使用します
• 特権操作の前に、検証と権限の確認を行います
• eval()、ユーザーデータに対する base64_decode()、またはサニタイズせずに直接 $_GET／$_POST を使用してはいけません

5. WordPress コーディング標準

• すべての関数、クラス、フック、ハンドルに、4 文字以上の一意なテーマ接頭辞を付けます
• ユーザー向けの文字列はすべて翻訳可能にします：__()、_e()、esc_html__()、esc_html_e() など
• テキストドメインはテーマのスラッグと一致させます
• wp_enqueue_script()／wp_enqueue_style() を使用します。<script> や <link> タグをハードコードしてはいけません
• WordPress に同梱されているライブラリ（jQuery など）を使用し、独自のコピーを同梱してはいけません
• 圧縮ファイルを使用する場合は、元のソースも含めます
• WP_DEBUG を有効にしても、PHP エラー、警告、通知が発生しないようにします
• 非推奨の関数や定数を使用してはいけません

6. WordPress.org テーマ審査への準拠

すべてのテーマは、14 の審査カテゴリすべてに準拠する必要があります。references/review-requirements.md をお読みください。

主なルール：

• すべてのコード、画像、フォント、アセットに GPLv2 以降のライセンスを適用します
• 同梱するすべてのリソースの著作権とライセンスを readme.txt に記載します
• ユーザーの明示的な同意なしに、トラッキングやリモートリソースを使用してはいけません（Google Fonts は例外）
• プラグイン領域に属する機能（CPT、ショートコード、SEO、分析、問い合わせフォーム）を含めてはいけません
• 管理ダッシュボードを乗っ取ってはいけません。通知は非表示にできるようにします
• テーマの有効化時にリダイレクトしてはいけません
• 管理バーを削除または非表示にしてはいけません
• テーマ名に「WordPress」、「Theme」、「Twenty*」を使用してはいけません
• スクリーンショットは広告ではなく、実際のテーマの表示を示す必要があります
• 必須のヘッダーがすべて記載された完全な readme.txt を用意します

7. モダンな CSS とパフォーマンス

• テーマ設定には CSS カスタムプロパティ（変数）を使用し、theme.json のプリセットに合わせます
• モダンなレイアウトには CSS Grid と Flexbox を使用します（レイアウトに float を使用しません）
• 流動的なレスポンシブタイポグラフィと余白には clamp() を使用します
• RTL サポートには論理プロパティ（margin-inline、padding-block）を使用します
• モバイルファーストのレスポンシブデザインと min-width メディアクエリを使用します
• レンダリングを妨げるリソースを最小限に抑えます
• ファーストビューより下にある画像と iframe には loading="lazy" を使用します
• カスタムフォントには font-display: swap を使用します
• プライバシーとパフォーマンスを考慮し、Google Fonts よりもシステムフォントスタックまたはローカルホストのフォントを優先します

テーマタイプのリファレンス

ユーザーの希望	テーマタイプ	主要なリファレンス
ブロックテーマ／FSE テーマ	ブロックテーマ	references/block-theme-architecture.md
クラシック PHP テーマ	クラシックテーマ	references/classic-theme-architecture.md
既存のテーマを変更する	子テーマ	親テーマのタイプに応じて、いずれかのリファレンス
ハイブリッド方式	クラシック＋ブロック機能	両方のリファレンス

命名規則

ユーザーが指定したテーマ名から、すべての名前を導き出します。

要素	規則	例（テーマ：「Starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter Blue starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter starter"starter starter --> 表を修正します。
テーマスラッグ	小文字とハイフン	starter-blue
テキストドメイン	スラッグと同じ	starter-blue
関数プレフィックス	小文字とアンダースコア（4 文字以上）	stbl_
定数プレフィックス	大文字のスネークケース	STBL_
クラスプレフィックス	大文字の単語をアンダースコアで区切る	Starter_Blue_
ハンドル名	スラッグのプレフィックス	starter-blue-style
パターンカテゴリー	スラッグのプレフィックス	starter-blue
ブロックスタイル名	スラッグのプレフィックス	starter-blue/card-shadow

テーマ名から派生させた、4 文字以上の短いプレフィックスを選びます。

納品

テーマを構築した後：

1. ファイルの保存先をユーザーに尋ねます：
   • ダウンロード： /mnt/user-data/outputs/{theme-slug}/ にコピーし、ダウンロード可能なファイルとして提示します
   • カスタムパス： ユーザーが指定したパスに書き込みます
2. 必要なヘッダーをすべて含めて、readme.txt と style.css を必ず用意します
3. 生成したファイルの概要を簡潔に提示します
4. ビルドプロセスを使用する場合（カスタムブロックを含むブロックテーマ）は、npm install && npm run build が必要であることを伝えます

提出前のチェックリスト

• style.css に必須ヘッダー（テーマ名、作成者、バージョン、ライセンスなど）がすべて記載されている
• readme.txt が存在し、内容が完全で、リソースのクレジットが含まれている
• 出力がすべてエスケープされている（esc_html、esc_attr、esc_url、wp_kses_post）
• 入力がすべてサニタイズされている
• すべての文字列が正しいテキストドメインで翻訳可能になっている
• すべての関数／クラス／ハンドルにプレフィックス（4文字以上）が付いている
• スキップリンクがあり、最初にフォーカス可能な要素で、フォーカス時に表示される
• すべてのインタラクティブ要素でキーボードナビゲーションが機能する
• フォーカス可能なすべての要素でフォーカスインジケーターが表示される
• 見出し階層が適切である（H1は1つ、レベルを飛ばさない）
• コンテンツ内のリンクに下線が付いている
• 色のコントラストがWCAG 2.1 AAを満たしている（テキストは4.5:1、大きなテキスト／UIは3:1）
• すべての画像に適切なalt属性がある
• ARIAランドマークがあり、重複するランドマークにはそれぞれ固有のラベルが付いている
• 「続きを読む」リンクに投稿タイトルが含まれている（screen-reader-text）
• フォームに明示的な<label>要素がある
• WP_DEBUGでPHPエラー／警告／通知が発生しない
• 非推奨の関数を使用していない
• WPのデフォルトライブラリを同梱していない
• プラグインの領域に属する機能を含めていない
• 同意なしにリモートリソースを読み込まない
• 有効化時に管理画面へリダイレクトしない
• アセットが適切にエンキューされている（ハードコードされていない）
• すべてのブレークポイントでレスポンシブデザインが機能する
• 論理プロパティまたはRTLスタイルシートでRTLに対応している
• ライセンスがGPLv2以降である
• スクリーンショットが1200×900で、実際のテーマ出力を表している