Shopifyで使用するクラウド AI 自動翻訳には、セットアップを完了するために何らかのアクセスが必要です。
Shopifyセットアップは 3 つの簡単な手順で構成されます。
Linguiseダッシュボードに接続または登録した後、翻訳を承認するためにドメインを登録するように求められます。
そのためには、https:// を含むドメイン名をコピーし、プラットフォームとしてShopifyを選択するだけです。
その後、ソース言語と宛先言語を選択します。
SEO に関する重要事項:セットアップする言語の数は、SEO に大きな影響を与えます。 翻訳言語を設定するときに、大量のインデックス ページ (>500) がある場合、検索エンジンがそれらを処理するのに多くの時間がかかる場合があります。 元の言語での SEO に影響を与える可能性があります。 そのため、最初に最大 5 つの言語を追加することをお勧めします。その後、インデックスが作成されたら、月に 3 つのバッチで言語を追加できます。
Linguiseダッシュボード内に Web サイトを正常に登録したら、インストールを続行するための 2 つのオプションがあります。
おそらくこのコンテンツが表示されるはずです。DNS レコードを自動的に追加したい場合は、「 DNS を自動的に接続する」をクリックします。 Entri と呼ばれるこの機能は、DNS レコードを自動的に追加するため、インストールを簡単に進めることができます。 もう 1 つのオプションは、ドメイン プロバイダーの DNS を手動でコピーすることです。
ボタンをクリックすると、Entri は登録された Web サイトの URL を分析し、パブリック DNS レコードを確認します。 それに基づいて、必要なプロバイダーと DNS が決定されます。
[ドメインプロバイダー] で認証する」 (この例では Cloudflare です)をクリックします パネルがドメイン プロバイダーのログイン ページに変わり、ログインして続行できます。
ドメイン プロバイダーにログインすると、残りの作業は Entri によって行われ、適切な DNS レコードが自動的に追加されます。 言語ごとに 1 つの DNS + 検証キー用に 1 つの TXT DNS。
DNS がドメイン内に追加されていることが確認できるはずです。 例えば：
認証すると、すべての DNS 設定が正常に構成されたことが Entri から通知されます。
すべての DNS エントリがドメインに伝達されるとすぐに、変換機能を使用できるようになります (通常は 20 ～ 30 分かかります)。
手動インストールを希望する場合は、以下に示す手順に従って手動でインストールすることもできます。
ドメインを検証すると、ドメインに追加する DNS をコピーする準備が整った画面にリダイレクトされます。 ホスティング会社によっては、ドメインの設定が少し異なる場合がありますが、フィールド名は非常に標準的です。 これらのレコードは、Web サイトの多言語ページをfr.domain.com、es.domain.com として読み込むために必要です。
主な要素は次のとおりです。
その後、ドメイン マネージャーに接続し、DNS セットアップ領域にアクセスする必要があります。 次に、指示に従って、以下をコピーできます。
各レコード タイプ (TXT と CNAME) の例を次に示します。
すべてのレコードを追加すると、構成は次のようになります。
Shopifyでは Shopify プラットフォーム内でDNS 構成を管理する機能があります。
ドメインに移動して、 Shopifyから DNS 設定にアクセスして変更できます。 このセクションでは、必要に応じて DNS 構成を追加および編集できます。
その後、プライマリ Web サイトと、右上隅に「ドメイン設定」というラベルのオプションが表示されます。
DNS 設定の編集にアクセスでき、新しい DNS レコードの追加に進むことができます。 CNAME レコードと TXT レコードを追加できます。
最後に、CNAME レコードと TXT レコードが次の画像のように表示されるはずです。
Shopify DNS 構成を追加するためのルール自体があることに注意することが重要です 必ず前の手順に従ってください。
Shopify追加したこの DNS レコードを読み取り、それに応じて伝播します。
すべてのレコードをドメイン DNS に追加した後、[ DNS 構成を確認] ボタンをクリックして DNS の伝播を確認できます。
DNS 検証には通常 30 分から 1 時間かかります。 その後、 Linguiseダッシュボードの DNS リストの右側に緑色の点が表示されるはずです。 Shopify Web サイトを翻訳する準備はほぼ完了していますが、国旗を含む言語スイッチャーへのリンクが欠落しています。
言語スイッチャーは、必要な言語を選択するためのフラグポップアップです。 これをロードするには、 Shopifyページの先頭にあるコードをコピーする必要があります。 その後、国旗言語スイッチャーが公開 Web サイトに自動的に読み込まれます。
コピーするリンクは、ドメイン登録の最後またはドメイン設定に表示されます。 リンクをクリップボードにコピーします。
次に、 Shopify [オンライン ストア] > [テーマ]を開きます。
現在のテーマの 3 つの点をクリックしてコードを編集します。
最後に、 theme.liquid ファイルを開いて、最後のコードの後にスクリプト コードを貼り付けます。
これで、 ShopifyフロントエンドでLinguise言語スイッチャーが利用できるようになります。
言語スイッチャーは、 Linguiseダッシュボード > 設定 > 言語フラグ表示からカスタマイズできます。 ここでの変更はすべてウェブサイトに反映されます。
画面の右側には言語スイッチャーのプレビューが表示されます。 設定できる要素は次のとおりです。
Shopify内の特定の場所に言語スイッチャーを表示するには、その位置を「その場」に設定する必要があります。 Linguiseで位置を設定したら、以下のショートコードを追加してその位置を含めることができます。 以下のコードをクリックしてクリップボードに置きます。
追加すると、フロントエンドでコードを追加した HTML 領域にフラグと言語名が表示されます。
Google ReCAPTCHA は、お問い合わせフォームなどでスパムを防止するために使用される無料のサービスです。 Shopifyで利用できるようにするには、 Shopify管理画面で多言語サブドメインを登録する必要があります。
ストア設定とドメイン設定を開きます。
次に、 「既存のドメインに接続」
既存の言語サブドメインを追加します。たとえば、Web サイトがフランス語の場合は、fr.yourwebsite.com になります。
最後に、フロントエンドで reCAPTCHA を表示する必要があった翻訳言語ごとに [lang].yourwebsite.com を追加します。
フロントエンド エディターを使用すると、翻訳者はShopifyの HTML コンテンツを任意の言語で簡単に変更できます。 ページ要素をクリックしてテキスト、リンク、または画像を置き換えることにより、ページを編集できます。
Shopifyが提供する無料テーマのいずれかを使用している場合、すべての HTML にアクセスするにはテーマの CSS を編集する必要がある場合があります。これは、非標準の疑似要素が使用されているためです。
まず、テーマのコードを編集してから、base.css ファイルまたはShopifyショップにロードされているその他の CSS ファイルを開きます。
CSS ファイルに追加するコードは次のとおりです。
/* CUSTOM CSS FOR LIVE EDITOR LINGUISE --------------------------------------------------------------------*/ /* Remove the problem of frontend editor on product and blog listing */ .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after { content: none !important; } .card__heading a:after, .card--card:after, .card--standard .card__inner:after { content: none !important; } /* Add back the button border */ button.button { border: 2px solid #0E1B4D; border-radius: 20px; } /* END CUSTOM CSS --------------------------------------------------------------------*/
