Drupalの段落モジュールの究極のチュートリアル

過去数か月にわたって、私たちはますます多くのDrupal8サイトと協力してきました。 これらのプロジェクトにはすべて共通点が1つありました... Drupal段落モジュールを使用していました。

段落は、Drupal8でコンテンツを処理するための非常に人気のあるモジュールです。

段落はコンテンツフィールドと同じように機能しますが、コンテンツのデザイン、レイアウト、およびグループ化のための幅広いオプションも提供します。

段落を学びたいなら、これは究極のガイドです！ このチュートリアルの10の部分すべてを読み、見て、フォローしてください。 最後に、すべてのサイトで段落を使用するようになります。

パート1。 Drupal Paragraphsモジュールを使用する理由

段落の種類は、単純なテキストブロックや画像から、複雑で構成可能なスライドショーまで、何でもかまいません。

すべてのコンテンツを1つのWYSIWYG本文フィールドに配置する代わりに、エンドユーザーは事前定義された段落タイプからオンザフライで選択できます。 複数の高度な機能を作成でき、エンドユーザーは使用する機能を選択できます。

これにより、ユーザーは高度なコンテンツを簡単に追加できます。 たとえば、ユーザーはプルクォートをコンテンツ本文に追加する方法を理解していても、中央に配置されたり、正しくフォーマットされたりしない場合があります。 また、記事内にコールアウトボックスを含めるなど、より複雑なことをしたいと思うかもしれませんが、必要なスタイルを追加する方法がわかりません。

Drupal Paragraphsモジュールは、これらのようなプロセスを技術者以外のユーザーにとってはるかに管理しやすくすると同時に、開発者にテーマレベルでそのような特別にフォーマットされた要素のフォーマットと外観を制御する機能を提供します。

実際には、段落を使用すると、コンテンツフィールドのように要素を挿入できますが、特定のコンテンツの本文の周りに要素を追加する代わりに、効果的に本文全体に挿入されます。

このガイドでは、記事の形で情報コンテンツを提供する「Life AdviceforFree」というWebサイトを作成していると想像します。 必要に応じて、他の開発Webサイトをフォローし、微調整を行うことができます。

パート2。 Drupal段落モジュールのインストール

このプロジェクトでは、空白のDrupal8テストサイトを使用することをお勧めします。

• Paragaphsモジュールをダウンロードするには、ここをクリックしてください。
• 段落には、エンティティ参照リビジョンモジュールも必要です。
• これらの2つのモジュールをダウンロードし、/ modulesディレクトリに配置したら、サイトにインストールします。

パート＃3。 最初の段落を作成する

段落は、「段落タイプ」と呼ばれるものを作成できるようにすることで機能します。この場合、これらの段落タイプを使用する特定のコンテンツタイプのBodyフィールドをまとめて置き換えます。

段落の利用を開始するには、最初に少なくとも1つの段落タイプを作成してから、その段落タイプをコンテンツタイプに追加する必要があります。 このプロセスは最初は混乱するように思われるかもしれませんが、1つまたは2つの段落タイプを設定すると簡単に理解できます。

このデモンストレーションでは、デフォルトのArticleコンテンツタイプのBodyフィールドを少数のParagraphsタイプに置き換えます。

重要：Articleタイプのコンテンツが既にあるサイトでこれをテストしている場合は、このデモで行うように、ArticleコンテンツタイプのBodyフィールドを削除しないでください。 そうした場合、あなたはあなたのウェブサイト上のすべての記事の本文を失うでしょう。 Articleコンテンツタイプがすでに使用されているサイトで作業している場合は、段落モジュールをテストするための新しいコンテンツタイプを作成する必要があります。

「LifeAdvicefor Free」サイトでは、Articleコンテンツタイプを編集して段落の構成を開始します。

• [構造]> [コンテンツタイプ]に移動します。
• 記事行の「フィールドの管理」ボタンをクリックします。
• これで、Articleコンテンツタイプの[フィールドの管理]ページが表示されます。 このページで、[本文]行の[編集]ボタンの横にあるドロップダウン矢印をクリックし、[削除]をクリックします。
• 次のページで削除を確認します。

次に、最初の段落タイプを作成します。

• [構造]> [段落タイプ]に移動します。
• 「段落タイプの追加」をクリックします。
• 次のページで、この段落タイプのラベルを提供する必要があります。 デモンストレーションでは、これをコンテンツの本文として使用するため、これを「本文テキスト」と呼びます。
• 「フィールドの保存と管理」をクリックします。
• この「フィールドの管理」ページで、「フィールドの追加」をクリックします。
• 次の[新しいフィールドの追加]ドロップダウンリストで、下にスクロールし、[テキスト]の下で[テキスト（フォーマット済み、長い、要約付き）]を選択します。 これは、Articleコンテンツタイプがよく使用するデフォルトのBodyフィールド、つまりWYSIWYGエディターを備えた長い形式のテキスト領域に似ています。
• 次の「フィールドの追加」ページでは、この特定のフィールドにも「本文」というラベルを付けます。
• 「保存して続行」をクリックします。
• 次に、このフィールドの「フィールド設定」タブに移動します。 これらのフィールドのいずれに対しても、許可される値の数を指定できます。 一部のフィールド（特に、日付、画像ファイル、名前などの情報の短い形式のテキストフィールドなど、個々の目立たない情報を受け入れるフィールド）には複数の値を許可すると便利ですが、長い形式のテキスト領域には許可する必要があります。 、段落は単一のテキスト領域に次々に配置できるため、多くの場合、追加の値を指定する必要はありません。 この例では、デフォルト設定を「制限付き」と1のままにします。
• 「フィールド設定の保存」をクリックします。
• 次の「本文テキストの本文テキスト設定」ページでは、すべてのデフォルトを保持できます。 ユーザーは、テキスト領域のWYSIWYGエディターで通常使用するすべての書式設定オプションを引き続き使用できることに注意してください。 私たちは彼らから何も奪っていません。 代わりに、特定のタイプの要素をコンテンツに追加するための追加の改善された方法を提供します。
• 「設定を保存」をクリックします。
• これで、新しい段落タイプ内に新しいフィールドが表示されます。

• この次のページで、「ディスプレイの管理」タブをクリックします。
• 現在、この段落タイプには、本文テキストフィールドという1つのフィールドしかありません。 このフィールドのテキストと一緒にラベルを表示したくないので、このフィールドの[ラベル]列で[非表示]を選択します。 フォーマットはデフォルトのままにする必要があります。
• 「保存」をクリックします。

次に、この段落タイプをArticleコンテンツタイプに追加して、そのコンテンツタイプで使用できるようにする必要があります。 これを行う方法は次のとおりです。

• [構造]> [コンテンツタイプ]に移動します。
• 記事のコンテンツタイプとして「フィールドの管理」をクリックします。
• 「フィールドの追加」をクリックします。
• このフィールドで新しい段落タイプを使用するには、[フィールドタイプの選択]ドロップダウンリストを開き、[参照リビジョン]の下の[段落]を選択します。
• 「段落」を選択した後、「本文」というラベルを付けます。これは、コンテンツの本文として使用しているものです。
• 「保存して続行」をクリックします。
• 次のページで、「参照するアイテムのタイプ」を「段落」に設定する必要があります。
• 「許可される値の数は「無制限」である必要があります。 「無制限」を選択すると、構成済みの段落タイプによって提供されるこの特別なフィールドを何度でも挿入できます。 これは、コンテンツの本文にテキスト以外のものを挿入し始めるときに役立ちます。
• 「フィールド設定の保存」をクリックします。
• 次の「記事の本文の設定」ページで、以前に作成した段落タイプをこのフィールドで使用できるようにする必要があります。 これを行うには、ページの下部にある[タイプ]の下の[本文]の横にあるチェックボックスをオンにします。 このようにして、特定の段落タイプをこのフィールドで使用できるようにします。 サイトに段落タイプを追加すると、戻ってきてこのフィールドでも利用できるようになります。

• 「設定の保存」をクリックすると、サイトはコンテンツタイプの「フィールドの管理」ページに戻るはずです。

これで、以前の（デフォルトの）Bodyフィールドを、段落、具体的には作成した「Bodytext」段落タイプを利用する新しいBodyフィールドに置き換えることができました。 次に、希望どおりに表示されるように、さらにいくつかの設定を構成します。

• まず、[フォーム表示の管理]タブをクリックして、記事のコンテンツ作成ページの目立つ場所に新しい[本文]フィールドを配置できるようにします。
• このページで、下にスクロールして新しい[本文]フィールドを見つけ、リストの上部、[タイトル]のすぐ下にドラッグします。
• 「保存」をクリックします。

次に、新しい段落タイプがサイト訪問者にとって適切な場所で利用可能であることを確認する必要があります。

• 「表示の管理」をクリックします。
• ここでも、下部にボディがあります。 これを画像のすぐ下の上部近くにドラッグします。 その画像フィールドは、コンテンツ自体の一部ではなく、記事の大規模な紹介画像または導入画像として扱います。
• 「保存」をクリックします。

この時点で、この新しい段落フィールドを使用して、記事コンテンツタイプの設定が完了しました。 次に、テストするコンテンツを作成します。

• サイトのコンテンツページに移動し、[コンテンツの追加]をクリックします。
• 「記事」をクリックします。
• 記事には任意のタイトルを入力できます。 この例では、私たちの記事を「100人の友達を作る方法」と呼びましょう。
• さて、Bodyフィールドに至るまで、以前と同じようにWYSIWYGエディターで同じ長い形式のフィールドを使用しているにもかかわらず、少し異なって見えることに気付いたかもしれません。 現在の違いは、現在1つのBodyテキストフィールドを含む包括的なBodyフィールドがあることです。 本文テキストフィールドのすぐ下に、複数のフィールドを追加できる「本文テキストの追加」ボタンが表示されます。 この時点では、現在使用されている長いテキストフィールドは長い複数段落のテキストの入力に完全に適しているため、これは不要です。同じフィールドにテキストを追加するだけで、フィールドを追加する必要はありません。 。 ただし、後で、サイトに複数の段落タイプを実装したときに、段落フィールドを追加できると非常に便利になることがわかります。 今のところ、本文のテキストフィールドに1〜2段落のテキストを入力するだけです。

記事を保存して、訪問者に表示されるようにページを表示します。

この時点で、段落を使用する新しい本文は、デフォルトの本文フィールドを使用する記事と何ら変わりはありません。 ただし、段落を配置すると、コンテンツ作成者がコンテンツのスタイルを適切に設定する方法を知らなくても、コンテンツに要素を追加できるようになります。

パート＃4。 CSSを段落に追加する

Paragraphsを非常に便利にする大きな部分は、特定のコンテンツ内要素のCSSを記述できるため、コンテンツ作成者がWYSIWYGエディターまたはインラインCSSを使用してこれらの要素の多くを手動でスタイル設定する必要がないことです。 これは、これらの要素が希望どおりに表示されるように、サイトのテーマをカスタマイズすることを意味します。

多くの実際のケースでは、カスタムテーマまたは独自のサブテーマを使用している可能性があります。その場合は、自由に編集できます。 このチュートリアルでは、デフォルトのBartikテーマのすばやく簡単なサブテーマを作成して、Bartik自体を編集せずに、ベストプラクティスに従い、独自のCSSを追加できるようにします。 （Bartik、またはその他のコアテーマや寄稿テーマを直接編集することは避けます。編集した後で、リリースされた更新をそのテーマに適用すると、独自の変更が失われるためです。）サブテーマの作成に慣れていない場合は、問題ありません。 プロセスを広範囲に掘り下げるのではなく、テーマの直接コピーを作成し、それにいくつかのわずかな変更を適用します。 これは簡単なプロセスです。

• サブテーマを作成するには、最初にサイトがホストされているサーバーにアクセスし、サイトのルートディレクトリに移動する必要があります。
• そこで、「themes」ディレクトリを開きます。 これは、すべてのカスタムおよび寄稿されたテーマとサブテーマが配置される場所です。 この「themes」ディレクトリに「custombartik」という新しいフォルダを作成し、この新しいディレクトリに移動します。

次に、この新しいディレクトリにいくつかのファイルを追加する必要があります。 1つ目はテーマの情報ファイルになります。 Web開発に使用するコード編集ソフトウェアを開きます。 これらの情報ファイルには、プロジェクトの名前（テーマの名前）、プロジェクトのタイプ（この場合は「テーマ」）、サブテーマの場合はベーステーマのマシン名（私たちの場合）など、いくつかの情報が必要です。 is）、簡単な説明、およびテーマが作成されたDrupalのメジャーバージョン（7.x、8.xなど）。 この情報を次のフォームに入力します（表示されているとおりにすべてを入力します）。

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

基本テーマ名「bartik」が大文字になっていないことを確認してください。これは、大文字と小文字が区別される機械可読な名前です。 この情報を入力して、ファイルを「custombartik.info.yml」として保存します。 作成したフォルダとまったく同じ名前に続けて「.info.yml」を付けて保存することが重要です。

次に、テーマのライブラリファイルを作成する必要があります。ここで、DrupalにテーマのCSSの場所と、これがどのバージョンのテーマであるかを指示します。 より多くの情報を提供することができますが、これが私たちの目的に必要なすべてです。

• 新しいファイルを開きます。 このファイルでは、ここのインデントに細心の注意を払ってください。 各インデントは2つのスペースのタブである必要があります。
• 表示されたとおりに次の情報を入力します。

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• このファイルを「custombartik.libraries.yml」として保存します。 このファイルは基本的に、これがテーマのバージョン0.1（これには任意のバージョン番号を付けることができます）であり、css / style.cssのテーマディレクトリ（「custombartik」）内にスタイルシートがあることをWebサイトに通知します。

次に、情報ファイルに戻って、「global-css」コンテナーの下の情報を使用してスタイルシートを見つけるようにDrupalに指示する必要があります。

• custombartik.info.ymlファイルを開き、「core：8.x」行の下に空白行を追加してから、次の情報行を追加します。ここでも、以下のようにインデントを正確に維持します。

 libraries:  - custombartik/global-css

ファイル全体は次のようになります。

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

この時点で、これら2つのファイルをテーマに追加する準備が整いました。

• custombartik.info.ymlファイルとcustombartik.libraries.ymlファイルをcustombartikフォルダーにアップロードまたはコピーします。
• 次に、custombartikフォルダー内に「css」というフォルダーを追加します。
• 先に進み、「style.css」という名前の空のファイルを作成して、このディレクトリにアップロードします。 これが私たちのスタイルシートになります。
• ただし、スタイルシートを作成する前に、Webサイトの「外観」ページに移動してください。
• ページの一番下までスクロールすると、[アンインストールされたテーマ]セクションの下に、カスタムBartikテーマが表示されます。 表示されない場合は、custombartikフォルダーとそのすべてのファイルがサイトのファイルシステムのthemesフォルダーにあることを確認してください。
• カスタムテーマの下にある[インストールしてデフォルトとして設定]をクリックすると、サイトでテーマの使用が開始されます。
• これが完了したら、ホームページに移動します。Drupalのロゴの代わりに壊れた画像アイコンが表示されることを除けば、DrupalのデフォルトのBartikテーマとほぼ同じように表示されます。 テーマはBartikと同じように見えます。これは、作成したのがBartikのサブテーマであり、カスタマイズがまだ行われていないためです。 サイトがBartikのように見えない場合、特にCSSスタイルのないプレーンHTMLのように見える場合は、2つの.ymlファイルに戻って、上記のように正確に表示されることを確認してください。

最後に、壊れたロゴ画像を修正するために、ロゴをBartikからサブテーマに直接コピーします。 Bartikでは実際には何も変更していないので、これは問題ありません。

• サイトのルートディレクトリに移動し、core / themes / bartikに移動します。 ここに、「logo.svg」というファイルがあります。
• このファイルをサブテーマ（「custombartik」ディレクトリ）にコピーします。
• Webサイトで、[構成]> [パフォーマンス]に移動し、[すべてのキャッシュをクリア]をクリックします。 これで、ロゴがサイトに表示されます。

パート＃5。 Paragaphsフィールドのスタイリング

安全に編集できるサブテーマができたので、段落によって制御されるコンテンツの要素のスタイル設定ルールの設定を開始できます。 その前に、特別なスタイルルールを必要とする新しい段落タイプを作成する必要があります。 記事の真ん中に中央の画像を挿入するフィールドがある例に従います。

• [構造]> [段落タイプ]に移動します。
• 「段落タイプの追加」をクリックします。
• これのラベルを「中央の画像」に設定します。
• 「フィールドの保存と管理」をクリックします。
• 次のページで、[フィールドの追加]をクリックし、[新しいフィールドの追加]の下にある[画像]を選択します。
• このフィールドにも「中央の画像」というラベルを付けます。
• 「保存して続行」をクリックします。
• 次のページでは、すべてのデフォルト値を保持できるため、[フィールド設定を保存]をクリックします。
• 次に、「中央の画像の中央の画像設定」ページで、いくつかの簡単な制限を追加します。 最大画像解像度を650x450に、最小解像度を50x50に設定します。 最大アップロードサイズを1MBに設定し、[設定を保存]をクリックします。 これらの特定の設定は、段落タイプが正しく機能するために必要ではありません。 単に実際のシナリオを模倣するためにそれらを含めています。

• 次に、[表示の管理]タブをクリックし、中央の画像ラベルを[非表示]に設定して、[保存]をクリックします。

この時点で、ArticleコンテンツタイプにあるParagraphsフィールドにこのParagraphsタイプを追加する必要があります。

• [構造]> [コンテンツタイプ]に移動します。
• 「記事」の横にある「フィールドの管理」をクリックします。

新しい「中央の画像」段落タイプの場合は、ここで[フィールドの追加]をクリックしたくなるかもしれませんが、これはカスタムの[本文]フィールドと混ざり合うことを忘れないでください。 そのため、代わりに、作成したBodyフィールドに中央の画像を追加します。

• 「本文」の横にある「編集」をクリックし、ページの一番下までスクロールします。
• ここでは、「本文」の段落タイプの下に「中央の画像」が表示されます。
• [中央の画像]の横にあるチェックボックスをオンにしてこのフィールドで使用できるようにし、設定を保存します。

次に、このフィールドを使用して画像を追加します。

• コンテンツページに移動し、「100人の友達を作る方法」の記事を編集します。
• 記事の途中に中央揃えの画像を追加したいとします。 本文テキストフィールドの下に、この本文フィールド内に別の本文テキストフィールドを追加するための「本文テキストの追加」ボタンが再び表示されます。 ただし、このボタンの横にあるドロップダウン矢印をクリックすると、「中央揃えの画像」も使用できるようになります。 このボタンをクリックして、ここにアップロードする画像ファイルを選択してください。 次に、それが必要なので、いくつかの代替テキストを提供します。

これで画像がコンテンツに追加されましたが、現在はすべてのテキストの下に配置されています。 ここで、追加の本文テキストフィールドを利用します。

• 「本文テキストの追加」をクリックします。 これで、上から下に、本文テキストのフィールド、中央揃えの画像、および本文テキストの別のフィールドができました。 この時点ではそうする必要はありませんが、個々の段落フィールドの左上にあるドラッグアンドドロップ矢印を使用して、これらを自由に移動できることに注意してください。 中央の画像を記事のテキストの間に挟んで表示するには、最初の本文のテキストフィールドに移動し、画像の後に表示するテキストを選択して、フィールドからそのテキストを切り取ります。 次に、下にスクロールして、切り取ったテキストを2番目の本文テキストフィールド（画像の後）に貼り付けます。
• 「保存」をクリックします。

あなたが今あなたの記事を見るとき、それはまだ完全に正しく見えないでしょう。 テーマにスタイリングルールをまだ追加していないため、画像は中央ではなく左にフロートする可能性があります（デフォルトの場合）。 ただし、最初の本文テキストフィールドのテキストの後、2番目の本文テキストフィールドのテキストの前に表示する必要があります。 これで、いくつかのカスタムスタイリングルールをテストできる記事ができました。

パート＃6。 CSSを使用した段落の制御

次に、カスタムサブテーマに移動して、作成した段落フィールドの出力のスタイル設定を開始します。 今のところ、コンテンツタイプの包含段落フィールドではなく、「中央の画像」フィールドを具体的にターゲットにします。 これを行うのは、このフィールドがどこにあるかに関係なく、いつでも中央に配置されるようにするためです。 したがって、「中央の画像」に直接ルールを設定することで、複数のコンテキストに不要な複数のルールを設定することを回避できます。

ただし、デフォルトでは「ノード」クラスの対象となるこのフィールドのスタイルが設定されるため、「ノード」クラスを対象にする必要があります。 したがって、これらのルールをオーバーライドする必要があります。

• custombartik / css /style.cssで「custombartik」サブテーマのスタイルシートを開きます。
• ファイルはまだ空であるはずですが、ここでルールの追加を開始します。 とりあえずシンプルにしておきます。 次のコード行をスタイルシートに追加します。

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

最初の一連のルールでは、フィールドクラス内で画像を水平方向に中央揃えにし、テキストなどがその横に浮かないようにします。 2番目のルールセットは厳密には必要ありませんが、画像がコンテンツ領域に対して必要以上に大きくならないようにするための一般的なコードです。

• これをstyle.cssファイルに追加したら、変更を保存します（これ以降、サブテーマに変更を保存することへの言及は、サーバーで直接編集していない場合は、ファイルをサーバーにアップロードまたはコピーすることも想定しています。テストサイトがあります）。
• 次に、サイトで[構成]> [パフォーマンス]に移動し、[すべてのキャッシュをクリア]をクリックして、テーマの変更をサイトにロードします。
• 中央に配置する画像を追加した記事に戻ります（または、すでに開いている場合はページを更新します）。

「中央に配置された画像」の段落タイプを介して配置された画像は、テキストが両側に浮かぶことなく中央に配置されるはずです。 追加したいスタイルがさらにあるかもしれませんが、このチュートリアルの目的のために、現時点でやりたいことを実行しました。ユーザーが追加できるように、このフィールドの出力がCSSによって厳密に制御されていることを確認してください。コンテンツは、WYSIWYGエディターまたは他のインラインスタイリング方法を使用して自分でスタイリングする必要はありません。

パート＃7。 複数のフィールドを持つ段落

また、それ自体が複数のフィールドで構成される段落タイプを作成することもできます。

たとえば、「中央に配置された画像」タイプの代わりに、「キャプション付きの中央に配置された画像」タイプを作成できます。これは、画像アップロードフィールドと、そのタイプの任意の単一要素の付随するテキストフィールドで構成されます。 これも、サイトにコンテンツを追加する際のレイアウトの負担を取り除き、テーマレベルでコンテンツの表示を制御できるようにするのに役立ちます。

この「キャプション付きの中央の画像」タイプを作成して、複数フィールドの段落タイプを作成するプロセスを練習してみましょう。 ご想像のとおり、このプロセスは、単一フィールド型を作成するプロセスと似ています。

• [構造]> [段落タイプ]に移動し、[段落タイプを追加]をクリックします。
• このタイプに「キャプション付きの中央の画像」というラベルを付け、「フィールドの保存と管理」をクリックします。
• 「フィールドの追加」をクリックします。

以前に作成した「中央の画像」フィールドは、新しい段落タイプの画像部分に必要なものであるため、新しいフィールドを作成する代わりに、前のフィールドを再利用できます。 したがって、「フィールドの追加」ページの「新しいフィールドの追加」では何も選択しないでください。

• [既存のフィールドを再利用する]で、[画像：field_centered_image]を選択します。
• 「中央の画像」ラベルを保持し、「保存して続行」をクリックします。
• 次のページで、画像のサイズ境界の設定を構成する必要があります。 もう一度、最大画像解像度650x450ピクセル、最小画像解像度50x50ピクセルを入力してみましょう。 最大アップロードサイズを1MBに設定します。
• 「設定を保存」をクリックします。

次に、別のフィールドを追加します。 新しい段落タイプの設定はまだ行われているため、この2番目のフィールドを追加すると、「キャプション付きの中央の画像」は2つのフィールドを持つ1つのタイプになります。

• 「フィールドの追加」をクリックし、「テキスト（プレーン）」タイプの新しいフィールドを追加します。
• このフィールドに「キャプション」というラベルを付けます。
• 「保存して続行」をクリックします。
• 一部の長いキャプションはデフォルトの255文字の制限を超える必要がある場合があるため、このフィールドの最大長を500に変更します。許可される値の数を「制限付き」と1に保ち、設定を保存します。
• 次のキャプション設定のデフォルトはすべて問題ないので、そのページにも設定を保存します。

これで、新しい段落タイプに必要なすべてのフィールドが含まれるようになったので、表示を制御してみましょう。

• 「表示の管理」タブをクリックして、この場合は不要なフィールドラベルを削除できるようにします。
• 両方のフィールドの[ラベル]列で[非表示]を選択し、[保存]をクリックします。
• 2つのフィールドの順序が狂っている場合は、キャプションフィールドが画像フィールドの後に来るように再配置しますが、最後にキャプションフィールドを追加したので、必要に応じて、画像フィールドの後にすでに配置されているはずです。 。

次に、Articleコンテンツタイプに新しいタイプを追加します。

• [構造]> [コンテンツタイプ]に移動し、記事の[フィールドの管理]をクリックします。 最初の「中央の画像」段落タイプをコンテンツタイプに追加したときと同様に、新しいフィールドを完全に追加するのではなく、この新しい段落タイプをカスタムの本文フィールド内に追加します。
• 記事の「フィールドの管理」ページで、本文の「編集」をクリックします。
• ページの一番下までスクロールし、[キャプション付きの中央の画像]の横にあるチェックボックスをオンにして、この[本文]フィールドでそのタイプを使用できるようにします。
• 「設定を保存」をクリックします。
• これで、この新しい段落タイプは、サイトに記事を追加するユーザーが利用できるようになります。

このフィールドを使用して新しい記事を作成してから、表示を制御するためのスタイルを追加します。

• [コンテンツ]ページに移動し、[コンテンツの追加]をクリックして、[記事]をクリックします。
• この記事を「楽器を演奏することを学ぶことはあなたの人生を改善するかもしれない」と呼びましょう。
• 「本文テキストの追加」をクリックして、記事へのテキストの追加を開始します。 このフィールドに1〜2段落のテキストを入力します。
• 次に、[本文]テキストフィールドの下で、[本文テキストを追加]の横にあるドロップダウン矢印をクリックし、新しく使用可能な[キャプション付きの中央の画像を追加]オプションを選択します。 予想どおり、データ入力用の2つのフィールド（この段落タイプに属する「中央の画像」フィールドと「キャプション」フィールド）が表示されていることに注意してください。
• 画像を画像フィールドにアップロードし、代替テキストを提供します。
• 次に、「レスポールはロックンロールで最も伝説的なギターの1つです」と入力します。

次に、画像とキャプションの後に記事の残りのテキストの一部を追加します。

• 画像とキャプションの段落タイプの下で、もう一度[本文テキストを追加]をクリックします。
• 別の段落または2つのテキストを追加します。
• 最後に、[保存して公開]をクリックします。

現在、「中央の画像とキャプション」の表示は半分正しいはずです。 以前の「中央に配置された画像」フィールドを再利用したため、画像のみで構成されていた前のフィールドが中央に配置された場合と同様に、画像自体はすでに中央に配置されているはずです。 もちろん、キャプションテキストにはまだCSSルールがないため、左揃えで表示され、記事の他の部分のテキストと同じように見えます。 したがって、このキャプションテキストのスタイルを設定するには、テーマにいくつかのルールを追加する必要があります。

今回は、CSSを作成するときに、「キャプション付きの中央の画像」の段落タイプ全体をターゲットにしてから、以前のようにコンテナに依存しないキャプションテキストをターゲットにするのではなく、そのクラス内のキャプションフィールドにドリルダウンします。中央の画像。 このキャプションテキストフィールドを他の場所で再利用したい場合があるため、このアプローチを採用します。場合によっては、この方法とは異なるスタイル（中央ではなく左または右に配置するなど）が必要になる可能性があります。特定の段落タイプ。

対応する画像が中央に配置されているため、キャプションテキストを中央に配置し、このテキストと記事のテキストを視覚的に区別するために、太字にします（斜体でもその効果が得られます）。

• 次のコード行をスタイルシートに追加し、変更を保存します。

{codecitation} .paragraph--type--centered-image-with-caption .field--name-field-caption {font-weight：bold; text-align：center; } {codecitation}

• 次に、サイトでの変更を確認するには、[構成]> [パフォーマンス]に移動して、すべてのキャッシュをクリアします。
• 戻って最近作成した記事を更新すると、新しいスタイルルールが有効になっていることがわかります。 キャプションテキストは太字になり、画像の下の中央に配置されます。

もちろん、この段落タイプ全体にいくつかのスタイルを適用することもできます。 これを行う理由の1つは、画像/キャプション要素を周囲のテキストから分離し、単一のユニットとして表示する必要があることを視覚的に明確にすることです。

• 次のコードをスタイルシートに追加し、変更を保存します。

{codecitation} .paragraph--type--centered-image-with-caption {border：2px grey solid; マージン：4px 0; パディング：4px; }

次に、サイトのキャッシュをもう一度クリアして、記事ページを更新します。 画像とキャプションはほとんど同じに見えるはずです。 ただし、現在、画像/キャプションユニット全体が灰色の境界線で囲まれており、上下に小さな余白があります。 ここで美学を改善するためにさらに多くのことを行うことができます（境界線は必要ない可能性があります）が、これは、段落タイプの個々のコンポーネントおよび段落タイプ全体にスタイリングを提供する能力を示しています。

これで、技術者以外のユーザーがサイトにコンテンツを追加していて、キャプション付きの大きな中央の画像を含めたい場合は、記事の編集中にこの段落フィールドを選択し、画像をアップロードして、にテキストを入力するだけです。キャプションフィールド。 フォーマットは自動的に適用されます。

パート＃8。 段落でのノード全体の使用

この時点で、段落の基本的な使用法の例をいくつか見てきました。 次に、もう少し高度な例に取り組みます。段落を使用して、ノード全体をコンテンツの本文内に配置します。 この使用例の1つは、関連するが独立した補足情報を記事の1つに配置することです（雑誌の記事に付随して表示される「ご存知ですか？」セクションのようなものに似ています）。

この例では、「情報ボックス」と呼ばれるものを記事に追加するオプションが必要であると想像します。これには、「ハープの短い歴史」というタイトルの短いコンテンツを配置します。 」楽器を演奏することを学ぶことについての私たちの以前に作成された記事の中で。

まず、これらの「情報ボックス」のコンテンツタイプを作成する必要があります。

• [構造]> [コンテンツタイプ]に移動し、[コンテンツタイプの追加]をクリックします。
• このコンテンツタイプに「情報ボックス」という名前を付けます。
• 説明については、「記事を補足するために使用される短い情報」と書いてください。
• [情報ボックスのコンテンツに作成者と日付の情報を表示したくないため] [表示設定]タブをクリックし、[作成者と日付の情報を表示する]のチェックを外します。
• このページの残りのデフォルト設定はすべて問題ないはずです。 Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• 「保存」をクリックします。

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• 設定を保存します。

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. 次に保存します。

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. これは重要なステップです。 Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• サイトの[ユーザー]ページに移動し、[権限]タブをクリックします。
• 「段落タイプのアクセス許可」セクションが表示されるまで下にスクロールします。 このヘッダーの下にある[本文：コンテンツの表示]を見つけて、[匿名ユーザー]と[認証済みユーザー]のチェックボックスをオンにします。
• 作成した残りのすべての段落タイプ（中央揃えの画像、キャプション付きの中央揃えの画像、情報ボックス、長所と短所）の[コンテンツの表示]権限についても同じようにします。
• 「権限の保存」をクリックします。

この時点で、すべてのユーザーがすべての段落コンテンツを表示できます。 気軽にログアウトして、匿名の訪問者としてサイトを表示して確認してください。

次に、当サイトのコンテンツを追加および編集するユーザーのために、新しい役割を作成します。

• [ユーザー]に移動し、[役割]タブをクリックして、[役割の追加]をクリックします。
• この役割を「コンテンツ作成者」と呼びます。
• [役割]ページに戻り、コンテンツ作成者の役割の横にあるドロップダウン矢印をクリックして、[権限の編集]を選択します。
• このロールのユーザーに与える必要のある権限はかなりあります。 これらのいくつかは段落とは無関係ですが、実際のシナリオを模倣するためにとにかくそれらを含めています。 さらに、実際に持つすべての権限がない場合、新しい役割を確実にテストすることは困難です。 また、コンテンツクリエーターがすべて社内で作業していることを前提として、これらの権限を付与していることにも注意してください。 つまり、技術的に認証されているものの、サイトでコンテンツを作成している疑似匿名ユーザーはそれほど多くないため、これらのユーザーにフルHTMLテキスト形式の使用などの許可を安全に付与できると考えています。ケースはいくつかのセキュリティ上の懸念を引き起こします。

コンテンツ作成者の役割に付与する必要がある権限のリストは次のとおりです。

コメント

• 自分のコメントを編集する
• コメントを投稿する
• コメントの承認をスキップする
• コメントを見る

コンタクト

• サイト全体のお問い合わせフォームを表示する
• ユーザーの個人的な連絡フォームを使用する

フィルター

• 基本的なHTMLテキスト形式を使用する
• フルHTMLテキスト形式を使用する
• 制限付きHTMLテキスト形式を使用する

ノード

• コンテンツ概要ページにアクセスします
• コンテンツを管理する
• 自分の未公開コンテンツを表示する
• すべてのリビジョンを元に戻す
• すべてのリビジョンを表示
• 自分の未公開コンテンツを表示する
• 記事：コンテンツを編集する
• 記事：自分のコンテンツを編集する
• 記事：リビジョンを元に戻す
• 記事：リビジョンを表示
• 情報ボックス：新しいコンテンツを作成する
• 情報ボックス：コンテンツを編集する
• 情報ボックス：自分のコンテンツを編集する
• 情報ボックス：リビジョンを元に戻す
• 情報ボックス：リビジョンを表示

段落タイプ権限

「段落タイプのコンテンツアクセス制御をバイパスする」を除いて、このセクションのすべての権限を付与します。

検索

• 高度な検索を使用する
• 検索を使用する

システム

• 管理ページとヘルプを使用する
• サイトをメンテナンスモードで使用する
• 管理テーマを表示する

分類法

• タグの用語を編集する

ツールバー

• 管理ツールバーを使用する

ユーザー

• ユーザー情報を表示する

完了したら、必ず[権限の保存]をクリックしてください。

ここで付与した権限と付与しなかった権限の一部に関する注意事項：新しい段落タイプを作成したり、既存の段落タイプの動作方法を変更したりしたくないため、段落タイプを管理する権限を付与しませんでした。 彼らは、開発者が彼らのために作成した段落タイプを使用して情報を入力するだけです。 さらに、管理者以外の役割にコンテンツを削除する機能を付与しないことが賢明な場合もありますが（ほとんどの場合、コンテンツを非公開にでき、コンテンツを削除すると回復不能になります）、許可を与える必要があります。 「段落タイプのアクセス許可」の下の段落タイプのコンテンツを削除します。 これが必要なのは、このタイプのコンテンツを削除できず、特定の記事で実際には必要のない段落タイプを介して誤ってクリックしてコンテンツを追加した場合、そのユニットを削除する方法がないためです。記事の内容。 これは、Backspaceキーの使用を禁止することに似ています。

新しい権限をテストするために、コンテンツ作成者の役割の新しいユーザーを作成し、そのユーザーとして新しい記事を追加するプロセスを実行します。

• [ユーザー]に移動し、[ユーザーの追加]をクリックします。
• 覚えやすいパスワードを使用して、Maryという名前のユーザーを作成します（メールアドレスはスキップできます）。
• ユーザーのステータスが「アクティブ」としてマークされていることを確認し、最も重要なこととして、このユーザーの「コンテンツ作成者」の役割を確認してください。
• 次に、[新しいアカウントの作成]をクリックします。
• ログアウトし、Maryとして再度ログインします。 権限が正しく割り当てられている場合は、管理ツールバーにアクセスできるはずです。
• 管理リンク（「コンテンツ」、「構造」など）が表示されない場合は、ツールバーの「管理」をクリックします。
• 次に、[コンテンツ]に移動し、Articleタイプの新しいコンテンツを追加します。 Y
• この記事に「ブロッコリーはあなたにぴったり」というタイトルを付けることができます。
• 本文テキストフィールドを追加し、テキストを入力します。
• 次に、作成した各段落タイプのコンテンツ（中央の画像、キャプション付きの中央の画像、情報ボックス、長所と短所）を追加してみてください。
• その後、記事を保存して表示します。 この完全なプロセスは、サイト管理者として行ったときと同じである必要があります。そうすれば、すべてのコンテンツを問題なく表示できるようになります。

これらの1つ以上を追加するオプションがない場合、または追加しようとしたときに他の問題が発生した場合は、コンテンツ作成者の役割にそれらを付与するときに、必要な1つ以上のアクセス許可を逃した可能性があります。 コンテンツ作成者の権限に戻り、上記のすべての権限、特に「段落タイプの権限」ヘッダーの下にある権限を付与したことを確認してください。

段落チュートリアルのまとめ

段落コンテンツをコンテンツ作成者として使用してコンテンツを作成および表示できることを確認したら、このチュートリアルを完了します。 この時点で、段落モジュールを使用する理由と方法を理解している必要があります。

要約すると、このモジュールの有用性は、コンテンツ作成者が自分でスタイリングを試みることなく、補足情報のボックスやキャプション付きの中央の画像など、特別な記事内コンテンツコンポーネントを定義できることにあります。

段落を使用すると、記事のこれらの部分のコンテンツを提供するように求められるだけであり、開発者は、そのコンテンツの表示方法に関するサイト全体のルールを（CSSを使用して）作成できます。 これにより、技術者以外のユーザーにとってコンテンツの作成プロセスが容易になり、技術者と技術者以外のユーザーの両方にとって、そのようなコンテンツの外観がより一貫したものになります。