WooCommerceの翻訳方法(あらゆる状況をカバー)

公開: 2022-06-28

買い物客に優しい多言語のeコマースストアを作成できるようにWooCommerceを翻訳する方法に苦労していますか?

多言語対応のWooCommerceストアを作成することには多くの利点があり、最大の2つは次のとおりです。

  1. 買い物客は自分の好きな言語であなたの店を閲覧することができ、それは彼らにとってはるかに良い買い物体験を生み出します。 欧州連合が委託したギャラップの調査によると、買い物客の42%は、母国語で利用できない店舗からは購入しません。
  2. 多言語SEOのおかげで、そもそもより多くの買い物客にリーチできます。 Googleで商品をさまざまな言語でランク付けできるため、店舗へのオーガニックトラフィックを増やすことができます。

ただし、WooCommerceには多言語機能が組み込まれていないため、WooCommerceの翻訳方法に関していくつかの問題が発生する可能性があります。

ありがたいことに、適切なツールを使用すると、技術的な知識を必要とせずに多言語ストアを簡単に作成できます。 そして、このガイドでは、その方法を紹介します。

このチュートリアルを終了するまでに、シンプルなビジュアルインターフェースを使用して、ストアを無制限の数の新しい言語に完全に翻訳できるようになります。これには、商品、ショップページ、カート、チェックアウト、その他すべてが含まれます。

WooCommerce製品ページを翻訳する

または、ストアを最初から翻訳したくない場合は、Google翻訳またはDeepLを利用した自動機械翻訳の助けを借りて、ビジュアルエディターを使用してそれらの翻訳を改良することができます。

フロントエンドでは、買い物客は柔軟な言語スイッチャーを使用して好みの言語を選択でき、場所やブラウザーの設定に基づいてユーザーをローカル言語に自動的にリダイレクトすることもできます。

WooCommerceの翻訳を設定する方法を学ぶ準備はできましたか? 掘り下げましょう!

目次

  • WooCommerceを翻訳するために必要なもの
  • TranslatePressでWooCommerceを翻訳する方法
    • 1. TranslatePressをインストールし、言語を選択します
    • 2.自動翻訳を設定する(オプション)
    • 3.WooCommerceコンテンツを翻訳する
      • WooCommerce製品を翻訳する方法
      • WooCommerceストアページの翻訳方法
      • WooCommerceカートページを翻訳する方法
      • WooCommerceチェックアウトページを翻訳する方法
      • メニュー項目、ウィジェット、およびその他のフロントエンドコンテンツを翻訳する方法
      • SEOメタデータを翻訳する方法
    • 4.WooCommerce言語スイッチャーを構成します
      • WooCommerce言語スイッチャーをメニュー項目として追加する方法
      • WooCommerce言語スイッチャーをショートコードとして追加する方法
  • 多言語対応のWooCommerceストアを今すぐ作成

WooCommerceを翻訳するために必要なもの

WooCommerceには、完全に機能するeコマースストアを作成するために必要なすべての機能が含まれていますが、単一の言語のみです。

では、ストアを複数の言語に翻訳し、買い物客が好みの言語を選択できるようにするには、どうすればよいでしょうか。

ええと、WordPressの場合によくあることですが、プラグインの助けが必要になります。

人気のある多言語プラグインはたくさんありますが、いくつかの理由から、このチュートリアルではTranslatePressプラグインを使用します。

  1. WooCommerceをすぐにサポートできるため、カートやチェックアウトページを含めてWooCommerceを完全に翻訳することができます。
  2. 無料版では、1つの新しい言語で完全に多言語のストアを作成できます。 無料版だけを使用して、このチュートリアルのほとんどに従うことができます。
  3. 上記のようなビジュアルインターフェイスを使用して、翻訳を管理できます。
  4. 時間を節約したい場合は、Google翻訳またはDeepLによる自動機械翻訳をサポートしています。

TranslatePressでWooCommerceを翻訳する方法

TranslatePressとは何かがわかったので、プラグインを使用してWooCommerceを翻訳する方法を見てみましょう。

このチュートリアルでは、ストアの元の言語でWooCommerceストアがすでに機能していることを前提としています。

WooCommerce設定の構成と製品/ストアコンテンツの追加に加えて、WooCommerceテーマと使用するWooCommerceプラグインを完全にセットアップする必要があります。

この例では、WooCommerceを完全にサポートする無料のUniteテーマを使用しています。 ただし、TranslatePressは文字通りすべてのWooCommerceテーマで動作するため、必要なテーマを選択できます。

WordPress.orgで入手可能な無料バージョンのTranslatePressを使用して、このチュートリアルのほとんどをたどることができます。 ただし、いくつかの機能には有料版のTranslatePressが必要です。これについては、以下のチュートリアルで必ず説明します。

1. TranslatePressをインストールし、言語を選択します

開始するには、TranslatePressプラグインをインストールしてアクティブ化します。

WordPress.orgから無料版をインストールできます。 または、TranslatePressプレミアムを購入する場合は、TranslatePressダッシュボードからプレミアムプラグインをダウンロードできます。

どのバージョンが最適かわからない場合は、いつでも無料バージョンから始めて、設定や翻訳を失うことなく後でアップグレードできます。

プラグインをアクティブにしたら、 [設定]→[TranslatePress]に移動して、ストアで使用する言語を選択します。

  • デフォルト言語–ストアの現在のコンテンツがすべて存在する言語。
  • すべての言語–ストアのコンテンツを翻訳する1つ以上の新しい言語。 TranslatePressの無料バージョンでは、1つの新しい言語を追加できます(合計2つの言語)。 2つ以上の新しい言語を追加するには、無制限の言語をサポートするプレミアムバージョンのTranslatePressが必要です。

たとえば、ストアが現在英語で存在し、それをスペイン語に翻訳する場合は、次のようにTranslatePress設定を構成します。

TranslatePressを使用したWooCommerceの言語設定

TranslatePressは、数百の言語とロケールをすぐにサポートするため、ドロップダウンを使用して目的の言語をすべて見つけることができるはずです。

ただし、使用する言語が表示されない場合は、TranslatePressでカスタム言語を追加することもできます。

これらを設定するには、TranslatePress設定領域の[詳細設定]タブに移動し、[カスタム言語]セクションまでスクロールします。

2.自動翻訳を設定する(オプション)

このステップはオプションです。 ただし、時間を節約したい場合は、すべてを最初から翻訳するのではなく、自動機械翻訳を使用してストアのベースライン翻訳を生成できます。

機械翻訳を使用している場合でも、サービスが生成するすべての翻訳を完全に編集できるため、WooCommerceストアのすべての翻訳を完全に制御できます。

機械翻訳を使用したくない場合は、次の手順をスキップしてコンテンツの手動翻訳を開始できます。

機械翻訳を使用たい場合、TranslatePressは2つの異なるサービスをサポートしています。

  • Google Translate API –これは無料バージョンのTranslatePressで使用できます。
  • DeepL –このサービスにはプレミアムTranslatePressBusinessライセンスが必要です。

Google翻訳は基本的な使用には問題ないはずですが、多くの人は、特に文脈や非公式な言語に関して、DeepLの翻訳がもう少し正確であると感じています。

ただし、DeepLの欠点は、Google翻訳ほど多くの言語をサポートしていないことです。そのため、選択した言語をサポートしていることを再確認する必要があります。

これらのサービスを設定するには、TranslatePress設定領域の[自動翻訳]タブに移動します。

まず、[自動翻訳を有効にする]ドロップダウンを[はい]に設定して、追加のオプションを展開します。

次に、お好みの翻訳エンジンを選択します。 次に、そのサービスのAPIキーを入力する必要があります。これにより、WordPressサイトをそのサービスに接続できます。

TranslatePressには、両方のサービスのAPIキーを取得する方法に関するステップバイステップのドキュメントがあります。

  • GoogleTranslateAPIの主要なドキュメント
  • DeepLAPIキーのドキュメント

最後に、1日に実行する機械翻訳文字の数に制限を設定するオプションもあります。これは、予算を管理するのに役立ちます。

TranslatePressプラグインは、機械翻訳の使用量に基づいて料金を請求することはありません。 ただし、使用状況によっては、Google翻訳またはDeepLに直接支払う必要がある場合があります。

Google翻訳とDeepLはどちらも、月額500,000文字を無料で翻訳できる無料プランを提供しています。これは、月額1か月で500,000文字以上を翻訳する必要がある場合は、次の料金を支払う必要があります。

  • Google翻訳は、無料の制限を超えて100万文字あたり$20を請求します。
  • DeepLは、月額$5.49の定額料金と100万文字あたり$25を請求するため、Google翻訳よりも少し高価になります。

予算が心配な場合は、TranslatePressの1日の翻訳制限を使用して、無料枠内にとどまるようにするか、APIアクセスに支払う必要のある金額を制限することができます。

Google翻訳を使用したWooCommerce自動翻訳オプション

選択したら、[変更を保存]ボタンをクリックします。 次に、TranslatePressはコンテンツの翻訳を開始します。

3.WooCommerceコンテンツを翻訳する

これで、WooCommerceストアのコンテンツの翻訳を開始する準備が整いました。

自動機械翻訳を使用するかどうかに関係なく、すべての翻訳を管理するために同じ視覚的な翻訳インターフェースを使用します。

  • 機械翻訳を使用した場合、ストアの翻訳にはサービスからの翻訳が事前に入力されます。 ただし、必要に応じて、これらの翻訳を完全に編集することができます。
  • not 機械翻訳を使用なかっ上記のように、TranslatePressは視覚的な翻訳エディタを使用します。 まず、エディターが高レベルでどのように機能するかを示し、次にWooCommerceの特定の部分を翻訳する方法を掘り下げます。

    翻訳エディタを起動するには、サイトのフロントエンドで翻訳するコンテンツを開きます。 次に、WordPressツールバーの新しい[ページの翻訳]オプションをクリックします。

    翻訳エディタでは、画面の右側にページのライブプレビューが表示され、左側に翻訳を管理できるサイドバーが表示されます。

    テキストやその他のコンテンツを翻訳するには、ライブプレビューにカーソルを合わせて、鉛筆アイコンをクリックするだけです。 これにより、サイドバーに翻訳が開き、エディターフィールドを使用して変更を加えることができます。

    これと同じアプローチを使用して、商品、カートページ、ブログ投稿など、ストアのコンテンツを翻訳します。

    それがどのように機能するかをよりよく理解するために、WooCommerceストアの特定の部分を翻訳する方法を見てみましょう。

    WooCommerce製品を翻訳する方法

    WooCommerce製品を翻訳するには、翻訳する製品をストアのフロントエンドで開きます。 次に、WordPressツールバーの[ページの翻訳]オプションをクリックして、エディターを起動します。

    次に、上記のGIFで示したすべての製品の詳細を翻訳できます。

    また、商品テキストの翻訳や商品画像の「翻訳」だけでなく、買い物客が選択した言語に基づいてストアにさまざまな画像が表示されるようにすることもできます。

    これは、商品画像の一部にテキストが含まれている場合や、何らかの理由で画像をローカライズする必要がある場合に特に便利です。

    商品画像を翻訳するには、画像にカーソルを合わせて鉛筆アイコンをクリックします。 その後、WordPressメディアライブラリから使用する別の画像を選択できるようになります。

    画像属性は、TranslatePressを使用してWooCommerceに変換されます

    注– WooCommerceテーマで商品画像にライトボックスまたはズーム効果を使用している場合、鉛筆アイコンをクリックする前に、画像をクリックしてライトボックスを開く必要がある場合があります。

    WooCommerceストアページの翻訳方法

    ストアページを翻訳するには、同じビジュアルエディターを使用できます。 翻訳したいストアページまたは製品アーカイブを開き、[ページの翻訳]ボタンをクリックするだけです。

    ここでの良い点は、TranslatePressがすでに翻訳した製品の詳細を自動的に検出することです。 したがって、製品のすべてのタイトルをすでに翻訳している場合、それらの翻訳はショップページに事前に入力されます。

    WooCommerceストアページの翻訳方法

    WooCommerceカートページを翻訳する方法

    TranslatePressを使用すると、ビジュアルエディターを使用してWooCommerceカートページを簡単に翻訳することもできます。

    デフォルトでは、TranslatePressは、WooCommerceの既存の言語パックが利用可能な場合はそれを使用しようとします。 ただし、ストアのすべての言語(ストアの元の言語を含む)ですべての翻訳を完全に編集できます。

    WooCommerceショッピングカートには、翻訳が必要な2つの異なる州があります。

    1. 空–買い物客がアイテムを追加する前のカートの内容。
    2. フル–買い物客が1つ以上のアイテムを追加したときのカートの内容。

    まず、ストアのフロントエンドに移動して、ショッピングカートが空であることを確認します。 次に、カートページを開き、TranslatePressエディターを起動します。

    これで、同じポイントアンドクリックアプローチを使用して、空のカートコンテンツをすべて翻訳できます。 翻訳を開くと、WooCommerceの言語パックからの翻訳が事前に入力されていることがわかりますが、必要に応じて両方の翻訳を編集できます。

    空のバージョンのカートの翻訳が終了したら、ストアのフロントエンドに戻り、カートにアイテムを追加します。 どんな商品でもかまいません。重要なのは、カートに商品が入っていることだけです。

    次に、カートページに戻り、TranslatePressエディターを再度起動します。 これで、同じアプローチを使用して、買い物客がカートにアイテムを入れたときに表示されるすべてのコンテンツを翻訳できます。

    WooCommerceチェックアウトページを翻訳する方法

    カートページを翻訳したのと同じように、WooCommerceチェックアウトページを翻訳できます。

    まず、ストアのフロントエンドでチェックアウトページを起動します。 つまり、カートにアイテムを追加し、ボタンをクリックしてチェックアウトする必要があります。

    チェックアウトページを開いたら、WordPressツールバーのボタンを使用して、これまでと同じようにTranslatePressエディターを起動します。

    これで、同じポイントアンドクリックアプローチを使用してWooCommerceチェックアウトを翻訳できます。

    WooCommerceカートページと同様に、TranslatePressは、既存のWooCommerce言語パック(利用可能な場合)から翻訳をインポートすることにより、翻訳を事前に入力しようとします。 ただし、元の言語を含む、ストアのすべての言語の翻訳を完全に編集できます。

    メニュー項目、ウィジェット、およびその他のフロントエンドコンテンツを翻訳する方法

    この時点で、WooCommerceストアのすべての重要な要素を翻訳する方法を理解できました。 ただし、次のようなストアの他の要素を翻訳するために、まったく同じアプローチを使用できることに注意することが重要です。

    • メニュー項目;
    • ウィジェット(またはブロックウィジェット);
    • WordPressエディターのコンテンツ—新しいブロックエディター(Gutenberg)と従来のTinyMCEエディターの両方で動作します。
    • ページビルダープラグインを使用して設計したコンテンツ。
    • 任意のフォームビルダープラグインからのフォーム。
    • ポップアッププラグインからのポップアップ。
    • …等々。

    たとえば、ストアのメニュー項目の1つを翻訳する場合は、メニュー項目にカーソルを合わせて鉛筆アイコンをクリックするだけです。

    メニュー項目を1回翻訳すると、TranslatePressは、そのメニュー項目が表示されるすべての場所でその翻訳を自動的に使用します。他のページで作業を複製する必要はありません。

    SEOメタデータを翻訳する方法

    多言語対応のWooCommerceSEOの恩恵を受けたいとします。 その場合、SEOタイトル、メタ説明、URLスラッグ、Open Graph情報など、ストアのバックエンドSEOの詳細も翻訳する必要があります。

    TranslatePressは、これらすべての詳細を翻訳するのにも役立ちますが、TranslatePressのプレミアムパーソナルライセンスで利用できるSEOパックアドオンが必要になります。

    このアドオンを使用すると、サイトのすべてのSEO情報を翻訳できます。 これを行うために、TranslatePressは、Yoast SEO、RankMathなどを含む最も人気のあるSEOプラグインと自動的に統合します。

    SEO Packアドオンをインストールすると、翻訳エディターのドロップダウンを使用してこれらの詳細を選択することで、これらの詳細を翻訳できるようになります。

    たとえば、Yoast SEOを使用してSEOの詳細をすでに設定している場合、それらの詳細がエディターに表示され、他のコンテンツと同じように翻訳できるようになります。

    同じアプローチを使用して、個々の製品(およびブログ投稿などの他のコンテンツ)のURLスラッグを翻訳することもできます。

    製品カテゴリのベーススラッグなど、サイト全体のURLスラッグの場合は、文字列変換インターフェイスを開くことができます。

    4.WooCommerce言語スイッチャーを構成します

    この時点で、多言語対応のWooCommerceストアが機能しています。

    ただし、買い物客が好みの言語を簡単に選択できるようにするには、ストアのフロントエンド言語スイッチャーを設定する必要があります。

    デフォルトでは、TranslatePressはストアの右下隅にフローティング言語スイッチャーを追加します。 ただし、フローティング言語スイッチャーの場所を変更したり、まったく異なる配置オプションを使用したりすることもできます。

    TranslatePressを使用したWoocommerce言語スイッチャー

    ストアの言語スイッチャーを配置するためのオプションは次のとおりです。

    • フローティング言語スイッチャー–ストアの隅にあるすべてのページに表示します。
    • メニュー項目– [外観]→[メニュー]に移動して、言語スイッチャーをメニュー項目としてサイトの任意のメニューに追加します。
    • ショートコード–ショートコードを使用して、サイトの任意の場所に言語スイッチャーを手動で配置します。

    また、言語スイッチャーのコンテンツと動作を制御するための設定も取得します。 例えば:

    • 言語名–完全な言語名を表示するか、2文字のISOコードのみを表示するかを選択します。
    • 国の旗–国の旗を表示するかどうかを選択します。 フラグを有効にすると、TranslatePressは選択した特定のロケールのフラグを表示します。 したがって、スペイン語(スペイン)を選択した場合は、スペイン国旗が表示されます。 ただし、スペイン語(メキシコ)を選択した場合は、メキシコの旗が表示されます。

    これらの設定を構成するには、 [設定]→[TranslatePress]に移動し、[言語スイッチャー]設定まで下にスクロールします。

    TranslatePressのWooCommerce言語スイッチャー設定

    デフォルトのフローティング言語スイッチャーの代替配置を見てみましょう。

    WooCommerce言語スイッチャーをメニュー項目として追加する方法

    WooCommerce言語スイッチャーをメニュー項目として追加するには、[外観]→[メニュー]に移動して、通常のWordPressメニューエディターにアクセスし、編集するメニューを開きます。

    次に、言語スイッチャーの設定を使用して、言語スイッチャーを構成できます。

    ここには2つの主なオプションがあります…

    まず、サイトで2つの言語しか使用していない場合は、[反対言語]項目をトップレベルのメニュー項目として追加するだけです。 このメニュー項目を使用すると、ストアには、提供している他の言語に切り替えるためのオプションが表示されます。

    WooCommerceストアメニューの翻訳

    あなたの店が英語とスペイン語の両方で利用可能であるとしましょう。 買い物客が英語で閲覧している場合、メニューにスペイン語のオプションが表示されます。 ただし、スペイン語で閲覧している場合は、英語のオプションが表示されます。

    トップメニュー内のWooCommerceフラグ

    もう1つのオプションは、[現在の言語]メニュー項目を使用することです。 これにより、買い物客が現在閲覧している言語が表示されます。次に、次のように、特定の言語を[現在の言語]メニュー項目のサブメニュー項目として追加できます。

    ナビゲーションメニュー内のWooCommerceの多言語選択

    この設定では、買い物客は現在選択されている言語をトップレベルのメニュー項目として表示します。 次に、カーソルをホバーして、使用可能なすべての言語を含むドロップダウンを表示できます。 ただし、TranslatePressは、重複を避けるために、ユーザーが現在選択している言語のドロップダウンを非表示にします

    ナビゲーションメニュー内のWooCommerceの多言語選択

    3つ以上の言語を提供する場合、これはおそらくストアにとって最良のアプローチです。

    WooCommerce言語スイッチャーをショートコードとして追加する方法

    言語スイッチャーの配置をさらに細かく制御したい場合は、次のショートコードを使用して、ストアのどこにでも手動で追加できます。

     [言語スイッチャー]

    このショートコードは、ウィジェット、ブロック、エディターで作成したコンテンツなどに配置できます。

    WordPressのdo_shortcode()関数を使用して、言語スイッチャーをテーマのテンプレートファイルに直接配置することもできます。

    多言語対応のWooCommerceストアを今すぐ作成

    WooCommerceストアを翻訳することは、多言語SEOやその他の新しいマーケティング機会のおかげで、既存の顧客により良いショッピング体験を提供し、新しい顧客にリーチするための優れた方法です。

    WooCommerceはコアプラグインの多言語機能をサポートしていませんが、TranslatePressプラグインを使用して多言語ストアを簡単に作成できます。

    TranslatePressのビジュアルエディターを使用すると、単一の商品ページ、ショップページ、カートページ、チェックアウトページ、SEOメタデータ、WooCommerce以外のコンテンツを含むストアを完全に翻訳できます。

    フロントエンド言語スイッチャーを追加して、買い物客がストアを閲覧しているときに好みの言語を選択できるようにすることができます。

    この投稿では、WooCommerceを翻訳し、多言語ストアを作成する方法を段階的に学習しました。

    開始する準備ができたら、無料のTranslatePressプラグインを今すぐインストールして、どのように機能するかを確認してください。

    また、ストアの計画段階にある場合は、最高のWooCommerceテーマとその他の優れたWooCommerceプラグインをチェックして、ストアを成功に導くことができます。

    WooCommerceの翻訳についてまだ質問がありますか? コメントで教えてください!

    この投稿は役に立ちましたか?