子テーマを作成する
APPLICABLE PRODUCTS
Marketing Hub
- Professional or Enterprise
CMS Hub
- Professional or Enterprise
子テーマとは、元の親テーマのコピーです。子テーマは、親テーマに変更を加えることなく編集できます。HubSpotテーマ、マーケットプレイステーマ、カスタムテーマなどの子テーマを作成できます。
デザインマネージャーでは、マーケットプレイスで購入したテーマまたは既定のHubSpotテーマの子テーマを作成できます。デザインマネージャー内でこれらのアセットから子テーマを作成すると、以下のファイルが子テーマに追加されます。
theme.json
:親テーマにリンクするための適切なextends文が含まれています。child.css
とchild.js
:空のCSSファイルとJSファイルです。これらのファイルに追加するコードは、子テーマにのみ影響します。これらのファイル名は、子テーマ作成ウィザードの詳細オプションでカスタマイズできます。standard_header_includes
HubL変数を含むファイル。通常は「ベース」または「メイン」テンプレートファイルなどです。この例はボイラープレートで確認できます。
元のテーマが編集できない場合でも、子テーマは編集できます。
デザインマネージャー内でマーケットプレイステーマまたはHubSpotの既定テーマの子テーマを作成するには、次の手順に従います。
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- 左側のサイドバーで、(
@marketplace
フォルダーにある)マーケットプレイステーマまたは(@hubspot
フォルダーにある)HubSpotの既定テーマを右クリックし、[子テーマを作成]を選択します。 - 子テーマの名前を入力し、テーマの場所を選択し、[子テーマを作成]をクリックします。
- 詳細オプションを開き、子テーマを使用して作成される子CSSファイルと子JSファイルの名前をカスタマイズすることもできます。
- 子テーマが作成されると、子テーマの公開準備ができたことを示す成功メッセージが表示されます。[閉じる]をクリックします。
- 左側のサイドバーに子テーマとその内容が表示されます。
デザインマネージャー上で子テーマを作成できます。子テーマには、親テーマからアセットとファイルが継承されます。元のテーマが編集できない場合でも、子テーマは編集できます。
デザインマネージャー内で子テーマを作成するには、次の手順に従います。
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- 左側のサイドバーでファイルをクリックして[新しいテーマ]を選択します。
- [テーマの開始点]として[空のテーマ]を選択します。
- テーマの名前を入力し、[作成]をクリックします。
- 新しいテーマのtheme.jsonファイルが開きます。theme.jsonファイルを編集して、行5の下に新しい行を追加します。行5の末尾にコンマを追加してください。
- 行6に
extends
文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。
- 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。
子テーマは、CLIを使用して作成できます。子テーマを作成する前に、CLIの設定プロセスを完了しておく必要があります。子テーマには、親テーマからテンプレートとファイルが継承されます。この新しいテーマは、CLIとデザインマネージャーの両方で編集できます。
CLIでテーマを拡張するには、次の手順に従います。
- テーマ用の新しいディレクトリーを作成します。例:
- 新しいディレクトリーで、親テーマのtheme.jsonファイルのコピーを作成します。例:
- コピーしたtheme.jsonファイルを編集し、行5の下(または
responsive_breakpoints
がある場合はその最終行の下)に新しい行を追加します。行5の末尾にコンマを追加してください。 - 行6(または行14、あるいはテーマの該当する行)に
extends
文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。
- 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。
- 新しいテーマとファイルをポータルにアップロードします。例:
- 親テーマがマーケットプレイスのテーマの場合、別のポータルに子テーマをコピーできますか?
はい。「extends」パスが新しいポータルでも同じなら可能です。 - 親テーマからはどのアセットが継承されますか?
子テーマ内で上書きされない限り、親テーマの全てのファイルが継承されます。 - 特定のアセットを親テーマとは変える方法は?
子テーマの同じ相対パスにあるファイルによって、親テーマからの同等のファイルが上書きされます。例えば@marketplace/parent/theme/templates/about.html
を上書きするには、/child/theme/templates/about.html
ファイルを作成し、この新しいファイルを編集します。新しいファイルが、継承されたファイルの代わりとして有効になります。これはfields.jsonファイル以外に、テーマ内の他のファイルにも適用されることに注意してください。 - 子テーマを使用して新しいページを作成する方法は?
新しいページを作成する場合、子テーマはページ作成モーダルの[自分のテーマ]に選択肢として表示されます。テーマを使用してページを作成する方法については、ナレッジベースを参照してください。 - 親テーマの代わりに子テーマを使用して既存のページを編集する方法は?
ページテンプレートを新しいテーマの同等のテンプレートに置き換えることができます。例えば、親テーマのテンプレートlanding-page.html
を新しいテーマのテンプレートlanding-page.html
に置き換えることができます。 - ページ作成インターフェイスでテンプレートのラベルを編集する方法は?
テンプレートのラベルは、HTMLファイルを編集することで変更できます。ラベルはテーマファイル冒頭のコメント内にあります。 - 子テーマからさらに子テーマを作成できますか?
現在、子テーマから子テーマを作成することはできません。
貴重なご意見をありがとうございました。
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。