语言切换块由 Bogo 插件提供。该块允许网站以三种不同语言显示博客内容。
但是，Bogo 的语言切换块并不是多语言的，即使在英文网页上也会显示日文。因此，我做了一些小调整，包括外观调整，并将撰文介绍。
语言切换区块中的 CSS 和 PHP 更改
首先，我将介绍最终的 CSS 和 PHP (functions.php)，我在其中调整了 Bogo 语言切换块的外观。
/* 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;
} );
以下网站可供参考。(Japanese site)
语言切换块中的循环标志
从Bogo 3.7版开始，语言切换块开头的标志就不见了。我开始使用 Bogo 3.8.2 版，所以标志从一开始就没有显示。
每种语言的首页链接位于 PC 版页面顶部和手机版页脚菜单中。每种语言都使用了圆形国旗的图片。这些圆形国旗来自插图图像页面。(Japanese site)
博古语言切换程序块也使用圆形标志。
- 创建缩小为 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;
}
.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;
}我们将 .bogo-language-switcher 的显示设置为 inline-flex，使其水平显示。我们还将 padding 和 margin 设为零，并在要显示的第二种和第三种语言的左边加上 margin。
调整 Gutenberg 编辑器
区块可见性插件，可在每种语言中显示附加标题。
这种模式不显示在博客主页（首页）上，而是显示在单个文章页面上。
我还在 CSS 中将 padding 和 margin 设置为零，这样就可以在 Gutenberg 编辑器中对间距进行微调。
语言切换块的最终外观
根据上述情况，最终的外观如下。
它显示在个人帖子页面醒目图片的下方和文字之前。选择其他语言将跳转到该语言的帖子页面。
Musubi
在这种情况下，Bogo 插件中语言切换块的外观已作调整。
- 顶部有圆形旗帜
- 链接文本改为两个字母字符
- 横排排列
- 附加语言切换文本
- 布局微调
以前，英文页面上会显示日文。这次外观调整解决了这一问题。
今天是我第一次早上更新，因为我在度假。这个月到月底我的工作时间都不固定，所以我也想在早上更新。
发表回复