WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方
日本語と英語の切り替えができる多言語サイトを超簡単に作りたい時に便利な方法。あくまでも簡易的な方法となります。
PR
Sponsored Link
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 <?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を使った多言語サイトの作り方のメモでした。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment