WordPressで「英語」ボタンを押すと、サイトの内容を英語に翻訳する機能を実装するには、以下のような方法があります。
方法 1: プラグインを利用する
簡単で一般的な方法は、翻訳用のプラグインを利用することです。
1. 人気の翻訳プラグイン
- TranslatePress
- 完全な翻訳エクスペリエンスを提供。フロントエンドで直接翻訳を確認しながら編集可能。
- ウィジェットやショートコードを使って「言語切り替えボタン」を簡単に配置できます。
- WPML (WordPress Multilingual Plugin)
- 多言語対応に特化した有料プラグイン。大規模なサイトに向いています。
- GTranslate
- Google Translate APIを利用し、自動翻訳を簡単に追加できます。
- 無料版は翻訳ボタンを即座に作成可能。
2. 手順
- プラグインをインストールし、設定画面に移動します。
- 翻訳先の言語を「英語（English）」に設定します。
- サイトに「言語切り替えボタン」を設置します（プラグイン設定やウィジェットで設定可能）。
方法 2: Google Translate APIを利用
プラグインを使わず、自分で機能を実装したい場合には、Google Translate APIを使う方法もあります。
実装手順
- Google Cloud PlatformでAPIキーを取得
Google Translate APIを有効化し、APIキーを取得します。 - JavaScriptを追加 テーマの
header.phpや専用のJavaScriptファイルに以下のコードを追加します。
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{pageLanguage: 'ja', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE},
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- ボタン設置 任意の場所に以下のHTMLを追加します。
<button onclick="document.querySelector('#google_translate_element select').value='en';document.querySelector('#google_translate_element select').dispatchEvent(new Event('change'));">
英語に翻訳
方法 3: カスタムコードで多言語対応
テーマに直接カスタムコードを埋め込む方法
英語用のページを個別に作成し、メニューやボタンを設定する方法です。
手順
- WordPressの「ページ」セクションで英語バージョンのページを作成します。
- メニューを編集し、「英語ページ」へのリンクを追加します。
- カスタムCSSやJSで言語切り替えボタンをスタイリングします。
注意点
- 自動翻訳（Google Translateなど）は簡単ですが、正確性に欠ける場合があります。重要なコンテンツでは手動翻訳を検討してください。
- サイト訪問者の利便性を考慮し、言語切り替えボタンのデザインや配置を工夫してください。
コメント