theme-create

テーマ作成スキル

重要なルール

1. odoo/ または odoo/addons/ 内の Odoo コアは絶対に変更しないでください
2. テーマの SCSS で Odoo コアの変数と map-merge() を絶対に使用しないでください — 読み込み時には未定義です
3. Google Fonts に ir.asset レコードを絶対に使用しないでください — $o-theme-font-configs を使用してください
4. アセットバンドル内の primary_variables.scss には必ず ('prepend', ...) を使用してください
5. H6 は必ず 16px（1rem）です — 固定の基準サイズです
6. すべてのマニフェストに author: 'TaqaTechno'、website、support、license: 'LGPL-3' を含めてください

生成されるテーマ構造（v8.0）

theme_<name>/
├── __init__.py                      # Imports models
├── __manifest__.py                  # With proper asset bundles
├── models/
│   ├── __init__.py                 # Imports theme_<name>
│   └── theme_<name>.py             # theme.utils implementation (REQUIRED!)
├── security/
│   └── ir.model.access.csv
├── data/
│   ├── assets.xml                  # Minimal (fonts via SCSS, not ir.asset!)
│   ├── menu.xml
│   └── pages/                      # Individual page files (best practice)
│       ├── home_page.xml           # Inherits website.homepage
│       ├── aboutus_page.xml        # theme.website.page
│       ├── contactus_page.xml      # Inherits website.contactus
│       └── services_page.xml       # theme.website.page
├── views/
│   ├── layout/
│   │   └── templates.xml           # Base layout templates
│   └── snippets/
│       └── custom_snippets.xml
└── static/src/
    ├── scss/
    │   ├── primary_variables.scss   # Theme variables + font configs
    │   └── theme.scss               # Additional custom styles
    ├── js/
    │   └── theme.js                 # publicWidget implementations
    └── img/

マニフェストのテンプレート

{
    'name': 'Theme <Name>',
    'version': '<odoo_version>.0.1.0.0',
    'category': 'Theme/Creative',
    'summary': 'Custom theme for <client>',
    'author': 'TaqaTechno',
    'website': 'https://www.taqatechno.com/',
    'support': '[email protected]',
    'license': 'LGPL-3',
    'depends': ['website'],
    'data': [
        'security/ir.model.access.csv',
        'views/layout/templates.xml',
        'views/snippets/custom_snippets.xml',
        'data/menu.xml',
        'data/pages/home_page.xml',
        'data/pages/aboutus_page.xml',
        'data/pages/contactus_page.xml',
    ],
    'assets': {
        'web._assets_primary_variables': [
            ('prepend', 'theme_<name>/static/src/scss/primary_variables.scss'),
        ],
        'web.assets_frontend': [
            'theme_<name>/static/src/scss/theme.scss',
            'theme_<name>/static/src/js/theme.js',
        ],
    },
    'installable': True,
    'auto_install': False,
    'application': False,
}

SCSS の読み込み順序（重要）

1. YOUR theme's primary_variables.scss (via 'prepend')  ← FIRST
2. Odoo core primary_variables.scss                      ← SECOND
3. Other SCSS files

CONSEQUENCE:
  - CANNOT use map-merge() with core variables (they don't exist yet!)
  - MUST define standalone variables
  - Use 'color-palettes-name': 'default-1' to reference existing palettes

WRONG:  $o-color-palettes: map-merge($o-color-palettes, (...));
RIGHT:  $o-website-values-palettes: ( ( 'color-palettes-name': 'default-1' ) );

primary_variables.scss のテンプレート

// ===================================================================
// Theme: <Name> — Generated by TaqaTechno
// PREPENDED before Odoo core — DO NOT use map-merge()!
// ===================================================================

// === Font Configuration (STANDALONE) ===
$o-theme-font-configs: (
    'Inter': (
        'family': ('Inter', sans-serif),
        'url': 'Inter:300,300i,400,400i,500,500i,600,600i,700,700i',
    ),
);

// === Website Values Palette (MASTER CONFIGURATION) ===
$o-website-values-palettes: (
    (
        'color-palettes-name': 'default-1',

        // Typography
        'font': 'Inter',
        'headings-font': 'Inter',
        'navbar-font': 'Inter',
        'buttons-font': 'Inter',

        // Header (NO custom header.xml needed!)
        'header-template': 'default',
        'header-links-style': 'default',
        'logo-height': 3rem,
        'fixed-logo-height': 2rem,

        // Buttons
        'btn-padding-y': 0.45rem,
        'btn-padding-x': 1.35rem,
        'btn-border-radius': 0.25rem,

        // Footer (NO custom footer.xml needed!)
        'footer-template': 'default',
        'footer-scrolltop': true,

        // Links & Layout
        'link-underline': 'hover',
        'layout': 'full',
    )
);

// === Typography Multipliers ===
$o-theme-h1-font-size-multiplier: (64 / 16); // 64px
$o-theme-h2-font-size-multiplier: (48 / 16); // 48px
$o-theme-h3-font-size-multiplier: (32 / 16); // 32px
$o-theme-h4-font-size-multiplier: (24 / 16); // 24px
$o-theme-h5-font-size-multiplier: (20 / 16); // 20px
$o-theme-h6-font-size-multiplier: (16 / 16); // 16px (FIXED)

ページ作成パターン

ホームページ（website.homepage を継承）

<template id="view_home" inherit_id="website.homepage" name="Home">
    <xpath expr="//div[@id='wrap']" position="replace">
        <div id="wrap" class="oe_structure">
            
        </div>
    </xpath>
</template>

お問い合わせ（website.contactus を継承）

<template id="view_contact" inherit_id="website.contactus" name="Contact">
    <xpath expr="//h1" position="replace">
        <h1>Get in Touch</h1>
    </xpath>
</template>

カスタムページ（theme.website.page）

<template id="view_about" name="About">
    <t t-call="website.layout">
        <div id="wrap" class="oe_structure">
            <section class="s_title pt96 pb48">
                <div class="container"><h1>About Us</h1></div>
            </section>
        </div>
    </t>
</template>

<record id="page_about" model="theme.website.page">
    <field name="view_id" ref="view_about"/>
    <field name="is_published" eval="True"/>
    <field name="url">/about</field>
</record>

テーマミラーモデルのアーキテクチャ

theme.ir.ui.view (Template) → ir.ui.view (Actual, with website_id)
theme.website.page (Template) → website.page (Actual, with website_id)

各ウェブサイトには独立したコピーが用意されるため、複数のサイトでテーマを再利用できます。

theme.utils の有効化（必須）

すべてのテーマに models/theme_<name>.py を含める必要があります。

from odoo import models

class Theme<Name>(models.AbstractModel):
    _inherit = 'theme.utils'

    def _theme_<name>_post_copy(self, mod):
        """Called automatically when theme is installed on a website."""
        # Enable header template
        self.enable_view('website.template_header_default')
        # Enable footer template
        self.enable_view('website.template_footer_contact')
        # Show logo, not brand name
        self.enable_view('website.option_header_brand_logo')
        self.disable_view('website.option_header_brand_name')

メソッド名は必ず _theme_{technical_name}_post_copy としてください。technical_name はフォルダー名と一致させてください。

利用可能なメソッド：enable_view(xml_id)、disable_view(xml_id)、enable_asset(xml_id)、disable_asset(xml_id)

インストールとテスト

# 1. Update module list
python -m odoo -c conf/<PROJECT>.conf -d <DB> --update-list

# 2. Install theme
python -m odoo -c conf/<PROJECT>.conf -d <DB> -i theme_<name> --stop-after-init

# 3. If errors, auto-fix and retry (up to 3 attempts)

よくある自動修正パターン

エラー	修正方法
Undefined variable "$o-color-palettes"	map-merge を削除し、単独で定義する
Undefined variable "$o-theme-font-configs"	単独で定義する（map-merge は使用しない）
SyntaxError in SCSS	エラーの位置を解析し、構文を修正する
Module not found	マニフェストに依存関係を追加する
Malformed Google Fonts @import	ir.asset を削除し、$o-theme-font-configs を使用する

テストチェックリスト

• テーマがエラーなくインストールされる
• CSS のコンパイルが成功する
• ブラウザーコンソールに SCSS／JS エラーがない
• ヘッダーとフッターのスタイルが正しく適用される
• モバイル／タブレット／デスクトップでレスポンシブレイアウトが機能する
• ウェブサイトビルダー（編集モード）がエラーなく動作する

バージョン固有の注意事項

Odoo	Bootstrap	スニペット登録	主な違い
14-15	4.x	シンプルな XPath	ml-*／mr-* クラス
16-17	5.1.3	シンプルな XPath	ms-*／me-* クラス
18-19	5.1.3	グループが必須	snippet-group 属性が必要

115 個以上の SCSS 変数の完全なリファレンスについては、theme-scss スキルを参照してください。 Figma から Odoo へのワークフローとページテンプレートの照合については、theme-design スキルを参照してください。