![【WPML】言語ごとにcssを設定しレイアウトを変える方法【多言語サイト】](https://www.wp-tech.net/wwptechp/wp-content/uploads/2022/09/220824_wpml.jpg)
多言語プラグイン「WPML」
WPMLは、Wordpressを多言語対応するにあたって非常に便利なプラグインです。
自動翻訳の文字数によって料金がかかりますが、翻訳原稿が手元にある場合や翻訳する文字数が少ない場合は無料で使うこともできます。
![](https://www.wp-tech.net/wwptechp/wp-content/uploads/2022/03/a73f60c42a63629a938f915f31ac75d9.png)
WPMLでサイトを多言語化してからのレイアウト調整
WPMLで日本語のサイトを英語に翻訳した場合を例にします。
初期設定を完了したら、管理画面から手動翻訳もしくは自動翻訳で英語ページを作りますが、基本的に英語は日本語よりも文章が長くなる傾向にあり、文字サイズやfontも日本語と同じでは読みづらいことが多いです。
そのため、英語サイトだけに日本語とは違うcssを設定し、レイアウトを調整する必要があります。
方法は簡単!
functionでbodyにclass名を設定する
これだけです。
こちらがサンプルコードです。
<?php
function customBodyClass() {
if ( ICL_LANGUAGE_CODE == 'ja' || ICL_LANGUAGE_CODE == null ): // 日本語サイトだったら
echo ' lang-ja';
elseif ( ICL_LANGUAGE_CODE == 'en' ): // 英語サイトだったら
echo ' lang-en';
endif;
}
?>
function.phpに上記を記述することで、日本語サイトのbodyに「lang-ja」、英語サイトのbodyに「lang-en」というclass名が追加されます。
その上で、下記のように記述することで、言語ごとに違うcssを設定できます。
// 日本語サイトではNoto sans JP
.lang-ja p {
font-family: "Noto Sans JP", sans-serif;
}
// 英語サイトではRoboto
.lang-en p {
font-family: "Roboto", sans-serif;
}
英語以外の言語を設定した場合も、WPMLで付与される言語コードを指定し、同じ要領で言語ごとに違うレイアウトを設定できます!ぜひ試してみてください。
![WP TECH WordPress技術専門 Tips](https://www.wp-tech.net/wwptechp/wp-content/themes/wwptechp/_assets/images/common/common_logoCommude_pc.png)
![WP TECH WordPress技術専門 Tips](https://www.wp-tech.net/wwptechp/wp-content/themes/wwptechp/_assets/images/common/common_logoWantedly_pc.png)