Drupalカスタムフィールド作成モジュール Paragraph(パラグラフ)の実力と利用方法

abechiyo 2019/07/08(月) - 18:57 に投稿

パラグラフカバー

今回の記事では Paragraphs モジュール の、あまり知られていない使い方について説明したいと思います。

パラグラフモジュールとは、「複数のフィールドのセットをひとつのフィールドの値として持つことができる」モジュールです。

フィールドの構造を「入れ子」にする必要がある場合に重宝するモジュールで、D7時代は、Field Collection モジュール、現在では ECK モジュールも同様に使用されることがあります。

しかし!

パラグラフモジュールの実力は、それだけではありません。

ご存知の方もいらっしゃるかと思いますが、パラグラフモジュールには「多彩なレイアウトパターンでの自由入力を可能にする」という、他にはない、とても強力な、優れた機能があるのです!

と、言いますか、元々は、その目的で作られたモジュールです。なぜなら、Paragraphs モジュールのページにはこのように書いてあります。

Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another.

画像や動画などを含むすべてのコンテンツを WYSIWYG でひとつの body フィールドに配置する代わりに、編集者はあらかじめ定義されたパラグラフタイプの中から、その場で適当なものを選択して配置していくことが可能です。

つまり、WYSIWYG の代わりとして使える、コンテンツの編集補助ツールのようなものだということですね。編集担当者がパラグラフを知ってしまえば、WYSIWYG でさえ面倒なツールになってしまうのです。

Paragraphsの利用例

Paragraphsモジュールの具体的な利用例をみてみましょう。

パラグラフで、あらかじめ以下のようなパラグラフタイプを作っておきます。

  • h2タイトル
  • h3タイトル
  • h4タイトル
  • 文章
  • 画像
  • 画像+文章(左画像回り込み)
  • 画像+文章(右画像回り込み)
  • 動画
  • テーブル
  • 3カラム表示
  • ......

コンテンツタイプ設定

次にコンテンツタイプの設定で、body フィールドの代わりに、field_paragraphs というフィールドを作って追加します。フィールドタイプは(Entity reference revisions = パラグラフ)です。

コンテンツタイプ設定

フィールドの設定で、有効にするパラグラフタイプに、上記のうち使いたいものをすべて選択しておきます。(ここがミソ!ここで選択したものが、実際に入力するときにその場で選択できるようになります)

パラグラフ

コンテンツの入力画面です。body の代わりにパラグラフの部品を追加していきます。

パラグラフ

h2タイトルや文章、画像、動画、テーブルなどを、必要に応じて追加していきます。

パラグラフ

「文章」+「h2タイトル」+「文章」と追加して入力したところです。入力したあとで部品の順番を変更することもできます。

パラグラフ

こちらは「画像+文章(左画像回り込み)」の入力画面。パラグラフタイプのほうであらかじめ、画像フィールドと文章のフィールドを追加したものを作っておきます。表示の際は画像が左にフロートするよう、CSS で調整しておきます。

このように、入力に必要な部品をあらかじめ登録しておき、入力の際に必要なものを任意の順番で追加していくことができます。WYSIWYG よりも断然使いやすいですね!

下図は、「事例1」という記事で、「文章」+「h2タイトル」+「文章」+「h3タイトル」+「3カラム表示」+「h3タイトル」+「画像+文章(左画像回り込み)」を追加して作成した記事です。

このように、部品を組み合わせることで、編集者が自由にレイアウトパターンをアレンジできます。

おわりに

以上、パラグラフモジュールの本来の使い方について見てきましたが、いかがだったでしょうか。
もし、入力操作の煩わしさを改善したいクライアントがいたら、パラグラフを提案してみてはいかがでしょう?(隠れたニーズはたくさんありそうですね!)

パラグラフへの入力内容は、検索にもヒットしますし、多言語にも対応しているので、活躍の幅の広いモジュールだと思います。

少し長くなってきたので、多言語対応の方法については、また別の機会にご説明したいと思います!

 

タグ