web-dev-qa-db-ja.com

ビューの日付フィールドに追加のクラスを追加するにはどうすればよいですか？

Drupal 7を使用しています。日付フィールドを使用するビューを作成しました。その特定のビューの日付フィールドに追加のクラスを作成したいと思います。

例えば、

<div class="field-content">
 <span class="date">10</span>
 <span class="month">June</span>
 <span class="year">2011</span>
 <span class="time"> 8:00 </span>
</div>

今私はコードを持っています：

<div class="field-content">
 <span class="date-display-single">10 June 2011, 8:00</span>
</div>

どうすれば段階的にそれを行うことができますか？

7themingdatetime
7
user1513

  1. トークンモジュール（最新のベータ版にはフィールドトークンが含まれています）およびカスタムフォーマッタモジュールを http://drupal.org/projectからインストールする必要があります。/custom_formatters 。

  2. 次に、モジュールページから有効にします。

  3. Admin-> structure-> formattersに移動します。

  4. 新しいフォーマッターを追加し、好きな名前を付けます。

  5. 形式：HTML +トークン

  6. フィールドタイプ：日付

  7. フォーマッター：

    <span class="day">[node:source:field-datefieldname:custom:j]</span>
<span class="month">[node:source:field-datefieldname:custom:F]</span>
<span class="year">[node:source:field-datefieldname:custom:Y]</span>

  8. セーブ

これで、カスタムの日付フォーマッターが作成されました。これを自分のビューで使用できます！

3
john

追加のモジュールなしでこれを行うことができます。

  1. 日付フィールドを追加します。これを表示から除外します。カスタムを選択し、ボックスにdと書きます（その日のphpの日付のように）。 「スタイル設定」を変更します-カスタマイズフィールドHMTL（なしに設定）およびカスタマイズフィールドとラベルラッパーHTML（なしに設定）。 Drupal date field
  2. 日付フィールドを再度追加します。これも表示から除外します。カスタムを選択し、ボックスにMを書きます（月のphp日付のように）。 「スタイル設定」を変更します-カスタマイズフィールドHMTL（なしに設定）およびカスタマイズフィールドとラベルラッパーHTML（なしに設定）。
  3. 日付フィールドを再度追加します。これも表示から除外します。カスタムを選択し、ボックスにYを入力します（PHPの年のように）。 「スタイル設定」を変更します-カスタマイズフィールドHMTL（なしに設定）およびカスタマイズフィールドとラベルラッパーHTML（なしに設定）。
  4. 日付フィールドをもう一度追加します（LAST TIME！）。これをディスプレイから除外しないでください。カスタムを選択し、G：i（phpの日付と同様に時間と分）を記述します。 「スタイル設定」を変更します-カスタマイズフィールドHMTL（なしに設定）およびカスタマイズフィールドとラベルラッパーHTML（なしに設定）。

  5. この最終日付フィールドの結果を書き換えます。置換パターンを使用して、次のようなものを書くことができます：

    <div class="date">
  <span class="day">
    [created]
  </span>
  <span class="month">
    [created_1]
  </span>
  <span class="year">
    [created_2]
  </span>
</div>

Drupal Rewrite Results

4
David Paul

かなり高速ですが（phpを記述できる場合）、少しハックな解決策は、そのフィールドのテンプレートを上書きすることです（ Views theming basics を参照）。ピースを作成し、選択したHTMLでそれらを接着します。

または、カスタムの日付フィールドフォーマッターを作成することもできます（ ここ は、D6でそれを実行した人です）。ノードでカスタムフォーマッタを再利用する場合に便利なソリューションです。

3
marcvangend

これは、ビューUIを使用して行うことはできません。あなたはかなり複雑なコードを必要とするでしょう、そして私はあなたがそれを理解することに着手するように勧める前にあなたのユースケースに興味があります。

フィールド全体にクラスを追加する方法を尋ねた場合、答えは次のようになります。

  1. ビューインターフェイスのフィールドをクリックします。

  2. 「スタイル設定」フィールドセットを展開します。

  3. [フィールドHTMLをカスタマイズする]チェックボックスをオンにし、[CSSクラスを作成する]チェックボックスをオンにします。

  4. 希望のクラスを入力してください。

おそらくそのソリューションで十分でしょう。それ以外の場合は、幸運を祈ります。

1
tim.plunkett

これは本当に簡単です（一度知ったら）

表示スイートのカスタムフィールドを使用する

Admin/structure/ds/fieldsに移動します

（メニュー：構造->表示スイート->フィールド）

[コードフィールドを追加]をクリックします

私のユースケースでは、次のように入力しました

ラベル

なんでも

エンティティ

Node

制限フィールド

空白のままにした

フィールドコード

<div>
  <span class="mf-month">[node:created:custom:M]</span> 
  <span class="mf-day">[node:created:custom:d]</span>
</div>

トークン

チェック済み

フィールドを作成したら、調整するコンテンツタイプと表示モードの表示管理ページに移動し、新しいカスタムフィールドを選択します。

上記の設定のスクリーンショット

Screenshot of the settings page

1
chim