concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~)

concrete5では、管理画面からかんたんに「ページ属性」を追加することができます。この属性をうまく使いこなすことがカスタマイズのポイントになります。中でも、複数の選択肢の中から値を選ばせることができる「選択」タイプの属性は、とても使い勝手が良く重宝します。

管理画面から追加した属性は、各ページの設定ウィンドウのカスタム属性タブから選ばせることができます。

カスタム属性を、例えばテーマ内のテンプレートで表示させたい場合は、次のように単純なPHPを書くだけで可能です。

$page = Page::getCurrentPage(); // 現在見ているページを取得  $category = $page->getAttribute('page_category'); // 'page_category' というハンドルの属性値を取得  echo $category; // echo 文で出力

ページリストブロックのテンプレートの場合は1行目は不要でしょう。

以上のように非常にシンプルに使えるわけですが、たとえば下記のようなマークアップを実現したい場合に急に困ります。

<span class="update">更新情報</span>

選択属性の値には、１つの文字列しか入れられませんが、このマークアップでは “update” と “更新情報” という2つの文字列を使っているわけです。以前のバージョンではしかたなく switch 文を使って分岐をしていましたが、バージョン5.6.3からは、このような選択属性値が多言語対応しましたので、その機能を使って解決してみました。

Localizerアドオンで選択属性値を翻訳する

Localizerとは、concrete5の国際化対応を積極的に取り組んでいるMicheleが中心になって開発している、concrete5の多言語対応を強化するアドオンです。このアドオンをインストールすると、選択属性の値をページの言語に合わせた言語で翻訳して表示することが可能になります。これは、他言語サイトを構築する際に特に有利な機能です。

Localizerアドオンのインストール方法と基本的な使い方は、公式サイトにヘルプ「Localizerアドオンで特殊項目を翻訳する」を書きましたので、そちらをご参照ください。

Localizerアドオンがインストールできたら、選択タイプのページ属性の値を登録していきましょう。翻訳表示されますので、登録の際は英語で登録していきます。

次にLocalizerの画面から翻訳を登録していきます。

翻訳された選択属性値を出力する

ここまでの設定で、上記のコード（echo文）ですでに選択属性の値が日本語で翻訳されて表示されるようになります。ただし、ここでは元の英語のテキストをclass属性値に流用するため、未翻訳のテキストも取得してみました。

$page = Page::getCurrentPage(); // 現在見ているページを取得  $category = $page->getAttribute('page_category'); // 'page_category' というハンドルの属性値を取得    // ページ属性が選択タイプかどうか判定  if ($category instanceof SelectAttributeTypeOptionList) {        // 選択属性の値を配列で取得      $list = $category->getOptions();            foreach ($list as $l) {                // getSelectAttributeOptionValue() メソッドを使うと、          // 未翻訳の選択属性の値が取得できます          $class = $l->getSelectAttributeOptionValue();          // textヘルパーを使い、全て小文字に揃えます（Foo Bar -> foo_bar）          $class = Loader::helper('text')->handle($class);                    // getSelectAttributeOptionDisplayValue() メソッドを使うと、          // 翻訳済みの選択属性の値が取得できます          $name = $l->getSelectAttributeOptionDisplayValue();                    // 画面に出力します          echo sprintf('<span class="%s">%s</span>',$class,$name);      }  }

このようにして、無事目的のマークアップで出力することができました。

<span class="update">更新情報</span>

最後に繰り返しの注意点になりますが、この方法はバージョン5.6.3以降でしか使えませんのでご注意ください。

---