web-dev-qa-db-ja.com

アクティブな言語に応じてCSSクラスを<body>に追加する方法

私は自分のスタイルのいくつかをアクティブな言語に基づいて構築したい多言語サイトを設計しています。

このようなものを考えてください：

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

これを実行できる拡張機能（つまり、アクティブな言語に応じてタグにクラスを追加する）を知っている人はいますか？

extensions
8
smz

実際には、問題に対するより簡単な解決策があります。適切なテンプレート（Joomla CMSに付属するすべてのテンプレートを含む）は、HTML要素にlang属性を設定します。これにより、CSS :lang()疑似セレクターを使用できるようになります。

あなたの例は次のようになります：

_li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}
_

これにはいくつかの利点があります。手始めに、それはすべてブラウザで行われるので、テンプレートに関係なく、またはJoomla以外のソリューションでも動作します。

また、lang属性が正しく設定されていれば、他の言語の埋め込みパーツでも問題なく機能します。例えば：

_<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>
_

最後に、Joomlaは言語だけでなくロケールも出力します。したがって、1つのサイトでen-GBを使用し、別のサイトでen-USを使用すると、テンプレートはそれを反映します。 :lang(en)を使用するとどちらにも一致しますが、:lang(en-US)を使用してアメリカ英語のみをターゲットにすることもできます。

14
Rouven Weßling

テンプレートのindex.phpファイルを変更して、クラスを直接そこに追加するだけです。

<body class="<?php echo $this->language; ?>">

現在の言語をクラスとしてbodyタグに割り当てます。

5
Bakual

ルーベンの方法に関して追加すべき1つの小さなこと。ブラウザのサポートは、言語の疑似セレクタよりも属性セレクタの方が優れているため、次のようなものを使用してスタイルをターゲットにすることを検討できます。

[lang="en-GB"] .artist {…}
3
Seth Warburton

テンプレートのindex.phpで、現在の<body>タグを次のように置き換えることができます。

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

これは、例として以下を出力します。

<body class="en-GB">
1
Lodder