電話Twitterホームノウハウホームページ制作JavaScript英語など他の言語と日本語の切り替えをページごとにURL指定せずにボタンひとつで行えるようにするJavaScriptでの実装(jQueryなし)FacebookTwitterhatenaPocketLINEURLコピーコピーしましたJavaScript英語など他の言語と日本語の切り替えをページごとにURL指定せずにボタンひとつで行えるようにするJavaScriptでの実装(jQueryなし)最終更新日:2023/02/25FacebookTwitterhatenaPocketLINEURLコピーコピーしましたWordPressを用いての英語など多言語サイトの作り方をこちらの記事で紹介しました。その中で、他の言語(以下、例として英語とする)と日本語の切り替え方法を簡単にご紹介しましたが、ここではそのJavaScriptの解説をいたします。詳しくはこちらの記事を参照いただきたいのですが、英語サイトを設ける場合のディレクトリ構造として大きく3種類ある中で、以下のようにディレクトリで分ける場合を想定した内容になっています。応用することで、独自ドメインで分ける場合、サブドメインで分ける場合にも活用はできると思います。大体コメントアウトの形で書いてしまいましたが、それに補足を加えると以下の通りです。1行目:表示されているURLを取得2行目:ドメイン名までの部分を変数に格納します。ドメイン名と書いているのは、例として示すとwww.example.comなどです。3行目:ドメイン名までの部分を消すことで、ドメイン名以降の部分を取得します。「https://www.example.com/about/」のページであれば、about/という文字列が取得されることとなります。6~10行目:ここで見た目の変更が必要な場合、と書いているのは、例えば上記のHTMLの例では「言語切替」の文言を「英語に切替」「日本語に切替」と日本語と英語で変える場合は元々そうしておけば良いのですが、スタイルを変えたい場合に、ここでJavaScriptで変える方法があります。15~17行目:ページ内リンクがあって、そのリンクが押された後の状態の場合、URLの末尾が#indexのようになるので、変数からその部分を消しています。19行目:あまりないと思いますが、スイッチが押された後、言語が切り替わる前にアニメーションなどを見せたい場合はここでその処理を書きます。22~24行目:URLに/en/が含まれるかどうかで現在のページの言語を判断し、英語の場合は/en/を取ることで日本語ページに遷移させます。29~30行目:日本語ページの場合、トップページとそれ以外で条件分岐をしています。31~34行目:トップページ以外の場合、ドメインの後に/en/がくるので、定義した変数beforeDomainとafterDomainを利用して、そうなるようにしています。まとめ英語など、日本語以外の言語ページを設ける場合に、JavaScriptを使って言語スイッチボタンを設ける方法についてご説明しました。WordPressにはプラグインもあるようですが、相当重くなってしまった状態のサイトを見たことがあります。このように、プラグインなしでも簡単に実装できる場合が多いと思うので、極力プラグインは使わないようにしましょう。サイトを軽く、SEOに考慮して、良いデザインにしたい方、ぜひお気軽に当方にお問い合わせください。Inada)2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。検索ノウハウ一覧カテゴリーSEO69ホームページ制作67アクセシビリティ6WordPress32HTML&CSS12JavaScript16PHP4その他6UX4同じカテゴリーの他の記事スクロールしたら動くアニメーションを素のJavaScriptとCSSで実装ウェブサイトを見ているとよく見かける、スクロールすると要素が動くアニメーション。ほとんどはjQuer...グローバルナビゲーションで現在地を表示する(カレント表示)ウェブサイトのPC画面で表示するヘッダーのメニューのことを、どの画面でも表示されるという意味合いから...スクロールに応じた視差(パララックス)効果のある動きをJavaScriptライブラリなしで実装スクロールしたとき、普通なら画面全体が同じように動きますが、部分的に他とは違う動きをつけると、視差効...素のJavaScriptでタブ切り替え(タブパネル作成)タブパネルを素のJavaScriptを使って(jQueryなしで)作成する方法についてご紹介します。