統合ガイド

AIによるWordPressウェブサイト翻訳

1. アカウントを作成する

必要なのは、bodyタグの先頭にカスタムコードを追加し、言語切替用のコードを埋め込むことだけです。さらに、次の手順を完了していることを確認してください::

  • https://app.globalseo.ai でサインアップしてください。.
  • プロジェクトを作成し、ウェブサイトを翻訳したい言語を選択してください。.
  • 生成されたHTMLコードをコピーしてください。.
  • プロジェクトを保存してください。.

HTMLスクリプトをウェブサイトに追加する方法:

Add Footer

One of the easiest ways to add code to your WordPress header and footer is by using a plugin. There are several plugins available that allow you to easily add custom code to your site’s header and footer. Some popular options include:

After installing one of the plugins, head to settings and click the plugin. Here, you should be able to insert code into the head of your WordPress page.

We also made a video explaining the integration: https://www.youtube.com/watch?v=jQY6Hk5mK7E


Add the following code to your "Scripts in Header" section:

<link href="https://unpkg.com/globalseo/dist/translate.css" rel="stylesheet">
<script
  src="https://unpkg.com/globalseo/dist/translate.js"
  data-globalseo-key="YOUR_API_KEY"
  data-use-browser-language="true"
  data-dynamic-translation="false"
  data-original-language="en"
  data-allowed-languages="de, es, ru, id, hi, zh, ja"
  data-exclude-classes=""
></script>

Configuration:

  1. Important: Replace YOUR_API_KEY with the actual API key obtained from your project. This is crucial for enabling the translation services.
  2. Language Settings:
    • data-original-language: Set this attribute to your website's primary language code (e.g., en for English, fr for French).
    • data-allowed-languages: Configure this according to your project's requirements. List the language codes (e.g., en, fr, de) that you wish to support on your site.

For more settings, please visit: GitHub

Optional Configuration:

  1. data-use-browser-language: By default, this is set to automatically translate the website based on the user's browser language. If you prefer to disable this feature, set it to false.
  2. data-exclude-classes: Specify any CSS class names that should not be translated by the service. This is particularly useful for elements such as chatbots, which may not require translation. List the classes separated by commas (e.g., chatbot, no-translate).

2. Add the language selector

Add the following line of code somewhere on your website. We recommend including it inside the navigation.

<div class="globalseo-select globalseo-lang-selector-wrapper globalseo-exclude">
  <details 役割="グループ">
     <概要 役割="ボタン" class="globalseo-lang-selector-loading">
        <svg class="globalseo-lang-selector-loading-icon" width="20" 高さ="20" ビュー ボックス="0 0 34 34" 塗りつぶし="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M16.7906 28.9982C14.131 28.9516 11.5622 28.0231 9.48748 26.3584C7.4128 24.6937 5.94973 22.3871 5.328 19.8007M16.7906 28.9982C13.4777 28.9404 10.8853 23.521 11.0009 16.8953C11.1166 10.2697 13.8966 4.94402 17.2094 5.00185M16.7906 28.9982C17.4055 29.0089 18.0021 28.8342 18.5667 28.5M16.7906 28.9982C17.4353 29.0094 17.904 28.9456 18.4338 28.8411M5.328 19.8007C8.73815 21.7699 12.6799 22.9255 16.8953 22.9991C17.5541 23.0116 18.2116 22.9969 18.8663 22.9553M5.328 19.8007C5.09283 18.8151 4.98323 17.8037 5.00182 16.7906C5.03917 14.6509 5.63417 12.6503 6.64706 10.9277M17.2094 5.00185C20.5222 5.05968 23.1147 10.4791 22.9991 17.1047C22.9878 17.7501 22.9513 18.3831 22.8914 19M17.2094 5.00185C19.3374 5.03811 21.4175 5.63986 23.2362 6.74538C25.0548 7.8509 26.5467 9.42037 27.5585 11.2928M17.2094 5.00185C15.0814 4.96382 12.9816 5.49262 11.1255 6.53399C9.26935 7.57536 7.72367 9.09181 6.64706 10.9277M27.5585 11.2928C24.612 13.7563 20.8749 15.0729 17.0349 15.0003C13.0382 14.9306 9.40832 13.4003 6.64706 10.9277M27.5585 11.2928C28.5415 13.1075 29.0375 15.146 28.9982 17.2095C28.9905 17.6459 28.9597 18.0764 28.9068 18.5" 
           stroke="#000000" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
           <g style="animation: globalseospin 2s linear infinite; transform-origin: 26px 26px;">
             <circle cx="26" cy="26" r="7.125" stroke="#000000" stroke-width="1.75" stroke-dasharray="31.42" stroke-dashoffset="10.47"></circle>
           </g>
       </svg>
     </概要>
  </details>
</div>

URLパラメータを追加するだけで言語を切り替えることができます:" :?lang=LANG_CODE". 例えば:

<div class="globalseo-exclude">
    <a href="?lang=en">EN</a>
    <a href="?lang=de">ドイツ語</a>
</div>

3. ウェブサイトを翻訳する

ページが公開された後、ウェブサイトのURLを確認し、言語セレクターから言語を選択してください。ページが翻訳中ですので、数分かかる場合があります。 .

任意: 翻訳からテキストを除外する

翻訳からテキストを除外したい場合は、親要素に「globalseo-exclude」というクラスを追加してください。その要素内のすべてのテキストは翻訳されません。 .

残るはただ一つのことだけです:サインアップして自分で試してみてください。 .

サインアップしてAPIキーを取得
Plus Icon
統合対応
WordPress

制作提供

オートマティック株式会社.

ウェブサイト

webflow.com

カテゴリー

CMS

AIウェブサイトローカライゼーションの未来へようこそ

ウェブサイトの翻訳を5分以内に開始。サインアップして、2,000語を無料で翻訳しましょう。 .

開始する