WordPress翻訳プラグインのWPMLで言語別に表示を変える方法
WordPress（ワードプレス）の翻訳プラグインWPMLで言語別に表示を行うための条件分岐を紹介します。WMPLではPHPコードの大幅な編集の必要がなく、多くが管理画面上で完結できるプラグインです。
プランによって機能は異なりますが、カスタム投稿やカスタムフィールド、WooCommerceにも対応することができます。
今回紹介するWPMLの条件分岐は、管理画面上で翻訳用に新たに項目（カスタムフィールドなど）を設置する手間を省きたい場合などに活用できます。
WPML条件分岐の実装方法
ここでは日本語・英語・韓国語・中国語（簡体中国語）・スペイン語などの多言語サイトを想定した場合の条件分岐を紹介します。※基本的なWPMLのインストール方法や設定方法などは省略します。
<?php if (ICL_LANGUAGE_CODE=='ja'): // 日本語 ?>
<p>日本語</p>
<?php elseif (ICL_LANGUAGE_CODE=='en'): // 英語 ?>
<p>英語</p>
<?php elseif (ICL_LANGUAGE_CODE=='ko'): // 韓国語 ?>
<p>韓国語</p>
<?php elseif (ICL_LANGUAGE_CODE=='zh-hans'): // 簡体中国語 ?>
<p>簡体中国語</p>
<?php elseif (ICL_LANGUAGE_CODE=='es'): // スペイン語 ?>
<p>スペイン語</p>
<?php else: // その他 ?>
<p>その他</p>
<?php endif; ?>特に難しい記述はなく、「ICL_LANGUAGE_CODE」を使用します。言語コードはよく使われているものです。
WPML条件分岐実装例
投稿一覧ページでのWPML条件分岐の実装例
<?php if (have_posts()): ?>
<div class="archive-wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class="archive-list">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<!-- WPML 条件分岐 -->
<?php if (ICL_LANGUAGE_CODE=='ja'): // 日本語 ?>
<p>投稿がありません。</p>
<?php elseif (ICL_LANGUAGE_CODE=='en'): // 英語 ?>
<p>There are no posts.</p>
<?php else: // その他 ?>
<p>投稿がありません。</p>
<?php endif; ?>
<!-- WPML 条件分岐 -->
<?php endif; ?>コンテンツエディタやカスタムフィールドなどで基本的に編集ができない箇所でWPMLの条件分岐が活用できます。
投稿一覧ページでは、投稿がない場合の「投稿がありません。」といったテキストを日本語と英語などで表示を切り替えるための条件分岐です。
投稿詳細ページでのWPML条件分岐の実装例
<?php if (have_posts()): ?>
<?php the_post(); ?>
<div class="single-post">
<time><?php the_time('Y.m.d'); ?></time>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<!-- WPML 条件分岐 -->
<?php if (ICL_LANGUAGE_CODE=='ja'): // 日本語 ?>
<?php previous_post_link('%link', '<< 前へ'); ?>
<?php next_post_link('%link', '次へ >>'); ?>
<?php elseif (ICL_LANGUAGE_CODE=='en'): // 英語 ?>
<?php previous_post_link('%link', '<< Prev'); ?>
<?php next_post_link('%link', 'Next >>'); ?>
<?php else: // その他 ?>
<?php previous_post_link('%link', '<< 前へ'); ?>
<?php next_post_link('%link', '次へ >>'); ?>
<?php endif; ?>
<!-- WPML 条件分岐 -->
<?php else: ?>
<?php endif; ?>前後の記事へのリンクの翻訳例です。
こちらも個別にカスタムフィールドなどを用意する手間を省くために、WPMLの条件分岐を使用します。
翻訳する言語に応じて「前へ」と「次へ」を翻訳してみてください。
言語別にclassを付与する方法
<?php if (ICL_LANGUAGE_CODE=='ja'): // 日本語 ?>
<body class="ja">
<?php elseif (ICL_LANGUAGE_CODE=='en'): // 英語 ?>
<body class="en">
<?php elseif (ICL_LANGUAGE_CODE=='ko'): // 韓国語 ?>
<body class="ko">
<?php elseif (ICL_LANGUAGE_CODE=='zh-hans'): // 簡体中国語 ?>
<body class="zh-hans">
<?php elseif (ICL_LANGUAGE_CODE=='es'): // スペイン語 ?>
<body class="es">
<?php else: // その他 ?>
<body class="">
<?php endif; ?>言語ごとによってbodyタグにclassを付与し、個別のスタイルを適用することも可能です。
font-familyなどは言語によってサイズが若干異なったりするので、font-weightで文字の太さを調整したり、font-sizeで文字の大きさを調整することができます。
言語別にフォントを読み込む方法
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<?php if (ICL_LANGUAGE_CODE=='ja'): // 日本語 ?>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<?php elseif (ICL_LANGUAGE_CODE=='en'): // 英語 ?>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<?php elseif (ICL_LANGUAGE_CODE=='ko'): // 韓国語 ?>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<?php elseif (ICL_LANGUAGE_CODE=='zh-hans'): // 簡体中国語 ?>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<?php elseif (ICL_LANGUAGE_CODE=='es'): // スペイン語 ?>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<?php else: // その他 ?>
<?php endif; ?>Webフォントを読み込む際にもWPMLの条件分岐を使用することで、言語ごとにfont-familyを適用することができます。ここではNoto Sansシリーズを言語別に読み込んでいます。
その他余談
今回はWordPressの翻訳プラグインWPMLを使用した条件分岐の方法です。多言語サイトで使用する有料プラグインであり、使用機会もあまり無いかと思いますが、備忘録としての意味も込めて紹介させていただきました。
