HubSpotアセット マーケット プレイスでのテーマの要件

Last updated:

この記事では、テーマをHubSpotアセットマーケットプレイスに提出する際に満たす必要がある要件について説明します。

注:テーマに含まれるテンプレートを、テーマとは別途販売するテンプレートとして提出することはできません。

1. テーマに最小限必要なテンプレート

テーマを提出する際には、次のテンプレート内、少なくとも1件が含まれていなければなりません。

テーマには、次のシステム ページ テンプレートも含まれている必要があります。

2. theme.json、テーマのフィールド、テーマ設定

以降のセクションで、テーマの要件について説明します。

2.1 theme.jsonファイル

theme.jsonファイルには、次のパラメーターを含める必要があります。

// theme.json { "label": "Your Theme Name", "preview_path": "./path/to/preview-page.html", "screenshot_path":"./path/to/screenshot.jpg", "enable_domain_stylesheets": false, "version":"1.0", "author":{ "name":"Your Marketplace Provider Name", "email":"provider@email.com", "url":"https://theme-provider-url.com/" }, "documentation_url":"https://theme-provider-url.com/your-theme/documentation", "example_url":"https://theme-provider-url.com/your-theme/demo" }

これらのパラメーターの詳細については、theme.jsonドキュメントをご確認ください。

2.2 テーマ設定

2.2.1 エディタースタイルの競合

テーマ設定は、モジュールで設定されているエディタースタイルまたはスタイルと競合しないものでなければなりません。競合の一例は、CSSでの!importantプロパティーの使用です。これにより、エンドユーザーが上書きするのが非常に困難になり、競合を引き起こす可能性があります。

2.2.2 設定の説明ラベル

テーマ設定では、エンドユーザーが変更内容を把握できるよう、各設定に説明ラベルを使用する必要があります。

2.2.3 テーマに含まれる全てのテンプレートにテーマ設定を適用

テーマに含まれる全てのテンプレートにテーマ設定を適用する必要があります(ただし、追加のスタイルに特定の用途がある場合を除きます)。例えば、テーマ設定でH1見出しのスタイル、サイズなどを変更する場合、(テーマの75%だけではなく)テーマに含まれる全てのH1にその変更を適用する必要があります。

2.3 テーマのフィールドのグループ化

テーマ内のフィールドは、必要に応じて論理的にグループ化する必要があります。例えば、タイポグラフィーに関連する複数のフィールドを「タイポグラフィー」グループとしてグループ化します。

2.4 テーマの必須フィールド

テーマには、少なくとも次のテーマフィールドを含める必要があります。

  • タイポグラフィー
    • 本文テキストのフォントフィールド(pタグ)
    • H1 -> H6フォントフィールド
    • リンクの色(aタグ)
      • 少なくともリンクのスタイル設定とリンクにカーソルを合わせたときのスタイルを含める必要があります
  • フォーム
    • タイトルの背景
    • タイトルのテキスト
      • フォントの色のスタイルを含める必要があります
    • フォームの背景色
    • フォームの境界線の色
    • フォームラベルの色
    • フォームフィールドの境界線の色
    • フォームボタン
      • ボタンのテキストと背景色の両方の設定を含める必要があります。ボタンにカーソルを合わせたときのスタイルも忘れずに含めてください

3. HTML+HubLテンプレート(コードファイル)とdnd_area(ドラッグ&ドロップエリア)タグを使用して作成されているテーマであること

マーケットプレイスに掲載するためにテーマを提出するには、そのテーマがHTML+HubLテンプレート(コードファイル)を使用して作成されている必要があります。テーマにはdnd_area(ドラッグ&ドロップエリア)タグも含まれていなければなりません。

4. 12列グリッドに配慮したテーマ

HubSpotのページエディターでは12列グリッドがサポートされているため、テーマでも12列グリッドをサポートする必要があります。

5. グローバルパーシャルを使用したテーマ

グローバルパーシャルとは、テンプレート内の一種のグローバルコンテンツのことです。グローバルパーシャルはウェブサイトの複数の部分で共有されるコンテンツです。グローバルパーシャルの例としては次のものがあります。

  • ウェブサイトのヘッダー
  • ウェブサイトのフッター
  • ページのサイドバー

グローバルパーシャルの作成を開始する方法をご確認ください。

6. ローカルファイルの相対パスを使用したアセット

テーマ内のアセットを参照する際は、ローカルファイルの相対パスを使用する必要があります。相対パスを含める際のベストプラクティスは、HubSpotのget_asset_url関数を使用することです。この関数は、指定されたアセット/ファイル/テンプレートの公開URLを返します。HubSpotのデザインマネージャー内でこの関数を生成することもできます。

例えば、require_cssで参照されるスタイルシートは次のように書式設定する必要があります。

{{ require_css("../custom/styles/style.css") }} //cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css

7. テーマ内のjQuery

テーマがjQueryに依存している場合、顧客のアカウントで既定で有効化されないイベントにjQueryのバージョンを含める必要があります。 

この一例は、サイトの残りの部分では必要とされないjQueryを必要とするテーマモジュールです。顧客が既定でjQueryを読み込んでいない場合、テーマモジュールで次のコードを使用してjQueryを読み込むことをお勧めします。

{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #} {% if not site_settings.include_jquery %} {{ require_js("../jquery-3.4.1.js", "footer") }} {% endif %}

8. 多言語のサポート

テーマは複数の言語バージョンに対応可能でなければなりません。言語切り替えモジュールを使用することで、この要件を満たすことができす。

ヒント:グローバルヘッダーに言語切り替えモジュールを追加すると、顧客が簡単に言語のオプションを見つけて目的の言語を選択できるようになります。

9. テーマモジュール

テーマモジュールの以下の要件に留意してください。

  • モジュールごとに一意のアイコンが必要です(同じアイコンを複数のモジュールに使用することはできません)。
  • モジュールには、そのモジュールの目的を伝える記述的なラベルを付ける必要があります。
    • 例えば、「パララックススクロールを使用したヒーローバナー」というモジュール名は記述的ですが、「ヒーローバナー01」、「ヒーローバナー02」、「ギャラリー1」といったモジュール名は記述的ではありません。 
  • モジュールの使用方法をさらに分かりやすくするために、モジュールには(該当する場合)インライン ヘルプ テキストを含める必要があります。 
  • メニューフィールドを含める場合、モジュールでは既定のコンテンツオプションとして「メニューを選択」を使用する必要があります。
  • フォームフィールドを含める場合、モジュールでは既定のコンテンツオプションとして「フォームを選択」を使用する必要があります。
  • ブログ セレクター フィールドを含める場合、モジュールでは既定のコンテンツオプションとして「ブログを選択」を使用する必要があります。

10. テーマのその他の制限

テーマごとに以下の制限が適用されます。

  • テーマに含めるコンポーネントの数の上限は次の通りです。
    • 50個のテンプレート
    • 50個のモジュール
    • 50個のセクション
  • テーマに次のコンポーネントを含めることはできません。
    • Eメールテンプレート(現在のところ、テーマではEメールテンプレートがサポートされていません)。
    • HubDB機能
    • サーバーレス関数
    • CRMオブジェクトフィールド
    • メンバーシップテンプレート

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。