moodle5-theme

Moodle 5 テーマ開発

Boost（Bootstrap 5.3）をベースに、Moodle 5.1.3 以降のテーマを作成・変更するためのスキルです。

クイックコンテキスト

Moodle 5.1 以降では Bootstrap 5.3 を使用し、テーマは public/theme/ 配下に配置されます。親テーマからのレイアウト継承は自動的に行われます。SCSS パイプラインは、pre-SCSS → main（preset）→ extra-SCSS の 3 つのフェーズで構成されます。テンプレートでは、Moodle 固有のヘルパー（{{#str}}、{{#pix}}、{{#js}}）を使う Mustache を使用します。

ワークフロー

1. ユーザーが必要としているものを把握する

コードを生成する前に、次の点を確認します。

• 新しいテーマですか、それとも既存のテーマですか？ 新規の場合は、必要なファイル一式を生成します。既存の場合は、テーマ名（Frankenstyle コンポーネント theme_name）を尋ねます。
• 何を変更したいですか？ スタイルや色（→ SCSS）、ページ構造（→ テンプレート／レイアウト）、管理者向けオプション（→ 設定）、レンダリングの動作（→ レンダラー）、アイコンや画像（→ pix_core/pix_plugins）。
• テーマ名：すべてのファイルで使用する Frankenstyle 識別子（theme_mytheme）。

2. 適切なリファレンスを確認する

変更の種類に応じて、コードを生成する前に該当するリファレンスファイルを読みます。

タスク	リファレンスファイル
新しいテーマの作成（ファイル一式の用意）	references/structure.md
スタイル、色、SCSS の変更	references/scss-pipeline.md
Mustache テンプレートのオーバーライド	references/templates.md
管理者向け設定の追加／変更	references/settings.md
レンダラーや出力のカスタマイズ	references/renderers.md
Bootstrap 4 から 5 への移行	references/bootstrap5-migration.md
キャッシュの問題やデバッグ	references/debugging.md

現在のタスクに関連するファイルのみを読みます。複数の領域にまたがるタスク（例：SCSS に影響する色設定の追加）では、両方のファイルを読みます。

3. 機能するコードを生成する

ファイルを生成するときは、次のルールに従います。

ファイル構成：すべてのテーマは public/theme/<name>/ 配下に配置します。ファイルを置く場所がユーザーに正確に伝わるよう、常に完全なパスを示します。

必須ファイル（新しいテーマの場合）：

• version.php — プラグインのメタデータ
• config.php — テーマ設定（継承、レイアウト、SCSS コールバック）
• lang/en/theme_<name>.php — 最低限必要な言語文字列
• lib.php — SCSS コールバックとヘルパー関数

コード規約：

• すべての PHP ファイルは <?php に続けて defined('MOODLE_INTERNAL') || die(); から始めます（<?php require_once... で始まるレイアウトファイルを除く）
• レンダラークラスには名前空間 theme_<name>\output を使用します
• 言語文字列は必ず lang ファイルに記述し、コードに直接記述しません
• SCSS 変数はプリセットでは !default を使用し、上書きを強制するため pre-SCSS では !default を付けません
• Mustache テンプレートには GPL ライセンスの定型文と @template アノテーションを含めます

SCSS — コンパイル順序： 順序は重要です。生成する SCSS はすべて、次の 3 つのフェーズに従う必要があります。

1. prescsscallback — Bootstrap の !default を上書きする変数
2. $THEME->scss — @import "moodle" を含むメインプリセット
3. extrascsscallback — カスケードの優先順位が最も高い最終ルール

Mustache テンプレート — オーバーライド： コアまたはプラグインのテンプレートをオーバーライドするには、テーマ内のパスを次のようにします。 theme/<name>/templates/<component>/<template>.mustache

<component> は Frankenstyle 名です。例：core、mod_quiz、block_myoverview など。

設定 — キャッシュの無効化： CSS／SCSS に影響する設定には、すべて次を含める必要があります。

$setting->set_updatedcallback('theme_reset_all_caches');

4. Bootstrap 5.3 — 最新のコード

生成するコードはすべて Bootstrap 5.3 の構文を使用する必要があります。

• 論理クラス：.ms-*、.me-*、.ps-*、.pe-*、.text-start、.text-end
• bs プレフィックス付きのデータ属性：data-bs-toggle、data-bs-target
• jQuery は使用しません。Bootstrap モジュールを直接インポートします
• .sr-only ではなく .visually-hidden を使用します

ユーザーが後方互換性を明示的に求めない限り、Bootstrap 4 の構文でコードを生成しないでください。

5. 納品

次の内容を含む、完全に動作するファイルを生成します。

• Moodle のインストール先に配置する正確なパス
• 自明でない箇所を説明するインラインコメント
• 該当する場合はインストール後の手順（キャッシュの消去、バージョンの更新）

SCSS またはテンプレートを変更する場合は、キャッシュを消去するようユーザーに伝えてください。

php admin/cli/purge_caches.php --theme
# Or more specifically:
php admin/cli/build_theme_css.php --themes=<name> --verbose

やり取りの例

ユーザー：「テーマ設定にカスタムの色フィールドを追加し、ヘッダーの色を変更したい」

手順：

1. references/settings.md と references/scss-pipeline.md を読みます
2. settings.php に admin_setting_configcolourpicker 設定を生成します
3. lang/en/theme_<name>.php に言語文字列を追加します
4. lib.php の get_pre_scss() で設定を SCSS 変数に割り当てます
5. ヘッダーに変数を使う SCSS ルールを scss/post.scss に作成します
6. set_updatedcallback('theme_reset_all_caches') を含めます