ホームページに多言語プルダウンを設置する方法【Google翻訳活用】

自作ホームページを多言語対応させたいときに便利なのが Google翻訳の埋め込み機能です。今回は 記事ファイルを書き換えずに、ヘッダー直下にプルダウン式の言語切替を設置する方法を紹介します。

完成イメージ

• 上に濃紺ヘッダー（高さ40px固定）
• その直下にグレーの言語バー（高さ30px）
• 右端にプルダウンが常時表示され、クリックで翻訳が切り替わる

1. PHPで言語選択をCookieに保存

<?php
if (isset($_GET['translate'])) {
    $to = preg_replace('/[^a-zA-Z\-]/', '', $_GET['translate']);
    if ($to) {
        setcookie('googtrans', '/ja/' . $to, time() + 365*24*60*60, '/');
    }
    $url = strtok($_SERVER['REQUEST_URI'], '?');
    header("Location: $url", true, 302);
    exit;
}
?>

2. Google翻訳ウィジェットを読み込む

<style>
  .goog-te-banner-frame.skiptranslate{display:none!important}
  body{top:0!important}
  #google_translate_element{display:none}
</style>
<script>
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'ja',
      includedLanguages: 'en,mn,zh-CN,ko,fr,de,es,vi,th,ru',
      autoDisplay: false
    }, 'google_translate_element');

    const m = document.cookie.match(/(?:^|;\s*)googtrans=([^;]+)/);
    if (m && m[1]) {
      const to = decodeURIComponent(m[1]).split('/').pop();
      setTimeout(() => {
        const sel = document.querySelector('#google_translate_element select');
        if (sel && to) {
          sel.value = to;
          sel.dispatchEvent(new Event('change'));
        }
      }, 600);
    }
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="google_translate_element"></div>

3. ヘッダー直下に言語バーを設置

<!-- 言語切替バー -->
<div class="lang-bar">
  <div class="lang-switch">
    <label for="lang-select">🌐</label>
    <select id="lang-select" onchange="if(this.value) location.search='?translate='+this.value;">
      <option value="">選択してください</option>
      <option value="ja">日本語</option>
      <option value="en">English</option>
      <option value="mn">Монгол</option>
      <option value="zh-CN">中文</option>
      <option value="ko">한국어</option>
    </select>
  </div>
</div>

4. CSSでデザイン調整

/* 言語切替バー */
.lang-bar {
  position: fixed;
  top: 40px;       /* ヘッダーの下 */
  left: 0;
  right: 0;
  height: 30px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
  z-index: 1001;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 14px;
}
.lang-switch select {
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
main {
  padding-top: 70px !important;
}

ポイント

• 記事ファイルは一切変更不要
• Google翻訳を使って簡単に多言語表示が可能
• SEO対策には向かないため、閲覧者向けの翻訳支援に最適

これで、ヘッダー直下に言語プルダウンが常時表示され、どの記事でもワンクリックで翻訳して閲覧できるようになります。

キーワード

多言語対応, Google翻訳, ホームページ, 言語切替, プルダウンメニュー, PHP, Cookie保存, ウィジェット, SEO, ウェブ制作