グローバルコンテンツ

Last updated:

グローバルコンテンツとは、ウェブサイト全体で共有されるコンテンツです。一般的な例としては、ウェブサイトのヘッダー、フッター、サイドバーが挙げられます。開発者はどのコンポーネントをグローバルとして扱うかを指定するために、グローバルパーシャルを使用するか、モジュールをグローバルに指定します。HubSpotを使用すると、グローバルコンテンツを扱うコンテンツエディターは、グローバルコンテンツを編集し、全てのページで編集内容をプレビューする作業を簡単に行えます。グローバルコンテンツの編集方法については、HubSpotナレッジベースで複数のテンプレートにわたってグローバルコンテンツを使用する方法に関するナレッジベース記事を参照してください。

グローバル コンテンツ エディター

概要

グローバルコンテンツの使用は、複数のページにわたって同じ情報を表示する場合に最も効果的です。例えば、以下に示すページの上部にあるヘッダーなど、ウェブサイトのヘッダーやフッターに使用できます。

hubspot-developers-header

グローバルコンテンツは次のような領域にも使用できます。

  • ウェブサイトのセクション別のセカンダリーナビゲーション
  • 著作権のフッター(またはサブフッター)
  • ブログ記事のサイドバー(最近の投稿、執筆者リストなどの表示に使用)

グローバルコンテンツはウェブサイトの複数の場所で使用されるので、アクセシビリティーを考慮してグローバルパーシャルとグローバルモジュールをデザインし、作成することが特に重要になります。

グローバルパーシャルとグローバルモジュールの比較

開発者は、グローバルパーシャルとグローバルモジュールを作成できます。この2つの主な違いは、次のとおりです。

  • グローバルパーシャルは、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体にわたって再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。
  • グローバルモジュールは、ウェブサイト上の複数のページで使用可能な1つまたは複数のコンテンツ要素で構成されたモジュールです。典型的なグローバルモジュールとしては、ブログの配信登録フォーム、セカンダリーナビゲーション要素、Call-To-Action(CTA)などがあります。
グローバルパーシャル内にグローバルモジュールを含めることは避けてください。コンテンツの編集作業に悪影響を及ぼす可能性があります。

グローバルパーシャルとグローバルモジュールに含まれる全てのモジュールとフィールドは、グローバル コンテンツ エディター内で簡単に編集できます。

グローバルパーシャル

グローバルパーシャルを作成する

グローバルパーシャルはテンプレートの一種であり、HubSpot CLIで以下に示すcreateコマンドを使用することで、ローカルに作成できます。

hs create template <partial-file-name>

テンプレートのタイプを選択するように求められたら、global partialを選択します。

このコマンドを実行すると、指定したディレクトリーにテンプレートが作成され、そのHTMLファイルには以下のテンプレートアノテーションが含まれます。

<!-- templateType: global_partial label: Page Header -->

グローバル コンテンツ パーシャルのサンプルを確認するには、GitHubにあるHubSpotのボイラープレート(英語)を参照してください。

グローバルパーシャルにドラッグ&ドロップエリアを追加する

グローバルパーシャル内でコンテンツのドラッグ&ドロップ機能を有効にするには、ページテンプレートで有効にする場合と同様に、dnd_areaタグを追加します。詳しくは、ドラッグ&ドロップエリアのドキュメントを参照してください。 

既存のテンプレートにグローバルパーシャルを追加する

既存のテンプレートのいずれかにグローバルパーシャルを追加するには、global_partial HubLタグを使用してパーシャルへのパスを参照します。以下に示しているのは、このタグを使用したCMSボイラープレートの例です。

{% global_partial path="../partials/header.html" %}

グローバルパーシャルが出力の場合は、グローバルパーシャルを<div>で囲みます。これは、そのコンテンツがグローバルパーシャルであることを識別するためにページエディターで使用されます。

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

注:テンプレートの<head>内ではglobal_partialを使用しないでください。使用すると、無効なHTMLになります。

ヘッダー内でグローバルパーシャルを使用するような場合は通常、代わりにグローバルモジュールで{%require_head%}を使用してカスタムコードをheadに挿入し、モジュールフィールドも追加する方法が適切です。

グローバルモジュール

グローバルモジュールを作成するには、CLIを使用する他のモジュールを作成する場合と同様に、以下に示すhs createコマンドを実行します。

hs create module <module_name>

グローバルモジュールは、モジュールのmeta.jsonファイル内にあるglobalフラグによって区別されます。

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

また、HubSpotでデザインマネージャーを使用してグローバルモジュールを作成することもできます。

モジュールの操作方法についての詳細は、以下の関連リソースをご確認ください。


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