ノード編集フォームをタブで整理する

コンテンツタイプの設定でフィールドの数が多くなってくると、編集画面も煩雑になってきて、どこに何があるのか入力する個所を探すのも大変になってきます。

Field Group モジュールをインストールしていれば、フィールドグループを追加して開閉式のフィールドセットにまとめることも出来ますが、それでもフィールドセットを開閉するたびにスクロールしたり、戻ったりとまだ少し煩雑です。

Field Group モジュールにはフィールドグループをタブで表示させる機能があるので、それを使うと編集画面がタブで整理され、とてもすっきりします。

上の図は、ノード編集フォームに「本文」「イメージ」「データ」「関連」「チャート」「プロモーション」というタブを作り、「本文」タブには概要と本文、「イメージ」タブにはメインイメージやサムネイルなど、「データ」タブには詳細データ、... といった具合に、それぞれにフィールドの入力ウィジェットを入れています。

これですっきり。

※上の例では、トップページでプロモートさせたい内容は「プロモーション」というタブを作りそこに入れています。以前は「フロント用」などとしていましたが、Drupal の掲載オプションで「フロントページへ掲載」のことを promote といいますし、「プロモーション」のほうがカッコいいですね。

■ 設定手順

※以下は Drupal 7 の説明になりますが、Drupal 8 でも基本的には同じです。(若干操作は異なりますが、大まかには同じ)

Field Group モジュールがインストールされていない場合は、インストールします。

コンテンツタイプのフィールド設定(サイト構築 > コンテンツタイプ > (コンテンツタイプ名) > フィールドの管理)で設定をします。
大まかには、Add new group からタブとタブグループを追加し、タブグループ > タブ > フィールド となるように配置する、という流れになります。

Add new group から Horizontal tabs group を追加します(ウィジェットの選択で Horizontal tabs group を選択)。ラベルにはここでは「タブグループ」と入力。

次に Horizontal tabs を追加します。親には先ほど追加した「タブグループ」を選択。(※「親」の選択が表示されないときは、テーブルの右上「行のウェイトを表示する」というリンクをクリックしてみてください)

同様にタブをいくつか追加します。※タブが 1 つだけだとタブとして表示されないので、タブとして表示させるには 2 つ以上のタブが必要です。
親には最初に追加した Horizontal tabs group のラベル「タブグループ」を指定します。

それぞれのタブに配置するフィールドを配置していきます。それぞれのフィールドの「親」に親となるタブを設定し、最後に画面下の「保存」をクリックで完了です。

■ 補足

もちろんこれはノードだけでなくユーザーやタクソノミーなどほかのエンティティでも使えます。

また、「表示管理」でこれを使えば、ノードの編集フォームではなく表示画面のほうもタブで表示出来ます。(CSS で装飾すれば公開用の表示としてもアリだと思います)

 

コア: 
Drupal7
Drupal8