Bogo の言語切り切り替えブロックの外観を CSS で直した事を記事にします。
Bogo の言語切り替えブロックについて
言語切り替えブロックは Bogo プラグインで提供されています。このブロックを使用して、このサイトでは3つの言語でブログの内容を表示できるようにしています。
しかし、Bogo の言語切り替えブロックが多言語対応できておらず、英語のページでも日本語が表示されていました。そこで、外観を含め微調整しましたので、その内容を記事にします。
言語切り替えブロックの CSS と PHP の変更内容
始めに、今回の Bogo の言語切り替えブロックの外観を微調整した最終的な CSS と PHP (functions.php) の内容を記載します。
/* 20250213 Bogo National Flag */
.bogo-language-switcher {
display:inline-flex;
padding: 0px;
margin: 0px;
}
.bogoflags-cn:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/china_circle_20px.png);
}
.bogoflags-us:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/USA_circle_20px.png);
}
.bogoflags-jp:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/japan_circle_20px.png);
}
/* display order */
.bogo-language-switcher .ja {
order: 1;
}
.bogo-language-switcher .en {
order: 2;
margin-left: 20px;
}
.bogo-language-switcher .zh {
order: 3;
margin-left: 20px;
}/* 20250213 Bogo Language Switcher */
add_filter( 'bogo_language_switcher_links', function ( $links ) {
for ( $i = 0; $i < count( $links ); $i ++ ) {
// Japanese
if ( 'ja' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'JA';
$links[ $i ]['native_name'] = 'JA';
}
// English
if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'EN';
$links[ $i ]['native_name'] = 'EN';
}
// Simplified Chinese
if ( 'zh_CN' === $links[ $i ]['locale'] || 'zh' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'ZH';
$links[ $i ]['native_name'] = 'ZH';
}
}
return $links;
} );以下のサイトを参考にさせて頂きました。
言語切り替えブロックに丸形の国旗を表示
言語切り替えブロックの先頭の国旗が Bogo Ver.3.7 から無くなりました。私は Ver.3.8.2 から使い始めましたので、始めから国旗の表示はありませんでした。
PC ではページの上部に、モバイルではフッタメニューに、各言語のトップページへのリンクを設置しています。それぞれ丸形の国旗の画像を使用しています。この丸形の国旗はイラストイメージさんのページから使わせて頂きました。
Bogo の言語切り替えブロックにも丸形の国旗を使用します。
- 20px のサイズに縮小したイメージを作成
- WordPressメディアに登録
- CSS で読み込み
CSS の該当部分は以下の内容です。
.bogoflags-cn:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/china_circle_20px.png);
}
.bogoflags-us:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/USA_circle_20px.png);
}
.bogoflags-jp:before {
content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/japan_circle_20px.png);
}言語切り替えブロックで表示される文字の変更
Bogo の言語ブロックで初期状態で表示される文字列は、以下の内容になっています。
- 日本語
- English
- 中文
英語のページでも、簡体中国語のページでも、日本語・中国語の表示でした。
そこで、各言語の略称を表示するように変更しました。
/* 20250213 Bogo Language Switcher */
add_filter( 'bogo_language_switcher_links', function ( $links ) {
for ( $i = 0; $i < count( $links ); $i ++ ) {
// Japanese
if ( 'ja' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'JA';
$links[ $i ]['native_name'] = 'JA';
}
// English
if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'EN';
$links[ $i ]['native_name'] = 'EN';
}
// Simplified Chinese
if ( 'zh_CN' === $links[ $i ]['locale'] || 'zh' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'ZH';
$links[ $i ]['native_name'] = 'ZH';
}
}
return $links;
} );日本語は “JA”、英語は “EN”、中国語は “ZH” と表示します。
レイアウトの調整
言語切り替え部分を、縦並びから横並びに変更しました。また、各言語の間にスペースを入れて区別しやすいようにしました。
/* 20250213 Bogo National Flag */
.bogo-language-switcher {
display:inline-flex;
padding: 0px;
margin: 0px;
}
/* display order */
.bogo-language-switcher .ja {
order: 1;
}
.bogo-language-switcher .en {
order: 2;
margin-left: 20px;
}
.bogo-language-switcher .zh {
order: 3;
margin-left: 20px;
}.bogo-language-switcher の display を inline-flex にして横並びにしました。また、padding と margin をゼロにして、2番目と3番目に表示する言語の左側に margin を入れました。
Gutenberg エディタ上の調整
Block Visibility プラグインで、各言語で表示するタイトルを追加しました。
このパターンは、ブログホーム (フロントページ) では表示せず、個別投稿ページで表示するようにしています。
また、CSS で padding と margin をゼロにしましたので、Gutenberg エディタの方で間隔を微調整しています。
言語切り替えブロックの最終形の外観
以上の内容を反映させて、最終的には次のような外観にしました。
個別投稿ページのアイキャッチ画像の下、本文の前に表示します。他の言語を選択すると、その言語の個別投稿のページに移行します。
結び
今回は、Bogo プラグインの言語切り替えブロックの外観を調整しました。
- 先頭に丸形の国旗を表示
- リンクの文字は英字2文字に変更
- 横一列に配置
- 言語切り替えの文字追加
- レイアウト微調整
これまでは、英語のページでも日本語が表示されていました。今回の外観の調整によって解消できました。
今日は休暇なので初めての朝更新です。今月は月末まで変則的な勤務になりますので、朝にも更新したいと思います。
コメントを残す