Display Suite と Field Group モジュールによるコンテンツのマークアップ ～ 応用編 ～

ここまで基本編その1、基本編その2で Field Group モジュールおよび Display Suite モジュールの基本的な機能の説明をしてきましたが、今回は少し上級者向けの応用編として、「こんなときはどうする？」的なハウツー、一見難しそうな要件を見事に収めるためのテクニックをご紹介します。

コンテンツの作成日に応じて自動で「新着」ラベルを表示したい

「作成日から〇日以内のコンテンツ」に「新着」ラベルを表示したい、という場合は、DS フィールドの「Twig フィールド」を使うときれいに実現できます。DS の管理画面「Fields」（/admin/structure/ds/fields）から、Twig フィールドを追加します。

追加画面の中の、「テンプレート」のところに、以下のようなコードを入力します。

{# 新着から〇日以内のコンテンツを新着とする #}
{% if node.created.value|date('U') > '-30 days'|date('U') %}
  {{ '<span class="label label-danger">New</span>'|t }}
{% endif %}

「ノードの作成日のタイムスタンプが『30日前』のタイムスタンプより大きい場合に、New マークを出す」というロジックを記述しています。

上記 Twig フィールドを作成すると、対象のエンティティで利用可能になるので、通常のフィールドと同様に配置したい場所に配置します。

値のマークアップの中にさらに <span> でマークアップしたい

ターム参照フィールドで例えば以下のようなマークアップにしたい場合、

<ul class=”field__items”>
  <li class=”field__item”><span>ターム1</span></li>
  <li class=”field__item”><span>ターム2</span></li>
  ...
</ul>

<ul>、<li>、までは表示管理で設定できますがその中に span を入れるのは一見難しそうに見えます。これは、タームのほうにビューモードを追加しそれを利用する方法で解決できます。

① タームにビューモードを追加
ビューモード管理（/admin/structure/display-modes/view）から、タクソノミーのビューモードを追加します。名前は「コンパクト」としましょう。

② タクソノミーの「コンパクト」ビューモードでマークアップを構築
対象のボキャブラリで「コンパクト」ビューモードを有効にし、そこで表示管理を行います。DS の「Reset layout」レイアウトを選択して、疑似フィールド「Name」を有効化してほかのフィールドをすべて無効化します。「Name」の詳細設定で Wrapper に span と入力し、Choose a Field Template で「Full reset」を選択します。

③ コンテンツの表示管理でビューモードを選択
ターム参照しているコンテンツのほうの表示管理に戻り、フォーマットを「描画されたエンティティ」に、詳細設定を開き、ビューモードの選択で先に作成した「コンパクト」を指定します。

これで見事！最初のコード通りのマークアップが実現できました！

他のフィールドの値（例えば「カテゴリー」など）に応じたクラスをつける

これは表示管理の詳細設定からトークンを使用して実現可能です。

①対象のフィールドの詳細設定を開き、Choose a Field Template を「Expert」を選択します。
「Outer Wrapper」にチェックを入れ、クラスに「category-」と入力します。

②「利用可能なトークンを表示します」からトークン選択を開き、ノードのクラスをつけたいフィールド（カテゴリー）を選択します。ターム参照フィールドであればタームID（[node:field_category:target_id] このようなトークン）を選択します。（クラス「category-」のあとにトークンが挿入されます）

③ノードを表示すると、該当箇所のクラスが category-3 のようにタームID に置き換えられています！

ターム参照フィールドで、デルタ順ではなくウェイト順に表示する

おそらくそれほどクリティカルではないかもしれませんが、このような要件もたまにあります。この場合は、Views ビューで特定のコンテンツのターム参照フィールドの値のタームをウェイト順に出力するブロックを作っておいて（コンテンツの特定はもちろんコンテキストフィルターで設定）、それで DS のブロックフィールドを作り、表示管理で配置する、という方法で解決できます。

いかがだったでしょうか。今回の内容は上級者向けなので少し敷居は高いですが、ある程度慣れてくるとこのような特殊な要件にもいろいろなテクニックを駆使して解決出来るようになります。こういうのを考えるのも楽しいですよね。参考になれば幸いです！