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

どのように動作するか

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

入手方法

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

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

 1<script>
 2  (function () {
 3    var blockArray = [
 4      {
 5        blockName: '.block--packs',
 6        blockNumber: 0
 7      },
 8      {
 9        blockName: '.block--description',
10        blockNumber: 0
11      }
12    ];
13
14    function removeBlock() {
15      setTimeout(function () {
16        blockArray.map(function (block) {
17          return document.querySelectorAll(block.blockName)[block.blockNumber];
18        })
19          .forEach(function (element) {
20            element && element.remove();
21          });
22      }, 0);
23    }
24
25    removeBlock();
26  })();
27</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. 独自のコードをブロックに挿入します。

お役立ちリンク