レイアウト¶

この章では、以下の方法を学びます。

カスタムヘッダーを作成します。
カスタムフッターを作成
標準テンプレートを変更します。
著作権セクションを追加する。
あなたのウェブサイトの応答性を向上させなさい。

デフォルト¶

Odooページは、クロスページとユニークな要素を組み合わせています。クロスページ要素はすべてのページで同じですが、ユニーク要素は特定のページに関連付けられています。デフォルトでは、ページにはヘッダーとフッターという 2 つのクロスページ要素があります。そしてそのページの特定の内容を含むユニークな主要な要素です

<div id="wrapwrap">
   <header/>
      <main>
         <div id="wrap" class="oe_structure">
            <!-- Page Content -->
         </div>
      </main>
   <footer/>
</div>

Odoo XMLファイルはエンコードの指定で始まります。その後、`<odoo>`タグの中にコードを書き込む必要があります。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
   ...
</odoo>

注釈

正確なテンプレート名を使用すると、すべてのモジュールの情報をすばやく見つけることが重要です。テンプレート名には小文字の英数字とアンダースコアのみが含まれている必要があります。

ファイルの最後に空行を常に追加します。これは、IDE を構成することで自動的に行うことができます。

XPath¶

XPath (XML Path Language) は、XML ドキュメント内の要素と属性を簡単にナビゲートすることができる式言語です。 XPath は標準の Odoo テンプレートを拡張するために使用されます。

ビューは次の方法でコーディングされています。

<template id="..." inherit_id="..." name="...">
   <!-- Content -->
</template>

属性	説明
ID	変更されたビューの ID
inherited from	標準ビューの ID (次のパターンを使用します: `module.template`)
名前（name）	修正されたビューの人間が読める名前

XPathごとに、**式**と**位置**の2つの属性を変更します。

Example

/website_airproof/views/website_templates.xml¶

<template id="layout" inherit_id="website.layout" name="Welcome Message">
   <xpath expr="//header" position="before">
      <!-- Content -->
   </xpath>
</template>

この XPath は、ページコンテンツの直前にウェルカムメッセージを追加します。

警告

デフォルトの要素の属性を置き換えるときは注意してください。テーマがデフォルトの属性を拡張すると、変更は将来のOdooアップデートよりも優先されます。

注釈

新しいテンプレートまたはレコードを作成するたびにモジュールを更新する必要があります。
ビューを継承する XML ID は、元のレコードと同じ ID を使用する必要があります。すべての継承を一目で見つけるのに役立ちます。最後の*XML ID*は、それらを作成するモジュールの前にあるので、重複はありません。

式¶

XPath は XML ドキュメント内のノードを選択するためにパス式を使用します。セレクタは、式の中で右の要素をターゲットにして使用されます。最も便利なものは以下にリストされています。

下位セレクター（下位セレクター	説明
/	ルートノードから選択。
//	ドキュメント内のノードを、どこにあっても選択に一致する現在のノードから選択します。

属性セレクター	説明
*	任意の XML タグを選択します。 `*` は、より正確に選択する必要がある場合、特定のタグに置き換えることができます。
*[@id="id"]	特定の ID を選択します。
*[hasclass("class")]	特定のクラスを選択します。
*[@name="name"]	特定の名前のタグを選択します。
*[@t-call="t-call"]	特定の t 呼び出しを選択します。

位置¶

位置は、コードをテンプレート内に配置する場所を定義します。可能な値は以下のとおりです:

位置	説明
置換える	ターゲットノードを XPath コンテンツに置き換えます。
中に	ターゲットノード内の XPath コンテンツを追加します。
前	ターゲットノードの前に XPath コンテンツを追加します。
変更後	XPath コンテンツをターゲットノードの後に追加します。
属性	属性内の XPath コンテンツを追加します。

Example

この XPath は、.breadcrumb クラスを持つ最初の要素を削除します。

<xpath expr="//*[hasclass('breadcrumb')]" position="replace"/>

This XPath adds an extra <li> element after the last child of the <ul> element.

<xpath expr="//ul" position="inside">
   <li>Last element of the list</li>
</xpath>

この XPath は、<div> の直下にある`<nav>` の前に`<header>`を追加します。

<xpath expr="//header/nav" position="before">
   <div>Some content before the header</div>
</xpath>

この XPath はヘッダのクラス属性内の x_airproof_header を削除します。この場合、separator 属性を使用する必要はありません。

<xpath expr="//header" position="attributes">
   <attribute name="class" remove="x_airproof_header" />
</xpath>

この XPath はヘッダのクラス属性に x_airproof_header を追加します。クラスの前にスペースを追加するには、 separator 属性を定義する必要があります。

<xpath expr="//header" position="attributes">
   <attribute name="class" add="x_airproof_header" separator=" "/>
</xpath>

この XPath は .o_footer_scrolltop_wrapper クラスを持つ要素を要素の前に移動します。: footer ID 属性

<xpath expr="//div[@id='footer']" position="before">
   <xpath expr="//div[@id='o_footer_scrolltop_wrapper']" position="move" />
</xpath>

ちなみに

他の XPath 内で move ディレクティブを使用すると、この種のディレクティブのみを使用することができます。

Example

良い例:

<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
</xpath>
<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<div><!-- Content --></div>
</xpath>

不正な例:

<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
<div><!-- Content --></div>
</xpath>

関連項目

この cheat sheet から XPath に関する詳細情報を見つけることができます。

QWeb¶

QWebはOdooが使用する主要なテンプレートエンジンで、主にHTMLフラグメントやページを生成するために使用されるXMLテンプレートエンジンです。

関連項目

QWeb テンプレートドキュメント。

カスタムフィールド¶

必要に応じて、データベースにデータを保存するカスタム項目を作成できます。

宣言¶

まず、フィールドを宣言するレコードを作成します。このフィールドは既存のモデルにリンクする必要があります。

/website_airproof/data/fields.xml¶

<record id="x_post_category" model="ir.model.fields">
   <field name="name">x_post_category</field>
   <field name="field_description">...</field>
   <field name="ttype">html</field>
   <field name="state">manual</field>
   <field name="index">0</field>
   <field name="model_id" ref="website_blog.model_blog_post"/>
</record>

注釈

Python を使用してフィールドを作成することもできます (そして推奨します)。

バックエンド¶

XPathを介して関連するビューにフィールドを追加します。したがって、ユーザーはインターフェイス内のフィールドを表示し、その後にフィールドを埋めることができます。

/website_airproof/views/backend/website_blog_views.xml¶

<record id="view_blog_post_form_category" model="ir.ui.view">
   <field name="name">view_blog_post_form_category</field>
   <field name="model">blog.post</field>
   <field name="inherit_id" ref="website_blog.view_blog_post_form"/>
   <field name="arch" type="xml">
      <xpath expr="//field[@name='blog_id']" position="before">
         <field name="x_post_category" string="..." placeholder="..."/>
      </xpath>
   </field>
</record>

Front-end¶

以下のように`model_name.field_name`を呼び出すことで、ページのどこかにフィールドの値を表示できます。

/website_airproof/views/website_blog_templates.xml¶

<h1 t-field="blog_post.x_post_category"/>

背景¶

ウェブサイトの背景として色や画像を定義できます。

色¶

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

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-cc1-bg':                     'o-color-5',
         'o-cc5-bg':                     'o-color-1',
      ),
    )
);

イメージ/パターン¶

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

$o-website-values-palettes: (
   (
      'body-image': '/website_airproof/static/src/img/background-lines.svg',
      'body-image-type': 'image' or 'pattern'
   )
);

ヘッダー¶

デフォルトでは、ヘッダーにはメインナビゲーションを表示する 2 つの異なるテンプレート (デスクトップとモバイル) が含まれています。会社のロゴやその他のオプション要素 (call-to-action、言語セレクタなど) を指定します。状況に応じて、標準テンプレートを使用して既存の要素を有効/無効にするか、真新しいカスタムテンプレートを作成するかを選択します。

標準¶

Odoo ウェブサイトビルダーは、デバイスに応じてユーザーエクスペリエンスの適応を促進するために、デスクトップテンプレートとモバイルテンプレートを区別します。

デスクトップテンプレート¶

ヘッダーのデフォルトテンプレートのいずれかを有効にします。

重要

最初にアクティブなヘッダーテンプレートを無効にする必要があることを忘れないでください。

Example

/website_aiproof/data/presets.xml¶

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

primary_variables.scss ファイルで、目的のテンプレートを明示的に設定します。

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

$o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);

/website_airproof/data/presets.xml¶

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

モバイルテンプレート¶

各ヘッダーテンプレートには template_header_mobile テンプレートが付属しており、すべてのデバイスでシームレスなユーザーエクスペリエンスを実現します。

カスタム¶

独自のテンプレートを作成し、リストに追加します。

重要

カスタムヘッダーテンプレートを有効にする前に、最初にアクティブなヘッダーテンプレートを無効にする必要があることを忘れないでください。

Option

次のコードを使用して、ウェブサイトビルダーに新しいカスタムヘッダーのオプションを追加します。

/website_airproof/views/website_templates.xml¶

<template id="template_header_opt" inherit_id="website.snippet_options" name="Header Template - Option">
   <xpath expr="//we-select[@data-variable='header-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.header"
         data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

属性	説明
data-customize-website-views	有効にするテンプレート
data-customize-website-variable	変数に与えられた名前
data-img	ウェブサイトビルダーでのテンプレート選択に表示されるカスタムテンプレートのサムネイルです。

次に、Odoo SASS変数でカスタムテンプレートを使用することを明示的に定義する必要があります。

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

$o-website-values-palettes: (
   (
      'header-template': 'airproof',
   ),
);

テンプレート

/website_airproof/views/website_templates.xml¶

<template id="header" inherit_id="website.layout" name="Airproof - Header" active="True">
   <xpath expr="//header//nav" position="replace">
      <!-- Static Content -->
      <!-- Components -->
      <!-- Editable areas -->
   </xpath>
</template>

template_header_mobile をデスクトップとモバイルの間で一貫性を保つように調整することを忘れないでください。

website_airproof/views/website_templates.xml¶

<template id="template_header_mobile" inherit_id="website.template_header_mobile" name="Airproof - Template Header Mobile">
   <!-- Xpaths -->
</template>

構成要素¶

カスタムヘッダーでは、QWeb の t-call ディレクティブを使用して、いくつかのサブテンプレートを呼び出すことができます。

ロゴ¶

<t t-call="website.placeholder_header_brand">
   <t t-set="_link_class" t-valuef="..."/>
</t>

重要

データベースに :ref:`ウェブサイトのロゴ <website_themes/media/images/use/logo>のレコードを作成することを忘れないでください。

言語選択¶

<t t-call="website.placeholder_header_language_selector">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

呼び出し先の動作¶

<t t-call="website.placeholder_header_call_to_action">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

標準¶

デフォルトのフッターテンプレートを有効にします。最初にアクティブフッターテンプレートを無効にする必要があることを忘れないでください。

重要

最初にアクティブなフッターテンプレートを無効にする必要があることを忘れないでください。

Example

/website_aiproof/data/presets.xml¶

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

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

$o-website-values-palettes: (
   (
      'footer-template': 'Links',
   ),
);

/website_airproof/data/presets.xml¶

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

カスタム¶

独自のテンプレートを作成し、リストに追加します。最初にアクティブなフッターテンプレートを無効にする必要があることを忘れないでください。

Option

/website_airproof/views/website_templates.xml¶

<template id="template_footer_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
   <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.footer"
         data-customize-website-variable="'airproof'"
         data-img="/website_airproof/static/src/img/wbuilder/template_footer_opt.svg"/>
   </xpath>
</template>

宣言

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

$o-website-values-palettes: (
   (
      'footer-template': 'airproof',
   ),
);

テンプレート

/website_airproof/views/website_templates.xml¶

<template id="footer" inherit_id="website.layout" name="Airproof - Footer" active="True">
  <xpath expr="//div[@id='footer']" position="replace">
     <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
        <!-- Content -->
     </div>
  </xpath>
</record>

著作権¶

現時点で利用可能なテンプレートは 1 つだけです。

コンテンツを置き換えたり、構造を変更したりするには、次の XPath に独自のコードを追加します。

/website_airproof/views/website_templates.xml¶

<template id="copyright" inherit_id="website.layout">
   <xpath expr="//div[hasclass('o_footer_copyright')]" position="replace">
      <div class="o_footer_copyright" data-name="Copyright">
         <!-- Content -->
      </div>
   </xpath>
</template>

ドロップゾーン¶

ページの完全なレイアウトを定義する代わりに。 Building Blocks(スニペット)を作成し、ユーザーがドラッグアンドドロップする場所を選択できるようにし、ページレイアウトを独自に作成できます。これを*モジュラー設計*と呼びます。

スニペットで埋められる空の領域を定義できます。

<div id="oe_structure_layout_01" class="oe_structure"/>

クラス	説明
oe_structure	ユーザーのドラッグ＆ドロップ領域を定義します。
oe_structure_solo	このエリアには1つのスニペットのみドロップできます。
oe_structure_not_nearest	Building Blockがこのクラスを持つDropゾーンの外にドロップされると、最も近いDropゾーンに移動されます。

既存のドロップゾーンにコンテンツを追加することもできます。

<template id="oe_structure_layout_01" inherit_id="..." name="...">
   <xpath expr="//*[@id='oe_structure_layout_01']" position="replace">
      <div id="oe_structure_layout_01" class="oe_structure oe_structure_solo">
         <!-- Content -->
      </div>
   </xpath>
</template>

レスポンシブ¶

Odoo は一般的に Bootstrap フレームワークに依存しています。: デスクトップとモバイル Odoo 16では、主に3つの側面でアクションを起こすことができます。

デバイスに応じて自動的に計算されたフォントサイズ
デスクトップ上の列のサイズ（列はモバイルで自動的に積み上げられます）
表示条件 (デスクトップ/モバイルでの表示/非表示)

関連項目

表示プロパティ <https://getbootstrap.com/docs/5.3/utilities/display/>`_ の Bootstrap documentation

フォントのサイズ¶

Bootstrap 5 では、レスポンシブフォントサイズはデフォルトで有効になっています。テキストがデバイスとビューポートのサイズでより自然にスケールできるようにします (`$enable-rfs`変数に依存します)。

関連項目

Bootstrapの応答フォントサイズに関するドキュメント

列のサイズ¶

Bootstrapは、行と列で構成されたグリッドを使用してページをレイアウトします。この構造のおかげで、列はモバイルとデスクトップで異なるサイズにすることができます。このバージョンでウェブサイトビルダーでは、モバイルサイズ(例えば`col-12`)とデスクトップサイズ(例えば`col-lg-4`)を設定できますが、ミディアムブレークポイント(例えば`col-md-4`)は設定できません。

警告

媒体サイズは設定できますが、エンドユーザーはウェブサイトビルダー内では編集できません。

関連項目

表示条件¶

Odooウェブサイトビルダーでは、セクション全体または特定の列をモバイルまたはデスクトップ上に非表示にすることができます。: この機能は、BootstrapとOdoo 固有のクラスを活用しています。

o_snippet_mobile_invisible
o_snippet_desktop_invisible

デスクトップ上のセクションを非表示にします:

<section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16 d-lg-none o_snippet_desktop_invisible" data-snippet="s_text_block" name="Text">
    <!-- Content -->
</section>

モバイルで列を非表示:

<section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16" data-snippet="s_text_block" name="Text">
   <div class="container s_allow_columns">
      <div class="row">
         <div class="col-12 col-lg-6 d-none d-lg-block o_snippet_mobile_invisible">
            Column 1
         </div>
         <div class="col-12 col-lg-6">
            Column 2
         </div>
      </div>
   </div>
</section>

クラス	説明
o_snippet_mobile_invisible	ウェブサイトビルダーは、要素が非表示であり、可視状態オプションを使用していることを示します。
o_snippet_desktop_invisible	ウェブサイトビルダーは、要素がデスクトップ上で非表示になり、は可視状態オプションを使用していることを示します。
d-none	あらゆる状況で要素を非表示にします。
d-lg-block	「大きい」ブレークポイント(デスクトップ上)から要素を表示します。

重要

o_snippet_mobile_invisible / o_snippet_desktop_invisible クラスを指定する必要があります。: 視認性条件オプション機能。デスクトップ上に要素が隠されていても。ウェブサイトビルダーには、モバイルモードとデスクトップモードを切り替えることなく、エンドユーザーが要素を強制的に表示して編集できるようにする、これらの要素のリストが表示されます。

レイアウト¶

デフォルト¶

XPath¶

式¶

位置¶

QWeb¶

カスタムフィールド¶

宣言¶

バックエンド¶

Front-end¶

背景¶

色¶

イメージ/パターン¶

ヘッダー¶

標準¶

デスクトップテンプレート¶

モバイルテンプレート¶

カスタム¶

構成要素¶

ロゴ¶

メニュー¶

言語選択¶

呼び出し先の動作¶

Navbar toggler¶

フッター¶

標準¶

カスタム¶

著作権¶

ドロップゾーン¶

レスポンシブ¶

フォントのサイズ¶

列のサイズ¶

表示条件¶

レイアウト¶

デフォルト¶

XPath¶

式¶

位置¶

QWeb¶

カスタムフィールド¶

宣言¶

バックエンド¶

Front-end¶

背景¶

色¶

イメージ/パターン¶

ヘッダー¶

標準¶

デスクトップ テンプレート¶

モバイルテンプレート¶

カスタム¶

構成要素¶

ロゴ¶

メニュー¶

サインイン¶

ユーザーのドロップ¶

言語選択¶

呼び出し先の動作¶

Navbar toggler¶

フッター¶

標準¶

カスタム¶

著作権¶

ドロップゾーン¶

レスポンシブ¶

フォントのサイズ¶

列のサイズ¶

表示条件¶

デスクトップテンプレート¶