明日から、身につける。
明日から、身につける。
2019.10.11
#201
それいけ!フロントエンド

サイトのタイトルやキャッチフレーズをBogoによって多言語化する方法

つっちー

こんにちは。フロントエンドのつっちーです。

WordPressの多言語化プラグイン「Bogo」、使いやすいうえ、Gutenbergにも対応していて、とても便利ですよね。

でも、サイトのタイトルとキャッチフレーズに関しては、どのように多言語化できるのか、情報が不足している印象も受けます。

WordPressデフォルトの翻訳ファイルを利用したり、テンプレートに各言語の翻訳を直に書いたりするなどの、Bogoを利用しない解決方法もあるようです。今回この記事では、なるべくBogoの機能をつかって、サイトのタイトルとキャッチフレーズを翻訳、出力する方法について説明します。

準備

以降はBogoが有効化されていることが前提の内容です。ご注意ください。

「Bogo」プラグインページ

 
例として、日本語から英語と中国語(簡体字)に翻訳していきます。

翻訳先の言語を有効化

WordPressの管理画面から、設定する言語を有効化しておきます。

Languages(言語) > Language Packs(言語パック)

Languages(言語) > Language Packs(言語パック)

翻訳結果を入力

おなじくWordPressの管理画面から、有効化した言語ごとに、サイトのタイトルとキャッチフレーズの翻訳結果を設定します。

Languages(言語) > Terms Translation(テキストの翻訳)
Languages(言語) > Terms Translation(テキストの翻訳)

Languages(言語) > Terms Translation(テキストの翻訳)

翻訳を出力する

以上の準備が整ったら、あとはbloginfo()を使うだけです。

<!--?php // 表示中ページの言語に合わせて、サイトのタイトルを出力 ?-->
<title><?php bloginfo('name'); ?></title>

<!--?php // 表示中ページの言語に合わせて、キャッチフレーズを出力 ?-->
<meta name="description" content="<?php bloginfo('description'); ?>">

Chromeのデベロッパーツールで、実際に出力されていることを確認してみましょう。

 

英語ページ

Chrome Developer Tool(英語ページ)

 

中国語(簡体字)ページ

Chrome Developer Tool(中国語(簡体字)ページ)

 
以上です! ……と言いたいところですが、ほとんどの場合、SEO対策プラグインも有効化されていて、以上の手順だけでは済まないのではないでしょうか。

以降の項ではYoast SEOやAll in One SEO Packと併用する場合の例を紹介します。

Yoast SEOと併用する

フィルターを利用することで、Yoast SEOの出力結果を書き換えます。

このとき、bloginfo関数では翻訳後の値が、get_bloginfo関数では翻訳前の値が扱われることに注意しつつ、そのことを利用します。

以下のコードを、有効化されているテーマの functions.php に追記します(requireして利用する、プラグインとして記述する、などは適宜おこなってください)。

まずはサイトのタイトルから。

function localize_title($title) {
// bloginfo()によって、翻訳後の値を取得
ob_start();
bloginfo('name');
$localizedName = ob_get_clean();
// get_bloginfo()によって、翻訳前の値を取得
$originalName = get_bloginfo('name');
// 翻訳前の値を翻訳後の値に置換
return str_replace($originalName, $localizedName, $title);
}
// 上記の処理を、YoastSEOがサイトのタイトルを出力するときに実施
add_filter( 'wpseo_title', 'localize_title', 10, 1 );

次にキャッチフレーズです。内容はサイトのタイトルとほぼ同じです。

function localize_description($description) {
// bloginfo()によって、翻訳後の値を取得
ob_start();
bloginfo('description');
$localizedDescription = ob_get_clean();
// get_bloginfo()によって、翻訳前の値を取得
$originalDescription = get_bloginfo('description');
// 翻訳前の値を翻訳後の値に置換
return str_replace($originalDescription, $localizedDescription, $description);
}
// 上記の処理を、YoastSEOがキャッチフレーズを出力するときに実施
add_filter( 'wpseo_metadesc', 'localize_description', 10, 1 );

 

英語ページ

Chrome Developer Tool(英語ページ)

 

中国語(簡体字)ページ

Chrome Developer Tool(中国語(簡体字)ページ)

日本語ページ

日本語ページでも、置換は実行されますが、置換前後で値が変わらないため問題となりません。
Chrome Developer Tool(日本語ページ)

All in One SEO Packと併用する

All in One SEO Packと併用する場合も、Yoast SEOの場合と方法は変わりません。

プラグインの違いによって、フィルター名が変わるだけです。

// タイトル
add_filter( 'aioseop_title', 'localize_title', 10, 1 );

// キャッチフレーズ
add_filter( 'aioseop_description', 'localize_description', 10, 1 );

まとめ

SEO対策プラグインだけでなく、静的出力プラグインのWP2Staticとも併用していますが、いまのところ問題なく動いています。

多言語化にとても便利なBogo、今後も積極的に使っていきたいと思います。開発者様には感謝感謝です……。

ではまた! つっちーでした。