【Bogo】言語切り替えボタンを国旗のみに変更するカスタマイズ｜WordPress プラグイン
西
WordPressの制作案件で翻訳プラグイン「Bogo」を利用する機会があり、言語の切り替えボタンを国旗のみに変更したいとのご要望がありましたので、変更方法について備忘録として記載します。
※2023年5月のバージョン3.7への更新に伴って、3.7バージョンに対応する内容を追加しました。
bogoバージョンアップの影響について
2023年5月に実施された、bogoプラグインの3.7へのバージョン更新の影響で国旗アイコンが表示されなくなりました。
アップデート内容の一つ「国旗: famfamfam.com のアイコンを廃止し代わりに Unicode の地域標識記号を導入。」によって、スイッチャーに国旗画像が表示されなくなり、代わりに「JP」や「US」などのテキスト表示のみスイッチャーに表示されるようになったのです。
そのため、以前こちらの記事で記載していた方法では国旗画像が表示されなくなってしまったので、バージョン3.7用のカスタマイズが必要となります。
本記事ではbogoのバージョン3.6と3.7のそれぞれに対応する国旗のみの表示方法を記載しています。
お使いのbogoのバージョンの方を参照してください。
Bogoの言語スイッチャーを国旗の表示のみに変更する方法
１．language-switcher.phpの必要箇所をfunction.phpにコピーしてショートコードを上書きする
まずはBogoの言語切り替えの制御をしている「language-switcher.php」の中の必要箇所をコピーして、「function.php」へ追記しショートコードを別名で上書きします。
「language-switcher.php」ファイルを開く
Bogoのスイッチャーに関する「language-switcher.php」ファイルは、利用サーバー内の以下「includes」フォルダ内にあります。（バージョン3.6、3.7共通）
wp-content/plugins/bogo/includes/language-switcher.php
↑の「language-switcher.php」を開きます。
「language-switcher.php」の必要部分をコピーする
「language-switcher.php」内の以下の部分をコピーします。
※2023年5月にバージョン3.7への更新に伴って、以前の3.6に対応する方法と新しい3.7に対応する内容をそれぞれ記載しています。
bogoバージョン3.6の場合
function bogo_language_switcher( $args = '' ) {
$args = wp_parse_args( $args, array(
'echo' => false,
) );
$links = bogo_language_switcher_links( $args );
$total = count( $links );
$count = 0;
$output = '';
foreach ( $links as $link ) {
$count += 1;
$class = array();
$class[] = bogo_language_tag( $link['locale'] );
$class[] = bogo_lang_slug( $link['locale'] );
if ( get_locale() === $link['locale'] ) {
$class[] = 'current';
}
if ( 1 == $count ) {
$class[] = 'first';
}
if ( $total == $count ) {
$class[] = 'last';
}
$class = implode( ' ', array_unique( $class ) );
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
if ( empty( $link['href'] ) ) {
$li = esc_html( $label );
} else {
$atts = array(
'rel' => 'alternate',
'hreflang' => $link['lang'],
'href' => esc_url( $link['href'] ),
'title' => $title,
);
if ( get_locale() === $link['locale'] ) {
$atts += array(
'class' => 'current',
'aria-current' => 'page',
);
}
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
esc_html( $label )
);
}
$li = sprintf(
'<span class="bogo-language-name">%s</span>',
$li
);
if ( apply_filters( 'bogo_use_flags', true ) ) {
$flag = bogo_get_flag( $link['locale'] );
$flag = preg_replace( '/(?:.*?)([a-z]+)\.png$/', '$1', $flag, 1 );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$flag ? $flag : 'zz'
);
$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
} else {
$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
}
$output .= $li . "\n";
}
$output = '<ul class="bogo-language-switcher">' . $output . '</ul>' . "\n";
$output = apply_filters( 'bogo_language_switcher', $output, $args );
if ( $args['echo'] ) {
echo $output;
} else {
return $output;
}
}
bogoバージョン3.7の場合
function bogo_language_switcher( $args = '' ) {
$args = wp_parse_args( $args, array(
'echo' => false,
) );
$links = bogo_language_switcher_links( $args );
$total = count( $links );
$count = 0;
$output = '';
foreach ( $links as $link ) {
$count += 1;
$class = array();
$class[] = bogo_language_tag( $link['locale'] );
$class[] = bogo_lang_slug( $link['locale'] );
if ( get_locale() === $link['locale'] ) {
$class[] = 'current';
}
if ( 1 == $count ) {
$class[] = 'first';
}
if ( $total == $count ) {
$class[] = 'last';
}
$class = implode( ' ', array_unique( $class ) );
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
if ( empty( $link['href'] ) ) {
$li = esc_html( $label );
} else {
$atts = array(
'rel' => 'alternate',
'hreflang' => $link['lang'],
'href' => esc_url( $link['href'] ),
'title' => $title,
);
if ( get_locale() === $link['locale'] ) {
$atts += array(
'class' => 'current',
'aria-current' => 'page',
);
}
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
esc_html( $label )
);
}
$li = sprintf(
'<span class="bogo-language-name">%s</span>',
$li
);
if ( apply_filters( 'bogo_use_flags', true ) ) {
$country_code = bogo_get_country_code( $link['locale'] );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$country_code ? strtolower( $country_code ) : 'zz'
);
$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
} else {
$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
}
$output .= $li . "\n";
}
$output = sprintf(
'<ul class="bogo-language-switcher list-view">%s</ul>',
$output
);
$output = apply_filters( 'bogo_language_switcher', $output, $args );
if ( $args['echo'] ) {
echo $output;
} else {
return $output;
}
}「function.php」に貼り付けて、ショートコードを書き換える
「function.php」に先ほどコピーした部分を貼り付けて、貼り付けた部分の先頭にショートコードの書き換えを追加します。
bogoバージョン3.6の場合
//ショートコードの書き換え
remove_shortcode( 'bogo', 'bogo_language_switcher' );
add_shortcode( 'bogo', 'my_bogo_language_switcher' );
//以下、先ほどコピーした部分↓↓
function bogo_language_switcher( $args = '' ) {
$args = wp_parse_args( $args, array(
'echo' => false,
) );
$links = bogo_language_switcher_links( $args );
$total = count( $links );
$count = 0;
$output = '';
foreach ( $links as $link ) {
$count += 1;
$class = array();
$class[] = bogo_language_tag( $link['locale'] );
$class[] = bogo_lang_slug( $link['locale'] );
if ( get_locale() === $link['locale'] ) {
$class[] = 'current';
}
if ( 1 == $count ) {
$class[] = 'first';
}
if ( $total == $count ) {
$class[] = 'last';
}
$class = implode( ' ', array_unique( $class ) );
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
if ( empty( $link['href'] ) ) {
$li = esc_html( $label );
} else {
$atts = array(
'rel' => 'alternate',
'hreflang' => $link['lang'],
'href' => esc_url( $link['href'] ),
'title' => $title,
);
if ( get_locale() === $link['locale'] ) {
$atts += array(
'class' => 'current',
'aria-current' => 'page',
);
}
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
esc_html( $label )
);
}
$li = sprintf(
'<span class="bogo-language-name">%s</span>',
$li
);
if ( apply_filters( 'bogo_use_flags', true ) ) {
$flag = bogo_get_flag( $link['locale'] );
$flag = preg_replace( '/(?:.*?)([a-z]+)\.png$/', '$1', $flag, 1 );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$flag ? $flag : 'zz'
);
$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
} else {
$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
}
$output .= $li . "\n";
}
$output = '<ul class="bogo-language-switcher">' . $output . '</ul>' . "\n";
$output = apply_filters( 'bogo_language_switcher', $output, $args );
if ( $args['echo'] ) {
echo $output;
} else {
return $output;
}
}
bogoバージョン3.7の場合
//ショートコード書き換え
remove_shortcode( 'bogo', 'bogo_language_switcher' );
add_shortcode( 'bogo', 'my_bogo_language_switcher' );
//以下、先ほどコピーした部分↓↓
function bogo_language_switcher( $args = '' ) {
$args = wp_parse_args( $args, array(
'echo' => false,
) );
$links = bogo_language_switcher_links( $args );
$total = count( $links );
$count = 0;
$output = '';
foreach ( $links as $link ) {
$count += 1;
$class = array();
$class[] = bogo_language_tag( $link['locale'] );
$class[] = bogo_lang_slug( $link['locale'] );
if ( get_locale() === $link['locale'] ) {
$class[] = 'current';
}
if ( 1 == $count ) {
$class[] = 'first';
}
if ( $total == $count ) {
$class[] = 'last';
}
$class = implode( ' ', array_unique( $class ) );
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
if ( empty( $link['href'] ) ) {
$li = esc_html( $label );
} else {
$atts = array(
'rel' => 'alternate',
'hreflang' => $link['lang'],
'href' => esc_url( $link['href'] ),
'title' => $title,
);
if ( get_locale() === $link['locale'] ) {
$atts += array(
'class' => 'current',
'aria-current' => 'page',
);
}
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
esc_html( $label )
);
}
$li = sprintf(
'<span class="bogo-language-name">%s</span>',
$li
);
if ( apply_filters( 'bogo_use_flags', true ) ) {
$country_code = bogo_get_country_code( $link['locale'] );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$country_code ? strtolower( $country_code ) : 'zz'
);
$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
} else {
$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
}
$output .= $li . "\n";
}
$output = sprintf(
'<ul class="bogo-language-switcher list-view">%s</ul>',
$output
);
$output = apply_filters( 'bogo_language_switcher', $output, $args );
if ( $args['echo'] ) {
echo $output;
} else {
return $output;
}
}これで元の「language-switcher.php」の中身は書き換えずに、「function.php」にて編集が可能になりました。
２．デフォルトで「日本語/English」などテキストで表示されている部分を国旗画像に差し替える
先ほど「function.php」に貼り付けた内容を編集していきます。
まずは国旗画像についての記載を追加します。
追記箇所は以下の部分です。
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];上記の最後に以下のコードを追加します。
bogoバージョン3.6の場合
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
//追記部分
$flag = bogo_get_flag( $link['locale'] );
$flag = preg_replace( '/(?:.*?)([a-z]+)\.png$/', '$1', $flag, 1 );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$flag ? $flag : 'zz'
);bogoバージョン3.7の場合
$label = $link['native_name'] ? $link['native_name'] : $link['title'];
$title = $link['title'];
//追記部分
$country_code = bogo_get_country_code( $link['locale'] );
$flag = sprintf(
'<span class="bogoflags bogoflags-%s"></span>',
$country_code ? strtolower( $country_code ) : 'zz'
);次に、aタグの中身をデフォルトの「日本語」などのテキスト表示から国旗の画像に変更します。
変更箇所は以下の部分です。(バージョン3.6、3.7共通）
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
esc_html( $label )
);上記の内容を↓に変更します。(バージョン3.6、3.7共通）
$li = sprintf(
'<a %1$s>%2$s</a>',
bogo_format_atts( $atts ),
$flag //aタグの中身
);最後に、デフォルトで言語テキストの前に表示されている国旗を非表示にします。
「function.php」に以下のコードを追加します。(バージョン3.6、3.7共通）
//デフォルトの国旗非表示
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
return false;
}３．バージョン3.7のみCSSで国旗の画像表示を追加
bogoバージョン3.7では国旗の画像が使用されなくなってしまったので、自分で画像を用意する必要があります。
まずは、商用利用可能な国旗画像を準備して、WordPressのメディアにアップロードします。
国旗画像は例えばFlag Iconsからダウンロードします。
次に、WordPressの追加CSSに以下のコードを追加します。画像URLにはメディアにアップロードした画像のURLを入力します。
※今回は日本語と英語の表示例です。
.bogoflags-us:before {
content: url(https://アップロードした画像のパス);
}
.bogoflags-jp:before {
content: url(https://アップロードした画像のパス);
}手順は以上です。
