logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

Drupal CCK+Views。コンテンツタイプ。Views によるページ出力。従業員ギャラリーの作成

17/04/2025, by Ivan

前のレッスンでは、Drupal におけるノードとは何かについてお話ししました。ノードとは、私たちのブログエントリー、ページ、ストーリーのことです。このレッスンでは、「従業員(Employee)」という新しいコンテンツタイプを作成します。このコンテンツタイプは、写真と各人の説明を含む従業員のリストを作成するために使われます。

それでは、このために必要となるモジュールは次のとおりです:

Drupal CCK

1. CCKContent Construction Kit)– このモジュールを使うと、新しいコンテンツタイプを作成し、それらにさまざまなデータ入力フィールドを追加できます。

Drupal CCK Views

CCK モジュールは非常に大きいため、いくつかのサブモジュールに分割されています。次のサブモジュールが必要になります:

  1. Content – 新しいコンテンツタイプを作成するため。
  2. Content Permissions – コンテンツタイプに閲覧/編集の権限を設定するため。
  3. Number – コンテンツタイプに数値フィールドを追加でき、従業員 ID などに使えます。
  4. Option Widgets – チェックボックス、セレクト、ラジオボタン付きのフィールドを追加できます。
  5. Text – コンテンツタイプにテキスト入力フィールドを追加できます。

その他の CCK サブモジュールには次のものがあります:

  • Content copy – 既存のコンテンツタイプをすべてのフィールドごと複製できます。
  • FieldGroup – フィールドをグループ化します。フィールドが数個しかないので、これは必要ありません。
  • NodeReference – 別のノード(例:従業員の個人ページ)を参照できます。
  • UserReference – ユーザーを参照できます。従業員がサイトの登録ユーザーである場合に便利です。

設定を保存します。これで、管理メニューの Structure の下に Content Types リンクが表示されるはずです:

drupal admin menu

コンテンツタイプはすぐに追加します。まず、次のモジュールをインストールしましょう。

Drupal 用の FileField と ImageField

2. FileFieldImageField。FileField はファイルのアップロードを可能にし、ImageField はアップロードを画像形式(jpg、gif、png)に制限します。これらは従業員の写真をアップロードするために使われます。

Drupal FileField

設定を保存し、次のモジュールに進みます。

Drupal 用の Imagecache

3. ImageCacheImageAPI。ImageAPI は標準の image.inc API を置き換えます。ImageCache を使うと画像プリセットを作成でき、アップロードされた画像は元の寸法に関係なく統一されたサイズで表示されます。

Drupal ImageCache

クリックで拡大する画像エフェクトのために lightbox2 をインストールすることもできます。インストール後、lightbox 対応の追加プリセットが利用できるようになります。

4. Views モジュール。これはクエリビルダーで、SQL を知らなくてもコンテンツのリストを表示できます。モジュールをインストールします。

Drupal Views

設定を保存します。これで従業員リストを構築する準備ができました。

Drupal で従業員ディレクトリを作成する

まず、コンテンツタイプ「従業員」を作成します。Structure - Content Types - Add content type に移動します。

Drupal CCK

注意:「Name」フィールドは UI を分かりやすくするためにロシア語にすべきです。「Type」フィールド(マシン名)は、小文字のラテン文字とアンダースコアのみにすべきです。

Drupal views

「従業員」コンテンツタイプができたので、「Manage Fields」をクリックしてデータ入力用のフィールドを追加します。

次の設定で新しい画像フィールドを追加します:

  • ラベルはロシア語
  • フィールド名はラテン文字(例:field_employee_photo)
  • データ型:File
  • ウィジェット:Image

Drupal add fields

保存をクリックし、デフォルト設定を受け入れます。

Drupal CCK

次に、「氏名」と「従業員について」のテキストフィールドを追加します。「氏名」には、長さを 100 に設定したテキストフィールドを使います。

Drupal fields

「従業員について」には、テキストエリアを使います。テキスト処理を「Filtered text (user selects input format)」に設定します。

Input formats

フィールドは次のようになるはずです:

Drupal cck

これでコンテンツタイプの準備ができました。Content - Add content - Employee に移動します。

Drupal employee gallery

フィールドに入力します。画像、氏名、about フィールドが表示されます。デフォルトの title と body フィールドも使えますし、必要に応じて無視することもできます。

employee

従業員を保存します。ノードの URL は node/9 のようになります。この URL を使って機能をテストします。

ImageCache プリセットを作成する

Structure - ImageCache - Add new preset に移動します。プリセットに例えば 100x100 と名付けます。「Add scale and crop」を選択し、100x100 ピクセルに設定します。プリセットを保存します。

drupal cck

次に Views を使って従業員ギャラリービューを作成する

Structure - Views - Add view に移動します。view_employees と名付けます。ビュータイプとして「Content」を選択します。

Drupal Views

「Next」をクリックして Views の UI に入ります。

Drupal CCK

フィールドを追加します:Content: Full Name、About Employee、Photo。必要ならラベルを削除します。画像フィールドには、100x100 プリセットまたは lightbox バリアントを選択します。

Drupal add fields

フィルターを構成します:「従業員」タイプの公開済みコンテンツのみを表示します。

Drupal filters

必要に応じてフィールドの表示順序を調整します。

Drupal cck imagecache

ページディスプレイを追加します。パスを設定します。例:sotrudniki

Drupal cck views

ビューを保存します。これで従業員ギャラリーが yoursite.com/sotrudniki で利用できるようになります。

次のレッスンでは、このビューをブロックや機能拡張で改善します。