サイトの言語に応じてコンテンツを表示する方法

どのように動作するか

コンテンツをセグメント化し、カスタムHTMLコードを使用して特定の言語でページを閲覧しているユーザーにのみ特定のブロックを表示することができます。既存のソリューションを使用することも、独自のコードを追加することもできます。

入手方法

既存のソリューションを使用する

1. アドミンページでプロジェクトを開きます。
2. サイドバーで「サイトビルダー」をクリックします。
3. 「サイトビルダーを開く」をクリックします。
4. 「ヘッダー」ブロックで「翻訳」コンポーネントを設定します。
5. 特定のブロックを非表示にする言語を選択します。
6. 以下のコードを「カスタムコード」ブロックに挿入します：

<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function removeBlock() {
      setTimeout(function () {
        blockArray.map(function (block) {
          return document.querySelectorAll(block.blockName)[block.blockNumber];
        })
          .forEach(function (element) {
            element && element.remove();
          });
      }, 0);
    }

    removeBlock();
  })();
</script>

7. blockArrayアレイで、選択した言語のユーザーには非表示にしたいブロックで以下のパラメータを変更します：
   • blockName — CSSクラスのブロックの名前。可能性なオプション：
     • .block--header（ヘッダーブロック）
     • .block--hero（コールトゥアクションブロック）
     • .block--html（カスタムコードブロック）
     • .block--packs（パックブロック）
     • .block--description（説明ブロック)
     • .block--gallery（ギャラリーブロック)
     • .block--requirements（システム要件ブロック）
     • .block--faq（よくある質問ブロック）
     • .block--embed（ソーシャルメディアウィジェットブロック）
     • .block--news（ニュースブロック）
     • .block--footer（フッターブロック)
   • blockNumber-ブロックのシーケンス番号。最低値は0です。
8. プレビューをクリックして変更を確認します。

この手順については、チュートリアルビデオをご覧ください：

自分のコードを追加する

1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

2. 独自のコードをブロックに挿入します。

お役立ちリンク