テーマ

開発環境が完全にセットアップされると、テーマモジュールのスケルトンの構築を開始できます。 この章では、次の方法について説明します。

• ウェブサイトビルダーの標準オプションとテンプレートを有効/無効にします。

• デザインに使用する色とフォントを定義します。

• Bootstrap変数を最大限に活用します。

• カスタムスタイルと JavaScript を追加します。

テーマモジュール

Odooには、最小限の構造とレイアウトを提供するデフォルトのテーマが付属しています。新しいテーマを作成すると、デフォルトのテーマを拡張します。

開発環境でOdooを実行するときは、`addons-path`コマンドライン引数にモジュールを含むディレクトリを追加してください。

技術的な名前

最初のステップは、新しいディレクトリを作成することです。

website_airproof

注釈

website_ でプレフィックスを付け、小文字の ASCII 英数字とアンダーバーのみを使用します。

このドキュメントでは、例として Airproof (架空のプロジェクト) を使用します。

ファイル構造

Odooモジュールのようにテーマがパッケージ化されています。基本的なWebサイトを設計している場合でも、モジュールのようにテーマをパッケージ化する必要があります。

website_airproof
├── data
├── i18n
├── static
│   ├── description
│   ├── fonts
│   ├── lib
│   ├── shapes // Shapes for background
│   └── src
│       ├── img
│       │   ├── content // For those used in the pages of your website
│       │   └── wbuilder // For those used in the builder
│       ├── js
│       ├── scss // Theme specific styles
│       └── snippets // custom snippets
├── views
├── __init__.py
└── __manifest__.py

フォルダ	説明
データ	プリセット、メニュー、ページ、画像、図形、 … (*.xml)
i18n	翻訳 (*.po, *.pot)
lib	外部ライブラリ (*.js)
static	Custom assets (*.jpg, *.gif, *.png, *.svg, *.pdf, *.scss, *.js)
ビュー	カスタムビューとテンプレート (*.xml)

初期化

Odoo モジュールは :file:`__init__の Python パッケージでもあります。 y`ファイルには、モジュール内のさまざまなPythonファイルのインポート命令が含まれています。このファイルは、今のところ空のままにできます。

宣言

Odoo モジュールは、マニフェストファイルによって宣言されます。このファイルは、Python パッケージを Odoo モジュールとして宣言し、モジュールのメタデータを指定します。 少なくとも`name`フィールドは必須です。通常はもっと多くの情報が含まれています。

/website_airproof/__manifest__.py

{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '18.0.0',
   'author': '...',
   'license': '...',
   'depends': ['website'],
   'data': [
      # ...
   ],
   'assets': {
      # ...
   },
}

フィールド	説明
名前（name）	モジュールの読みやすい名前 (必須)
説明	reStructuredText のモジュールの拡張説明
カテゴリー	御堂内の分類分類
バージョン	このモジュールのアドレス指定されたOdooバージョン
作成者	モジュール作成者の名前
ライセンス	デフォルトでは、`LGPL-3`ライセンスを使用しています。 :ref:`モジュールマニフェスト <reference/module/manifest>`のページで詳細を確認してください。
依存する	Odoo モジュールは、このモジュールの前にロードする必要があります。このモジュールは、作成された機能を使用するか、定義されたリソースを変更するためです。
データ	XML ファイルのリスト
資産	SCSS と JS ファイルの一覧

注釈

• 上記のファイル構造は単なる提案です。 プロジェクトに必要な数だけフォルダを追加できます。例えば、コントローラを含める場合は /controllers 、バックエンドビューの場合は /views/backend などです。

• ウェブサイトのテーマを作成するには、ウェブサイトアプリをインストールするだけです。 他のアプリ(ブログ、イベント、eCommerce、...)が必要な場合は、追加することもできます。

• Odooのバージョンとメジャー番号は必須ですが、パッチ番号は任意です。 モジュールを実行するために必要なバージョンのOdooを指定したい場合は、5つの引数構造を使用する必要があります。 最初の2つの引数を使用して、現在のOdooバージョン(`* = 18)を示します。 )

例: 18.0.1.0.0 odoo_major.odoo_minor.module_major.module_minor.module_patch

警告

ワイルドカード表記を使用した自動ファイル包含機能 (例: /myfolder/*.scss) は、Odoo SaaS データベースでは動作しません。この場合、マニフェストに各ファイルを手動で含めてください。

デフォルトのオプション

まず、Odooのデフォルトオプションを使用してテーマを構築します。これにより、2つのことが保証されます。

1. すでに存在するものを再発明することはありません。 例えば、Odoo はフッターに境界線を追加するオプションを提供しているので、自分で再コードするべきではありません。 代わりに、最初にデフォルトオプションを有効にし、必要に応じて拡張します。

2. ユーザーはOdooのすべての機能をあなたのテーマで使用することができます。 たとえば、フッターの外枠を再コードする場合。 デフォルトのオプションを壊したり、役に立たないようにしたり、ユーザーに悪い経験を与えたりすることができます。 また、他のOdoo機能がそれに依存する可能性があるため、再コードはデフォルトオプションと同様に動作しない場合があります。

ちなみに

• インデントレベルごとに4つのスペースを使用します。

• タブを使用しない。

• スペースとタブをミックスしないでください。

関連項目

Odoo コーディングガイドライン

Odoo 変数

Odoo は、関連する SCSS 変数をオーバーライドすることで、多くの CSS ルールを宣言しています。 これを行うには、 primary_variables.scss ファイルを作成し、それを _assets_primary_variables バンドルに追加します。

宣言

/website_airproof/__manifest__.py

'assets': {
   'web._assets_primary_variables': [
      'website_airproof/static/src/scss/primary_variables.scss',
   ],
},

ソースコードを読み取ることで、オプションに関連する変数が簡単に分かります。

<we-button title="..."
   data-name="..."
   data-customize-website-views="..."
   data-customize-website-variable="'Sidebar'"
   data-img="..."/>

これらの変数は、例えば、`$o-website-value-palettes`マップから上書きできます。

グローバル

宣言

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      // Templates
      // Colors
      // Fonts
      // Buttons
      // ...
   ),
);

ちなみに

そのファイルには、SCSS 変数とミックスインの定義とオーバーライドのみが含まれている必要があります。

関連項目

主要変数 SCSS

フォント

ウェブサイトに任意のフォントを埋め込むことができます。ウェブサイトビルダーは自動的にフォントセレクタで利用可能にします。

宣言

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   <font-name>: (
      'family': <css font family list>,
      'url' (optional): <related part of Google fonts URL>,
      'properties' (optional): (
         <font-alias>: (
            <website-value-key>: <value>,
            ...,
         ),
      ...,
   )
)

使用

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'font':                             '<font-name>',
      'headings-font':                    '<font-name>',
      'navbar-font':                      '<font-name>',
      'buttons-font':                     '<font-name>',
   ),
);

Googleフォント

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   'Poppins': (
      'family':                         ('Poppins', sans-serif),
      'url':                            'Poppins:400,500',
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

カスタムフォント

まず、カスタムフォントを宣言する特定の SCSS ファイルを作成します。

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/font.scss',
   ],
},

次に、 @font-face ルールを使用して、カスタムフォントをウェブサイトに読み込むことができます。

/website_airproof/static/src/scss/font.scss

@font-face {
   font-family: "My Custom Font", Helvetica, Helvetica Neue, Arial, sans-serif;
   font-weight: 400;
   font-style: normal;
   src: url('/fonts/my-custom-font.woff') format('woff'),
        url('/fonts/my-custom-font.woff2') format('woff2');
}

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   'Proxima Nova': (
      'family':                         ('Proxima Nova', sans-serif),
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

ちなみに

フォントには .woff や .woff2 を使用することをお勧めします。

色

ウェブサイトビルダーは、5つの名前付き色で構成されるパレットに依存しています。テーマにそれらを定義すると、一貫性が保たれます。

色	説明
o-color-1	プライマリ（プライマリ）
o-color-2	Secondary
o-color-3	追加（ライト）
o-color-4	白くする
o-color-5	Blackish

宣言

/website_airproof/static/src/scss/primary_variables.scss

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-color-1':                    #bedb39,
         'o-color-2':                    #2c3e50,
         'o-color-3':                    #f2f2f2,
         'o-color-4':                    #ffffff,
         'o-color-5':                    #000000,
      ),
   )
);

作成したパレットをウェブサイトビルダーが提供するパレットのリストに追加します。

$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'airproof');

使用

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'color-palettes-name':              'airproof',
   ),
);

色の組み合わせ

以前に定義した5つのカラーパレットに基づいて、ウェブサイトビルダーは自動的に5つのカラーコンビネーションを生成します。 背景、テキスト、見出し、リンク、プライマリボタン、およびセカンダリボタンの色を定義しています。 これらの色はユーザーによって後でカスタマイズすることができます。

色の組み合わせで使用される色はアクセス可能で、特定の接頭辞（カラーの組み合わせ`の場合は`o-cc）を使用して`$o-color-palettes`で上書きすることができます。

/website_airproof/static/src/scss/primary_variables.scss

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (

         'o-cc*-bg':                     'o-color-*',
         'o-cc*-text':                   'o-color-*',
         'o-cc*-headings':               'o-color-*',
         'o-cc*-h2':                     'o-color-*',
         'o-cc*-h3':                     'o-color-*',
         'o-cc*-h4':                     'o-color-*',
         'o-cc*-h5':                     'o-color-*',
         'o-cc*-h6':                     'o-color-*',
         'o-cc*-link':                   'o-color-*',
         'o-cc*-btn-primary':            'o-color-*',
         'o-cc*-btn-primary-border':     'o-color-*',
         'o-cc*-btn-secondary':          'o-color-*',
         'o-cc*-btn-secondary-border':   'o-color-*',

      ),
   )
);

注釈

`o-cc*`の場合、`*`を所望の色の組み合わせに対応する数字（1 - 5）に置き換えます。

既定のテキストの色は o-color-5 です。背景が暗すぎると、自動的に o-color-4 に変わります。

関連項目

SCSS

デモページ

ウェブサイトビルダーはテーマカラーパレットの色の組み合わせを表示するページを自動的に生成します: http://localhost:8069/website/demo/color-combinations

Gradients

メニュー、ヘッダー、フッター、著作権バーのグラデーションを、 primary_variables.scss ファイルから直接定義することもできます。

宣言

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'menu-gradient': linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%),
      'header-boxed-gradient': [your-gradient],
      'footer-gradient': [your-gradient],
      'copyright-gradient': [your-gradient],
   ),
);

ブートストラップ変数

OdooにはデフォルトでBootstrapが含まれています。フレームワークのすべての変数とミックスインを使用できます。

Odooが探している変数を提供していない場合、それを許可するBootstrap変数が存在する可能性があります。 実際、すべての Odoo レイアウトは Bootstrap 構造を尊重し、Bootstrapコンポーネントまたは拡張機能を使用します。 Bootstrap変数をカスタマイズする場合は、ユーザーウェブサイト全体に一般的なスタイルを追加します。

_assets_frontend_helpers バンドルに追加された専用ファイルを使用してブートストラップの値を上書きし、 primary_variables.scss ファイルを上書きします。

宣言

/website_airproof/__manifest__.py

'assets': {
   'web._assets_frontend_helpers': [
      ('prepend', 'website_airproof/static/src/scss/bootstrap_overridden.scss'),
   ],
},

使用

/website_airproof/static/src/scss/bootstrap_overridden.scss

// Typography
$h1-font-size:                 4rem !default;

// Navbar
$navbar-nav-link-padding-x:    1rem!default;

// Buttons + Forms
$input-placeholder-color:      o-color('o-color-1') !default;

// Cards
$card-border-width:            0 !default;

ちなみに

そのファイルには、SCSS 変数とミックスインの定義とオーバーライドのみが含まれている必要があります。

警告

Odoo変数に依存するBootstrap変数を上書きしないでください。そうでなければ、Website Builderを使用してユーザーがカスタマイズできる可能性があります。

オプションが primary_variables (primary_variables) で変数によって定義された場合。 css と Boostrap変数では、常にプライマリ変数をオーバーライドする必要があります。 bootstrap_overridden.scss を使って、プライマリ変数に何も存在しない場合にのみ実行してください。

関連項目

Bootstrap overridden SCSS

デモページ

http://localhost:8069/website/demo/bootstrap

フォントのサイズ

Odoo には CSS フォントサイズクラスがあり、スタイル (フォントサイズ) とセマンティック (タグとスタイル全般) を分離します。 どちらのロジックもより柔軟に組み合わせることができます。

関連項目

Bootstrap表示見出し

テキストのスタイル

Odooのウェブサイトビルダーでは、テキストのスタイルを選択することができます。いくつかは、余分なCSSクラスを持たない`Header`のようなタグに関連付けられています。 他のタグとスタイルを組み合わせて、Header 1 Display のように直接適用します。

<!-- h1 with display heading sizes -->
<h1 class="display-1">Heading 1 with Display Heading 1 size</h1>
<h1 class="display-2">Heading 1 with Display Heading 2 size</h1>
<h1 class="display-3">Heading 1 with Display Heading 3 size</h1>
<h1 class="display-4">Heading 1 with Display Heading 4 size</h1>

<!-- Lead text - named "Light" in the dropdown -->
<p class="lead">A text typically used as an introduction.</p>

<!-- Small text -->
<p class="o_small">Body text with a smaller size.</p>

サイジングクラス

サイジングクラスは、新しく作成された span タグにターゲット要素内に追加されます (以下の例を参照)。

見出しと本文テキスト

これらのクラスを任意のテキスト要素に適用できると仮定するには、以下の例として h2 を取ります。

<!-- h2 sized like an h1 -->
<h2><span class="h1-fs">Heading</span></h2>

<!-- h2 sized with other heading sizes -->
<h2><span class="h2-fs">Heading</span></h2>
<h2><span class="h3-fs">Heading</span></h2>
<h2><span class="h4-fs">Heading</span></h2>
<h2><span class="h5-fs">Heading</span></h2>
<h2><span class="h6-fs">Heading</span></h2>

<!-- h2 sized like a normal paragraph (base size, 16px by default) -->
<h2><span class="base-fs">Heading</span></h2>

<!-- h2 sized like a small text (14px by default) -->
<h2><span class="o_small-fs">Heading</span></h2>

見出しを表示

より大きなタイトルが必要な場合は、 `display-1`から`6`までの BootstrapのDisplay Headingsクラスを使用します。

<h2><span class="display-1-fs">Heading</span></h2>
<h2><span class="display-2-fs">Heading</span></h2>
<h2><span class="display-3-fs">Heading</span></h2>
<h2><span class="display-4-fs">Heading</span></h2>

注釈

ウェブサイトビルダーでは、Display 1 から Display 4 までのサイズのみを設定できます。 他のサイズ(5`と`6)を設定すると、コード内でそれらを使用できますが、Website Builderのインターフェイス内ではユーザーがそれらを直接変更することはできません。

ウェブサイトの設定

ウェブサイトに関連するグローバルオプションは、以下の構造に従ってウェブサイトの記録を介して設定することができます。

宣言

/website_airproof/data/website.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <record id="website.default_website" model="website">
      <field name="name">Airproof</field>
      <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo_airproof.png"/>
      <field name="favicon" type="base64" file="website_airproof/static/description/favicon.png" />
      <field name="shop_ppg">18</field>
      <field name="shop_ppr">3</field>
      <field name="cookies_bar" eval="True" />
      <field name="contact_us_button_url">/contact-us</field>
      <field name="social_facebook">https://www.facebook.com/Airproof</field>
      <field name="social_instagram">https://www.instagram.com/airproof</field>
      <field name="social_linkedin">https://www.linkedin.com/company/airproof</field>
      <field name="social_youtube">https://www.youtube.com/c/airproof</field>
   </record>
</odoo>

フィールド	説明
名前（name）	ウェブサイトの名前 (ブラウザに表示)
ロゴ	ロゴへのパス (以前にレコードに作成)
favicon	ファビコンへのパス
shop_pg	Eコマース内のページあたりの商品数
shopp_pr	Eコマース内の行ごとに表示される商品の数
cookie_bar	Cookie バーを有効/無効にする
contact_us_button_url	Contact us ページのURL (例えば標準ヘッダテンプレートで使用されている場合)。
social_facebook	Facebook プロファイルの URL
social_instagram	InstagramプロフィールのURL
social_linkedin	LinkedIn 会社のプロフィールの URL
social_youtube	YouTube チャンネルの URL

注釈

website.default_website は、1つのウェブサイトで作業するときのデフォルトの参照です。 データベースに複数のウェブサイトがある場合、このレコードはデフォルトのサイト(最初のサイト)を参照します。

ビュー

いくつかのオプションでは、「ウェブサイトビルダー」変数に加えて、特定のビューを有効にする必要があります。

ソースコードを読み込むことで、オプションに関連するテンプレートが簡単に見つかります。

<we-button title="..."
   data-name="..."
   data-customize-website-views="website.template_header_default"
   data-customize-website-variable="'...'"
   data-img="..."/>

<template id="..." inherit_id="..." name="..." active="True"/>
<template id="..." inherit_id="..." name="..." active="False"/>

プリセット

ビューをプリセットとして有効または無効にするには、 presets.xml ファイルの中に含める必要があります。

使用

/website_airproof/data/presets.xml

<record id="module.view" model="ir.ui.view">
      <field name="active" eval="False"/>
</record>

Example

メニューアイテムの水平配置を変更

/website_airproof/data/presets.xml

<record id="website.template_header_default_align_center" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

同じロジックが他の Odoo アプリにも使用できます。

eCommerce - 製品カテゴリを表示

/website_airproof/data/presets.xml

 <record id="website_sale.products_categories" model="ir.ui.view">
    <field name="active" eval="False"/>
 </record>

ポータル - 言語セレクターを無効にします

/website_airproof/data/presets.xml

<record id="portal.footer_language_selector" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

資産

この部分については、webモジュールにある`assets_frontend` バンドルを参照します。 このバンドルはウェブサイトビルダーによってロードされたアセットのリストを指定します そして目標は、SCSS と JS ファイルをバンドルに追加することです。

これはウェブサイトで頻繁に使用されるバンドルの一覧です。

バンドル	説明
web._assets_primary_variables	主に primary_variables.scss ファイルに使用されます。
web._assets_secondary_variables	主に secondary_variables.scss ファイルに使用されます。
web._assets_frontend_helpers	主に bootstrap_overridden.scss ファイルに使用されます
web.assets_frontend	すべてのカスタム SCSS、JS または QWeb JS ファイルを追加できます
website.assets_wysiwyg	ウェブサイトビルダーのオプションの動作に関連するJSファイルを追加します（例えば、カスタムビルドブロックのカスタムメソッド）
website.assets_wysiwyg	BootstrapユーティリティAPIを拡張する必要がある場合、例えば、

Styles

ウェブサイトビルダーとBootstrapは、ウェブサイトの基本的なスタイルを定義するのに最適です。 しかし、ユニークなものを設計するには、さらに一歩進む必要があります。これのために、簡単にSCSSファイルをテーマに追加できます。

宣言

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/theme.scss',
   ],
},

Bootstrapファイルと、 :file:`theme.scss`ファイルのOdooで使用されている変数を自由に再利用できます。

Example

/website_airproof/static/src/scss/theme.scss

 blockquote {
   border-radius: $rounded-pill;
   color: o-color('o-color-3');
   font-family: o-website-value('headings-font');
 }

インタラクティビティ

Odoo は 3 種類の JavaScript ファイルをサポートしています。

• plain JavaScript files (no module system)

• native JavaScript module, and

• Odoo modules (カスタムモジュールシステムを使用)

ほとんどの新しいOdoo JavaScriptコードは、ネイティブJavaScriptモジュールシステムを使用する必要があります。 これにより、IDEとの統合がより簡単になり、開発者エクスペリエンスが向上するというメリットが得られます。

宣言

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/js/theme.js',
   ],
},

注釈

外部ライブラリからファイルを含める場合は、モジュールの /lib フォルダに追加できます。

ちなみに

• リンター(JSHint、...)を使用します。

• minified JavaScript ライブラリを追加しないでください。

• 旧式の各モジュールの先頭に use strict'; を追加します (これは新しいモジュールの場合は自動的に行われます)。

• JavaScript でターゲットとする要素に js_ 接頭辞付きの CSS クラスを使用します。

• 変数と関数は snake_cased (my_variable) の代わりに camelCased (my_variable) でなければなりません。

• 変数 event に名前を付けないでください。代わりに `ev`を使用してください。 これは、Chrome以外のブラウザのバグを回避するためです。 としてChromeは魔法のようにグローバル変数を割り当てています (ですから、宣言せずに変数`event`を使用する場合)。 Chromeでは正常に動作しますが、他のブラウザではクラッシュします)。

• 厳密な比較（==`の代わりに`===）を使用してください。

• すべてのテキスト文字列(Hello"`など)に二重引用符を、CSSセレクタである.x_nav_item`などの他のすべての文字列に単一引用符を使用してください。

• ネイティブの標準JS関数(start()、willStart()、`cleanForSave()`など)を使用している場合は、必ず`this._super.apply(これ、引数)`を呼び出してください。(標準コードで必要かどうかを確認してください)。

関連項目

• Odoo JavaScript コーディングガイドライン

• Odoo JavaScript フレームワークの概要

• Odoo Experience Talk: 10 Tips to take your website design to the next level!