Bogo 言語切替ボタン表示カスタマイズ : CSS + functions.php

目次

さいしょに

仕事でWordpressテーマ「Swell」を使いはじめ、だいぶカスタマイズに慣れてきました。

その中で、今後も言語が増えていくことを想定した多言語グローバルサイトを作成するためにプラグイン「Bogo」を利用して、日本語・英語コンテンツを作成しました。

ですが、グローバルサイトでもあったので、言語ボタンを常にコンテンツ最上部に出す、ということになりました。その記事を掲載しました。

この記事では、Bogoの設定項目としてCSSとfunctions.phpへ追記していることを記載したいと思います。

多言語表示プラグイン「Bogo」表示カスタマイズ

まずは、Wordpressの子テーマのfunctions.phpから。それぞれコメントでどのようなことをしているかを記載しています。

functions.php

具体的には以下をしています。

  • 言語切替ボタンで、国旗アイコンを表示しない
  • 言語切替ボタンの表記を変更
  • publicなカスタム投稿タイプに対応
  • 最上部に言語切替ボタンを設置(Body直後にBogoのショートコードを挿入)
// 言語切替ボタンで、国旗アイコンを表示しない
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
 return false;
}
	
// フック「bogo_language_switcher_links」を利用し、言語切り替えボタンの表記を変更
add_filter( 'bogo_language_switcher_links', function ( $links ) {
  for ( $i = 0; $i < count( $links ); $i ++ ) {
    // 各言語のtitle、native_name変更箇所
    //「native_name」は表示文字列、「title」はリンクのtitle属性
    // 日本語
    if ( 'ja' === $links[ $i ]['locale'] ) {
      $links[ $i ]['title']       = '日本語';
      $links[ $i ]['native_name'] = '日本語';
    }
    // 英語
	  if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] || 'en_NZ' === $links[ $i ]['locale'] ||'en_CA' === $links[ $i ]['locale'] ||'en_GB' === $links[ $i ]['locale'] ||'en_AU' === $links[ $i ]['locale'] ) {
      $links[ $i ]['title']       = ' English ';
      $links[ $i ]['native_name'] = ' English ';
    }
  }
  return $links;
} );

// publicなカスタム投稿タイプに対応
add_filter( 'bogo_localizable_post_types', 'add_bogo_localizable_post_types' );
function add_bogo_localizable_post_types( $localizable ) {
  $args = array(
	  'public'   => true,
      '_builtin' => false
  );
  $custom_post_types = get_post_types( $args );
  return array_merge( $localizable, $custom_post_types );
}

// 最上部に言語切替ボタンを設置(Body直後にBogoのショートコードを挿入)
add_action( 'wp_body_open', function() {
	?>
	<div class="bogo_body_top" >
	<div class="bogo-language-switcher"><?php echo do_shortcode("[bogo]"); ?></div>
	</div>
<?php
});

css

続いて、CSSです。追加している部分だけを残していますので、テーマのカスタマイザーにある追加CSSの機能や、子テーマのstyle.cssに設定します。設定内容は以下です。

  • 言語切替ボタンの中央寄せ
  • 言語切替ボタンの文字、背景色変更
  • 言語切替ボタンの表示順変更
/* Body直後に挿入するBogoショートコード用コンテナ */
.bogo_body_top{
	width: 100%;
}

/* 言語切り替えボタンの背景色・中央寄せ表示 */
.bogo-language-switcher {
  background-color: #dde7f1;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;  
}

/* 選択中言語切り替えボタンの色・文字表示 */
.bogo-language-switcher .current {
  background-color: #1E70DD;
  color: #ffffff;
	border-bottom: 3px solid #fff;
}

/* 選択中言語切り替えボタンの色・文字表示 */
.bogo-language-switcher .ja {
/* 言語ボタンの表示順(0が最初)*/
  order: 0;
  padding: 0 10px 0 10px;
  list-style-type:none;
  flex-grow: 1;
  }

.bogo-language-switcher .en {
/* 言語ボタンの表示順(0が最初)*/
  order: 1;
  padding: 0 10px 0 10px;
	list-style-type:none;
  flex-grow: 1;
  }

多言語表示プラグイン「Bogo」表示カスタマイズ完了後

以下のような表示になります。

区切りに「|」を入れたり、等もやってみましたが、これが一番スッキリしたのでこのようにしています。

さいごに

WordPress用多言語プラグイン「Bogo」のおかげで、多言語サイトを作成するための工数は大幅に減らすことができますね。

デザイン、特に表示関連の情報が少ないと感じましたので、微力ですが事例は残していきたいと思います。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次