【WPML】言語ごとにcssを設定しレイアウトを変える方法【多言語サイト】

【WPML】言語ごとにcssを設定しレイアウトを変える方法【多言語サイト】

多言語プラグイン「WPML」

WPMLは、Wordpressを多言語対応するにあたって非常に便利なプラグインです。

多言語プラグインWPML(公式)

自動翻訳の文字数によって料金がかかりますが、翻訳原稿が手元にある場合や翻訳する文字数が少ない場合は無料で使うこともできます。

WPML無料版と有料版の比較(公式)

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で付与される言語コードを指定し、同じ要領で言語ごとに違うレイアウトを設定できます!ぜひ試してみてください。

SNSシェア

WP TECH WordPress技術専門 Tips

コーポレートサイトへ

WP TECH WordPress技術専門 Tips

採用サイトへ