bogo dropdown feature

Bogoの設定：言語ピッカーをドロップダウン型に

—

by

Nora Lo
in

それでは、私が最近取り組んでいる多言語対応のポートフォリオサイトについてお話ししましょう。Bogoというプラグインを使うことにしました。その設定方法と、私のサイトに合わせてカスタマイズした方法について説明します。

Bogoの設定

  1. まず初めに、Bogoをダウンロードしてインストールしました。新たに「言語」タブが追加され、サポートする言語を選択できます。activate language pack
  2. 投稿やページのエディターには、新たに翻訳を追加するためのサイドバーセクションが追加されました。ボタンをクリックすると、新しい投稿やページにコンテンツが複製されます。add translation
  3. その後は、複製された投稿やページを編集し、テキストを手動で翻訳するだけです。私は複製ページのスラッグを変更してみたところ、うまくいきました。しかし、このサイトに変更する必要がありませんので、同じスラッグを保持することにしました。
  4. ボーナスとして、ダッシュボードに言語切替機能があります。新しい投稿やページのデフォルトの言語は、既存の言語設定に合わせられます。switch in dashboard

言語切替のカスタマイズ

デフォルトでは、言語切替は全てのアクティブな言語を表示するリストで、翻訳がないページでも表示されます。カスタマイズで解決しようと思います。そこで、i-nobさんの有益なノートのおかげで、それをドロップダウンリストに変更しました。

サイトエディターを通じて切替を追加

私の場合、ナビゲーションバーに言語切替を追加したかったのです。

ea7ceb7a849b8b9d23fa5b8ed9817d745901c572
【WordPress】多言語化プラグイン「Bogo」の言語切替をドロップダウン型にした話｜i-nob
最近のマイブームはソロプレイできるボードゲームで遊ぶこと！ どうも、フリーランスのWeb制作者のi-nob(@inobapen)です。 WordPressで多言語化プ…
note（ノート）
add html code
HTML
<div class="display-item"></div>
<div class="wp-block-bogo-language-switcher">[bogo]</div>

PHPで表示要素を変更

私が行ったことは以下のとおりです：

  • 言語切替ボタンからフラグアイコンを削除
  • 言語切替ボタンの表記を変更

フラグを削除した理由

フラグは国や地域を表しているだけで、その地域外で同じ言語を使っている人もいるからです。

PHP
//Hide Bogo flag
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
	return false;
}

//Change language display name
add_filter( 'bogo_language_switcher_links', 'custom_bogo_language_title_name', 10, 2 );
function custom_bogo_language_title_name( $links ) {
  foreach ( $links as $code => $name ) {
    if ( $name['lang'] === 'en-GB' ) {
      $links[$code]['title'] = 'English';
      $links[$code]['native_name'] = 'ENG';
    } elseif ( $name['lang'] === 'ja' ) {
      $links[$code]['title'] = '日本語';
      $links[$code]['native_name'] = '日本語';
    } elseif ( $name['lang'] === 'zh-HK' ) {
      $links[$code]['title'] = '中文';
      $links[$code]['native_name'] = '中文';
    }
  }
  return $links;
}

JavaScriptで移動と表示を制御

次に、以下のようにして切替をドロップダウンにしました：

  • 現在の言語をデフォルトの項目として表示
  • 翻訳がない言語オプションを非表示
  • リストアイテムの数に基づいてドロップダウンの高さを計算するコードを含め、拡大アニメーションを演出
  • 他の翻訳が利用可能な場合のみクリックトリガーを許可
  • 他の翻訳がない場合にドロップダウンにクラスを追加し、後でさらにスタイリング
JavaScript
//Bogo - hide li item if no translation
document.addEventListener("DOMContentLoaded", function() {
    const listItems = document.querySelectorAll('.bogo-language-switcher li');

    listItems.forEach(item => {
        if (!item.querySelector('a')) {
            item.style.display = 'none';
        }
    });

});


//Bogo - dynamic dropdown height
document.addEventListener("DOMContentLoaded", function() {
    // Get the ul element by class name
    const dynamicList = document.querySelector('.bogo-language-switcher');

    // Get the number of visible list items
    const visibleListItems = dynamicList.querySelectorAll('li:not([style*="display: none"])');
    const numberOfVisibleItems = visibleListItems.length;

    // Add class to display if only 1 visible item
    if (numberOfVisibleItems === 1) {
        const display = document.querySelector('.display-item');
        display.classList.add('bogo-disable');
    }

    // Subtract one from the count if necessary
    const adjustedNumberOfItems = Math.max(0, numberOfVisibleItems - 1);

    // Set the value of --list-items CSS variable
    document.documentElement.style.setProperty('--list-items', adjustedNumberOfItems);
});


//Bogo dropdown
jQuery(function($) {
    let selectBox = $('.wp-block-bogo-language-switcher');
    let selectItems = $('.wp-block-bogo-language-switcher li');
    let display = $('.display-item');
    let displayButton = $('.display-item:not(.bogo-disable)');

    const currentLang = $('.bogo-language-switcher li.current').attr('class').split(' ')[0];
    display.addClass(currentLang); // Add current language code as a class to display-item

    const firstLang = $('.bogo-language-switcher > .current span').find('.current');
    const firstLangName = firstLang.first().text();
    display.text(firstLangName);
    display.append('<span class="arrow"></span>');

    let selectBoxFlag = false;
    $(firstLang).css('background','#ccc').attr('tabindex', -1).removeAttr('href');
    displayButton.on('click', function() {
        if (selectBoxFlag === false) {
            selectBoxFlag = true;
            display.addClass('active');
            selectBox.addClass('active');
        } else {
            selectBoxFlag = false;
            display.removeClass('active');
            selectBox.removeClass('active');
        }
    });
    selectItems.on('click', function() {
        $(this).find('a').trigger('click');
    });
});

CSSで外観を整える

最後に、以下の設定でドロップダウンの見た目を整えました：

  • 言語切替テキストを左揃え
  • ホバー時のテキストと背景色を変更
  • 他の翻訳が利用できない場合のテキスト色を変更
CSS
/* Dropdown */
.bogo-dropdown {
  gap: 0;
  align-items: flex-start;
  height: 44px;
}

/* Language Switcher */
.bogo-language-switcher {
  display: flex;
  flex-direction: column;
  border: 1px solid #CACACA;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 96px;
  box-sizing: border-box;
}

.bogo-language-switcher li {
  cursor: default;
  box-sizing: border-box;
  padding: 4px 8px!important;
  text-align: left;
}

.bogo-language-switcher li a {
  text-decoration: none;
  font-weight: 600;
}

.active .bogo-language-switcher li:hover {
  background: var(--wp--preset--color--contrast);
}

.active .bogo-language-switcher li:hover a {
  color: var(--wp--preset--color--accent);
}

.bogo-language-switcher .ja {
  order: 1;
}

.bogo-language-switcher .en-GB {
  order: 2;
}

/* Display Item */
.display-item {
  transition: 0.15s ease;
  width: 96px;
  border: 1px solid #CACACA;
  border-radius: 4px;
  padding: 8px;
  text-align: left;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #FDFFFA;
  padding-bottom: 0;
  font-weight: 600;
}

.bogo-language-name a {
  display: block;
  width: 100%;
  color: #333;
}

/* Arrow */
.arrow {
  width: 13px;
  height: 13px;
  display: inline-block;
  position: relative;
  bottom: -8px;
  left: -10px;
  transition: 0.4s ease;
  margin-top: 2px;
  text-align: left;
  transform: rotate(45deg);
  float: right;
}

.arrow:before,
.arrow:after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 12px;
  height: 3px;
  background-color: var(--wp--preset--color--contrast);
  transition: 0.4s ease;
}

.arrow:after {
  transform: rotate(90deg);
  top: -5px;
  left: 5px;
}

/* Active Arrow */
.display-item.active .arrow {
  transform: rotate(45deg) translate(-5px, -5px);
}

.display-item.active .arrow:before {
  transform: translate(10px, 0);
}

.display-item.active .arrow:after {
  transform: rotate(90deg) translate(10px, 0);
}

/* Active List */
.display-item.active ul {
  opacity: 0.3;
  height: 108px;
}

/* Language Switcher Animation */
.wp-block-bogo-language-switcher .bogo-language-switcher {
  height: 0;
  overflow: hidden;
  padding-bottom: 4px;
  transition: 0.4s ease;
}

/* CSS Variable for Height */
:root {
  --item-height: 34px;
}

.wp-block-bogo-language-switcher.active .bogo-language-switcher {
  height: calc(var(--item-height) * var(--list-items));
  overflow: auto;
  padding-bottom: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Disabled Styles */
.bogo-disable {
  color: var(--wp--preset--color--accent-5);
}

.bogo-disable .arrow:before,
.bogo-disable .arrow:after {
  background-color: var(--wp--preset--color--accent-5);
}

改善の余地は？

このカスタマイズされたドロップダウンのデフォルト表示はページの言語のみ示しているので、異なる言語を話すユーザーがそれが言語切替のことを理解できるかどうか、特に彼らが馴染みのない言語のページにアクセスした場合について考えています。ユーザーテストを実施して確認することを考えています。

また、投稿が一つの言語のみで利用可能な場合に、ユーザーが言語切替をクリックしようとしたときに警告を出すべきかどうかも検討しています。もし彼らが混乱するようであれば、そのシナリオに対してツールチップを追加することにします。

Comments

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です