大阪でホームページ制作ならプロットハブ

大阪で安いホームページ制作ならプロットハブ！
毎月5社限定企画実施中

プロットハブ技術ブログ
ホーム » ホームページ制作 » WordPress » WordPressでBogoの言語スイッチャーをカスタマイズする

WordPressでBogoの言語スイッチャーをカスタマイズする

Ryota Ono

Ryota Ono

2024/6/26

ホームページ制作 html・css WordPress
#WordPress

こんにちは！株式会社プロットハブのエンジニア小野です。
今回はWordPressのプラグインBogoの言語スイッチャーをカスタマイズする方法について解説します。
デフォルトの言語スイッチャーは言語の一覧をリストで表示するだけですが、ヘッダーなどに表示する場合にはデザインが合わないことがあります。
そのため、JavaScriptやCSSを使ってスタイルを変更する方法や、国旗を削除する方法などを解説します。
Bogoの設定方法や使い方についても解説しているので参考にしてください。
WordPressサイトをBogoで簡単に多言語化！手軽に始める方法を解説
コピペで完了！Bogoでカスタム投稿を多言語化する最速の方法
【リライトルールを修正】Bogoでタクソノミーのアーカイブが404になる

言語スイッチャーを表示する

まずは言語スイッチャーを表示します。
以下のコードをテーマのファイルに追加します。

<?php do_shortcode('[bogo]'); ?>

このコードを追加することで、Bogoの言語スイッチャーが表示されます。
ウィジェットで作成表示したい方はカスタムHTMLを選択し以下のコードを追加してください。

[bogo]

このようにデフォルトの言語スイッチャーが表示されます。
デフォルトの言語スイッチャー

HTMLの構造を確認する

デフォルトの言語スイッチャーは以下のようなHTML構造になっています。

<ul class="bogo-language-switcher list-view">
    <li class="en-US en first">
        <span class="bogoflags bogoflags-us"></span> 
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="en-US" href="https://plot-hub.com/en/contact/" title="英語">English</a>
        </span>
    </li>
    <li class="ja current">
        <span class="bogoflags bogoflags-jp"></span> 
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="ja" href="https://plot-hub.com/contact/" title="日本語" class="current" aria-current="page">日本語</a>
        </span>
    </li>
    <li class="zh-TW zh last">
        <span class="bogoflags bogoflags-tw"></span> 
        <span class="bogo-language-name">中文</span>
    </li>
</ul>

現在選択されている言語にはliにcurrentクラスが付与されています。
また、国旗の画像はspanタグにbogoflagsクラスが付与されています。
他の言語のページが存在する場合はaタグでリンクが設定されています。

国旗を削除する

まずは国旗を削除しましょう。
functions.phpに以下のコードを追加します。

// Bogoの言語スイッチャーの国旗を非表示にする
add_filter( 'bogo_use_flags', 'bogo_delete_flags' );
function bogo_delete_flags(){
  return false;
}
国旗削除後の言語スイッチャー
htmlの構造を確認

国旗を削除した場合のHTML構造は以下のようになります。

<ul class="bogo-language-switcher list-view">
    <li class="en-US en first">
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="en-US" href="https://plot-hub.com/en/contact/" title="英語">English</a>
        </span>
    </li>
    <li class="ja current">
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="ja" href="https://plot-hub.com/contact/" title="日本語" class="current" aria-current="page">日本語</a>
        </span>
    </li>
    <li class="zh-TW zh last">
        <span class="bogo-language-name">中文</span>
    </li>
</ul>

bogoflagsクラスが削除されていることが確認できます。

言語スイッチャーの表記を変更する

次に言語スイッチャーの表記を変更します。
$linksの中には以下のようなデータが入っています。

array(3) {
  [0]=>
  array(5) {
    ["locale"]=>
    string(5) "en_US"
    ["lang"]=>
    string(5) "en-US"
    ["title"]=>
    string(6) "英語"
    ["native_name"]=>
    string(7) "English"
    ["href"]=>
    string(32) "https://plot-hub.com/en/about/"
  }
  [1]=>
  array(5) {
    ["locale"]=>
    string(2) "ja"
    ["lang"]=>
    string(2) "ja"
    ["title"]=>
    string(9) "日本語"
    ["native_name"]=>
    string(9) "日本語"
    ["href"]=>
    string(29) "https://plot-hub.com/about/"
  }
  [2]=>
  array(5) {
    ["locale"]=>
    string(5) "zh_TW"
    ["lang"]=>
    string(5) "zh-TW"
    ["title"]=>
    string(9) "中国語"
    ["native_name"]=>
    string(6) "中文"
    ["href"]=>
    string(32) "https://plot-hub.com/zh/about/"
  }
}
  • title
    • aタグにつくtitle属性
  • native_name
    • 表示される言語名
  • lang
    • aタグのhreflang
  • locale
    • class名を追加するための値
  • href
    • リンク先のURL

今回は表示のみ変更したいのでnative_nameとtitleを変更します。

// Bogoの言語スイッチャーの表記を変更
add_filter('bogo_language_switcher_links', 'bogo_language_link_text_change');
function bogo_language_link_text_change ($links) {
    foreach ($links as $key => $value) {
        if('ja' === $value['locale']){
            $links[$key]['title'] = 'JPN';
            $links[$key]['native_name'] = 'JPN';
        }
        if('en_US' === $value['locale']){
            $links[$key]['title'] = 'USA';
            $links[$key]['native_name'] = 'USA';
        }
        if('zh_TW' === $value['locale']){
            $links[$key]['title'] = 'CHN';
            $links[$key]['native_name'] = 'CHN';
        }
    }
    return $links;
}

このようにすると言語スイッチャーの表記が変更されます。
言語スイッチャーの表記変更

htmlの構造を確認
<ul class="bogo-language-switcher list-view">
    <li class="en-US en first">
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="en-US" href="https://plot-hub.com/en/contact/" title="USA">USA</a>
        </span>
    </li>
    <li class="ja">
        <span class="bogo-language-name">
            <a rel="alternate" hreflang="ja" href="https://plot-hub.com/contact/" title="JPN">JPN</a>
        </span>
    </li>
    <li class="zh-TW zh last">
        <span class="bogo-language-name">CHN</span>
    </li>
</ul>

aタグのtitle属性とnative_nameが変更されていることが確認できます。

特定の言語の時に言語スイッチャーの表記を変更する

次に言語スイッチャーの表記を変更します。
デフォルトのままだと英語や中国語で見た時に「日本語」と表示されてしまいます。
英語圏の方は漢字を読めないことが多いので「日本語」を「JPN」に変更します。

// Bogoの言語スイッチャーの表記を変更
add_filter('bogo_language_switcher_links', 'bogo_language_link_text_change');
function bogo_language_link_text_change ($links) {
    $locale = get_locale();
    foreach ($links as $key => $value) {
        if($locale === 'en_US') {
            if('ja' === $value['locale']){
                $links[$key]['title'] = 'JPN';
                $links[$key]['native_name'] = 'JPN';
            }
        }
    }
    return $links;
}
$locale = get_locale();

get_localeで現在の言語を取得して条件分岐することで特定の言語の時だけ表記を変更することができます。
ブログサイトなどでサイドバーに表示する場合はこれぐらいのカスタマイズでも十分ですが、ヘッダーなどに表示する場合はCSSでスタイルを変更する必要があります。

JavaScriptとCSSでスタイルを変更する

リストのままヘッダーに表示すると言語が増えた場合にレイアウトが崩れることがあります。
なので今回はセレクトボックスを作成し変更されたら言語の切り替えができるようにします。

デフォルトの言語スイッチャーを非表示にする

まずはデフォルトの言語スイッチャーを非表示にします。
display: none;にするとJavaScriptで取得できないのでheight: 0;とopacity: 0;にします。

.bogo-language-switcher {
    height: 0;
    opacity: 0;
}
セレクトボックスを作成する

データを入れるためのセレクトボックスを作成します。

<select id="languageSwitcher"></select>
JavaScriptでデータを取得しセレクトボックスに追加する

.bogo-language-switcherからデータを取得しセレクトボックスに追加します。
その際に念のため、ulにdisplay: none;を設定しておきます。
ページのない言語はセレクトボックスに表示しないようにします。

document.addEventListener('DOMContentLoaded', (event) => {
   // UL要素を取得
    const ul = document.querySelector(headerId + ' .bogo-language-switcher');
    if (!ul) {
        return;
    }
    ul.style.display = 'none';

    const liElements = ul.querySelectorAll('li');
    const select = document.querySelector('#languageSwitcher');
    if (!select) {
        return;
    }

    // 既存のオプションをクリア
    select.innerHTML = '';

    // オプションを生成
    liElements.forEach(li => {
        const aTag = li.querySelector('a');
        if (aTag) {
            const option = document.createElement('option');
            option.value = aTag.href;
            option.textContent = aTag.textContent;

            // currentクラスがある場合、selectedにする
            if (aTag.classList.contains('current')) {
                option.selected = true;
            }

            select.appendChild(option);
        }
    });
});
セレクトボックスの値が変更された時にページ遷移する

セレクトボックスの値が変更された時にページ遷移するようにします。
以下のイベントリスナーを追加してセレクトボックスの値の変更を検知します。

select.addEventListener('change', (event) => {
    const selectedValue = event.target.value;
    window.location.href = selectedValue;
});

これでセレクトボックスの値が変更された時にページ遷移するようになります。

最終的なコード

最終的に以下のようなコードになります。
スタイルはお好みで変更してください。

<select id="languageSwitcher">
    <option value="https://plot-hub.com/en/contact/">English</option>
    <option value="https://plot-hub.com/contact/">日本語</option>
</select>
document.addEventListener('DOMContentLoaded', (event) => {
   // UL要素を取得
    const ul = document.querySelector(headerId + ' .bogo-language-switcher');
    if (!ul) {
        return;
    }
    ul.style.display = 'none';

    const liElements = ul.querySelectorAll('li');
    const select = document.querySelector('#languageSwitcher');
    if (!select) {
        return;
    }

    // 既存のオプションをクリア
    select.innerHTML = '';

    // オプションを生成
    liElements.forEach(li => {
        const aTag = li.querySelector('a');
        if (aTag) {
            const option = document.createElement('option');
            option.value = aTag.href;
            option.textContent = aTag.textContent;

            // currentクラスがある場合、selectedにする
            if (aTag.classList.contains('current')) {
                option.selected = true;
            }

            select.appendChild(option);
        }
    });

    select.addEventListener('change', (event) => {
        const selectedValue = event.target.value;
        window.location.href = selectedValue;
    });
});

まとめ

今回はBogoの言語スイッチャーをカスタマイズする方法について解説しました。
デフォルトでも使用できますが自分でカスタマイズすることでデザインに合わせた言語スイッチャーを作成することができます。
弊社ではWordPressで多言語化をしたい方のサポートも行っておりますのでお気軽にお問い合わせください。

プロットハブはホームページ制作を
支援しています。
ご興味のある方はぜひお気軽に
ご相談ください。

プロットハブに
ホームページ制作の相談してみる

ホームページ制作の一覧へ戻る

全カテゴリ一覧

全タグ一覧

関連記事

コメント

コメントを残す

コメントが承認されると公開されます。※の入力欄は必須項目です

ホームページ制作が毎月5社限定5万5千円から！ご依頼の方はコチラ！