TL;DR
日本語と英語の切り替えができる多言語サイトを超簡単に作りたい時に便利な方法。あくまでも簡易的な方法となります。
Bogo インストール
Contactform7 の作者である三好さん（iDeasilo） のBogo — WordPress プラグインをインストール。WP-CLI なら以下でインストール。
# インストール
wp plugin install bogo
# 有効化
wp plugin activate bogo
Bogo でできること
- 管理画面内で言語選択
- 任意の場所に言語切替メニューを表示
- 投稿・カスタムポストの言語切替
- タグ・カテゴリの言語切替
- グローバルナビゲーションメニューの言語切替
勝手に翻訳されるわけではないので日本語と英語で表示切替をしたい場合は、日本語と英語両方のコンテンツを用意する必要があります。サイトタイトル・キャッチフレーズ・カテゴリー名・タグ名・メニューは管理画面のテキストの翻訳から設定可能、投稿・固定ページの記事は翻訳版を複製、その他コンテンツは条件分岐を使う感じです。
まずは、functions.php に以下を追加してショートコードで出力されるアイコンやテキストの変更が行えるようにしておきます。
Bogo を使って WordPress を多言語化 | 株式会社クオックス | QOX Inc.さんの記事が分かりやすいです。
// bogo ショートコード
// bogoショートコード関数削除
remove_shortcode( 'bogo', 'bogo_language_switcher' );
// 複製したショートコード関数追加
add_shortcode( 'bogo', 'my_language_switcher' );
function my_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 {
$li = sprintf(
// 言語切替が表示されるところ
'<a rel="alternate" hreflang="%1$s" href="%2$s" title="%3$s">%4$s</a>',
$link['lang'],
esc_url( $link['href'] ),
esc_attr( $title ),
esc_html( $label ) );
}
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( 'my_language_switcher', $output, $args );
if ( $args['echo'] ) {
echo $output;
} else {
return $output;
}
}
// bogo ショートコード ここまで
参考:トピック: bogo デザイン変更 « サポートフォーラム — WordPress
ヘッダーに書いておきたいもの
header.php などにショートコードを埋め込みます。言語切替表示をしたい場所に以下を入力。
一応忘れずに header.php に language と body class のテンプレートタグを入れておきます。こうしておくと日本語の時は lang 属性が 「lang="ja"」、英語に切り替えたときは「lang="en-US"」。body クラスには ja、en-US が付与されるので扱いやすくなります。
<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
<head>
<meta charset="UTF-8">
...
<body class="<?php body_class(); ?>">
置換
次にショートコードの文字を置換します。 自動で入る(United States)を削除。
// bogoショートコード文字置換
add_filter( 'my_language_switcher','r_bogo_text');
function r_bogo_text($output){
return str_replace(' (United States)','',$output);
}
wordpress の bogo プラグインのショートコードをカスタマイズする – joppot
言語条件分岐
言語条件分岐する場合の一例。英語の時「See More」、それ以外の言語は「続きを見る」など。
<?php
$locale = get_locale();
if ('en_US' == $locale ) {
echo 'See More';
} else {
echo '続きをみる';
}
?>
メニューの翻訳
投稿・固定ページ・グローバルナビゲーションメニュー・ウィジェットの翻訳版も管理画面から追加できるようになっています。追加したら表示したい言語にチェックを入れるだけ。
タグやカテゴリの翻訳
カテゴリ名やタブなども任意の翻訳ができます。管理画面>言語>テキストの翻訳から英語を選び編集が可能です。
ポストの言語条件分岐
投稿一覧などのループで使うと全ての言語が出力されてしまうのでフィルターをかけて言語の条件分岐をします。
get posts を使う場合は、言語フィルタを実行させるために suppress_filters を false に変更します。
<?php
$locale = get_locale();
if ('en_US' == $locale ) {
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'suppress_filters' => false, //フィルタ実行
'lang' => 'en-US' //英語のみ出力
);
} else {
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'suppress_filters' => false, //フィルタ実行
'lang' => 'ja' //日本語のみ出力
);
}
$lastposts = get_posts( $args );
foreach ( $lastposts as $post ) :
setup_postdata( $post ); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endforeach;
wp_reset_postdata(); ?>
wp_query を使う場合は suppress_filters は不要です。
<?php
$locale = get_locale();
if ('en_US' == $locale) {
$loop = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 3,
'lang' => 'en_US' //英語のみ出力
) );
} else {
$loop = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 3,
'lang' => 'ja' //日本語のみ出力
) );
}
?>
<?php if ( $loop->have_posts() ) : ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
カスタムポストを対応させる場合は、こちらWordPress で Bogo を使った多言語サイトでのカスタム投稿タイプを参考にしてください。
以上、bogo を使った多言語サイトの作り方のメモでした。
[recommend_wordpress]