プラグインなしでWordPressの多言語切り替えは数秒で実現できます！

プラグインに頼ることなく、WordPressウェブサイトに多言語サポートを実装したいですか？この記事では、手動で行うためのステップを順を追って説明します！ HTML 多言語切り替え機能により、ページの言語表示をコントロールでき、プラグインに制限されない柔軟なカスタマイズが可能です。

I. なぜ手動で多言語を設定するのですか？

周知の通りだ。WordPressプラグイン(WPML、Polylangなど)は強力ですが、すべてのプロジェクトがプラグインによる多言語管理に適しているわけではありません。例えば、静的なサイト、軽量なプロジェクト、高いパフォーマンスが要求されるサイトなど、このような場合は手動でHTMLを通して多言語を設定する方が適切です：

単一ページ/ランディングページのプロジェクト（動的に生成されたコンテンツなし）
低コストのプロジェクト（プラグイン料金の節約）
右 SEO 高い制御要件（手動設定） hreflang--ウェブページの言語とジオロケーションの指定用そしてメタ)
2～3言語のみをサポートするシンプルなサイト

第二に、核となる原則：HTMLタグとJavaScriptを通じて、言語の切り替えを実現する。

核となる考えはこうだ：

あらかじめ異なる言語でコンテンツを書く
ウェブページに中国語や英語など異なる言語のテキストを掲載する。
「コンテンツの「言語ラベリング
クラス名やカスタム属性を使用して、何が中国語で何が英語かを明確に示す。
JavaScriptでのスイッチング
ユーザーが言語ボタンをクリックするとジャバスクリプト対応する言語を表示し、それ以外を隠す役割を担う。
SEO対策も同時に行う
ホームページ <head> 追加 hreflang どのページがどの言語に対応しているかを検索エンジンに知らせるためのマークアップと、トグルボタンによるユーザーエクスペリエンスの向上。

HTML多言語アーキテクチャ設計例

をサポートしたいと仮定すると 英語 (ja) 歌で応える 中国語（zh）ページ構成のコード例は以下の通り：

<!-- 标题 -->
<h1 class="lang" data-lang="en">私のウェブサイトへようこそ</h1>
<h1 class="lang" data-lang="zh">私のウェブサイトへようこそ。</h1>

<!-- 正文段落 -->
<p class="lang" data-lang="en">お客様のニーズに合わせた質の高いサービスを提供します。</p>
<p class="lang" data-lang="zh">お客様のニーズに合わせた質の高いサービスを提供します。</p>

<!-- 切换语言按钮 -->
<button onclick="switchLanguage('en')">英語</button>
<button onclick="switchLanguage('zh')">中国語</button>

JSスクリプト制御言語切り替え

{
      el.style.display = el.dataset.lang === lang ? 'block' : 'none'；
    });

    // ユーザーの選択を保存する
    localStorage.setItem('selectedLang', lang)；
  }

  // ユーザーの最後の選択に基づいて、ページ読み込み時に自動的に切り替わります。
  window.onload = function() {
    const savedLang = localStorage.getItem('selectedLang') || 'en'; switchLanguage(savedLang); } // ユーザーの最後の選択に基づいて、ページの言語をロード時に切り替えます。
    switchLanguage(savedLang)；
  
</script

概要：（異なる言語の）複数のコンテンツが実際にページ上に記述され、JSスクリプトはボタンによってどの言語を表示するかを制御する。ブラウザはユーザーがどの言語を選択したかを記憶しているので、毎回再クリックする必要はない。

レンダリングページの例を以下に示す：

第四に、SEO最適化のアドバイス：忘れてはならないこと。 `<link hreflang>` とメタ設定

検索エンジンが異なる言語バージョンのページを認識できるようにするために、以下を追加することをお勧めします。 <head> タグ (HTML文書のヘッダーコンテナで、文書属性を定義し、メタデータ、スクリプト参照、その他の情報を格納するために使用される。):

のようになります。
のように。

あなたのウェブサイトが シングル・ページ・アプリケーション（SPAモード）つまり、すべてのコンテンツが1つのページで切り替わるのであれば、次のページで切り替えるのがよい。 ウェブサイトに言語ロゴを掲載する.

を使用することが可能です。 #lang=zh このフォーム
例えば https://example.com/#lang=zh 中国語のページを示す。
URLパラメータも使用できる：
例えば https://example.com/?lang=en 英語ページを示す。

これには2つの利点がある：

ユーザー・エクスペリエンスの向上ページをリフレッシュしたり、誰かにリンクをコピーしたりする際に、対応する言語のコンテンツを直接開くことができます。
SEO 仲良くによってURLの言語パラメータを動的に変更することができます。 <タイトル 歌で応える <meta> タグを使用して、検索エンジンが各言語版を認識できるようにしています。

V. 多言語リソースをどのように整理するか？単一ページと複数ページの構造の比較

パラダイム	バンテージ	欠点
単一ページ切り替え	軽量ページ、高速切り替え、小規模サイトに最適	SEOに不利なサブ言語のインクルージョン
マルチページアーキテクチャ	SEOフレンドリーで、各言語に個別に最適化するのが簡単です。	管理の複雑さと文書量

推薦します：

エンタープライズ公式サイト もしかしたら 製品ランディングページ推奨シングルページ多言語；
ブログ／コンテンツ・ベースのウェブサイト言語ごとにページを分けることをお勧めします；

ハイレベルなスキル：エクスペリエンスを向上させるためのCSSと構造の最適化

多言語切り替えを行う際には、ユーザー体験をより良いものにするために、細かな工夫を加えることもできる：

ブラウザの現在の言語を表示する
- ある HTMLタグ例えば、言語属性を書き込む： <html lang="en">  <html lang="zh"> 
- こうすることで、ブラウザや検索エンジンは現在のページが何語で表示されているかを知ることができる。
メタタグによる補足
- ある <head> リガ 「言語
- 検索エンジンが言語バージョンをより明確に認識できるように、ページにちょっとしたラベルを貼るようなものだ。
追加切り替えアニメーション
- 言語を切り替える際には、CSSアニメーションを使用してテキストを「フェードイン／フェードアウト」させることで、よりスムーズに見せることができます。
- 例 .lang { transition: opacity 0.3s ease; /* 切り替え時のグラデーション効果 */ }.

まとめと提言

手作業でHTML + JSを使用して多言語サイトを設定することで、プラグインのバインディング、制御されたSEO構造、ユーザーエクスペリエンスに伴う肥大化や潜在的な競合を回避し、より軽量で柔軟な多言語ソリューションを得ることができます。

しかし、この方法は次のような場合に適している。固定されたコンテンツ構造そして言語数の少なさそしてSEOの基礎知識ユーザー数大規模なサイトや頻繁にコンテンツを更新する場合は、管理を簡素化するために成熟したプラグインを使用することをお勧めします。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み