[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト(Adobeで管理されるPaaS インフラストラクチャ)とオンプレミス プロジェクトにのみ適用されます。"}

エディターでのウィジェットの挿入

widget ツールを使用すると、任意のCommerce コンテンツページまたはノード、製品、またはカテゴリへのリンクを含む、様々なコンテンツ要素をページに追加できます。 リンクは、ブロック形式でページに配置するか、コンテンツに直接組み込むことができます。 ウィジェットツールを使用して、次の種類のコンテンツへのリンクを作成できます。

デフォルトでは、リンクはテーマのスタイルシートからスタイルを継承します。

IMPORTANT
多数のディレクティブ、特に 最近表示された項目/比較対象の製品 タイプなどのウィジェットを挿入すると、ページがキャッシュされていない場合に、ページの最初の読み込みに悪影響を与える可能性があります。 このため、慎重に使用してください。 通常、問題は作成されません。 ただし、この潜在的な問題については、開発チームと話し合う必要があります。
  1. 編集モードでページ、ブロック、またはダイナミックブロックを開きます。

  2. Content​セクションに移動し、エディターをサポートする任意の要素をクリックします。

  3. ウィジェットを表示する場所にカーソルを置き、ウィジェットを挿入 アイコンをクリックします。

    ​ エディターツールバー – ウィジェットの挿入 {width="700" modal="regular"}

    ページビルダーを有効にしておらず、コードを操作したい場合は、Show / Hide Editor​をクリックします。 ウィジェットを表示するテキスト内に挿入ポイントを置きます。 次に、Insert Widget​をクリックします。

  4. Widget Type​を選択します。

    これらのオプションについて詳しくは、​ ウィジェットの種類を参照してください。 次の手順では、製品へのリンクを挿入する例を使用します。

  5. 製品名を使用するには、Anchor Custom Text フィールドを空のままにします。

  6. SEOのベストプラクティスとして​ Anchor Custom Title ​を入力してください。

    このタイトルはページに表示されません。

  7. Template​を次のいずれかに設定します:

    • リンクをテキストに組み込むには、Product Link Inline Templateを選択します。

    • リンクを別の行に配置するには、Product Link Block Templateを選択します。

  8. Select Product​をクリックし、次の操作を行います。

    • ツリーで、必要なカテゴリに移動します。

    • リストで、リンクされた製品を選択します。

  9. Insert Widget​をクリックして、ページにリンクを配置します。

    HTML コードを使用している場合、リンクの​ マークアップタグ ​がページの上部に表示され、二重中括弧で囲まれます。 必要に応じて、カット&ペースト​を使用して、リンクを表示するコード内にマークアップタグを配置します。

  10. コンテンツの編集が完了したら、Save​をクリックします。

recommendation-more-help
commerce-admin-help-content-design