Drupal8: W3.CSSのカスタマイズ:モジュール（Display Suite）を利用してcssルールの追加

Durupl8ではテーマは単独のディレクトリで管理

• Drupal8のテーマ（theme）がモジュールのインストール/アンインストール（機能拡張）の部分でインストールすることができます
  • 「テーマ」管理画面でも「新しいテーマのインストール」ボタンをクリックして、インストールすることがもできます
• 通常モジュールのフォルダー（drupal8/modules）と違って、単独のフォルダー（drupak8/theme）で管理しています
  

インストールしたテーマ(theme)にカスタマイズのため、サブテーマ（sub-theme）の作成ができます

• いろいろテーマをインストールすることができます
• インストールしたテーマの一部分をカスタマイズをしたいことがよくあります
  • 例：個別の詳細をcssで定義して、cssファイルをテーマに追加したい
• Drupalでは複数のサブテーマ（sub-theme）を作成することができます
• 複数のサブテーマを並列/直列して親テーマに継承することができます
  
• 子テーマが親テーマの要素を継承します
  • 子テーマで各要素の再定義、追加などができます

テーマ/サーブテーマのディレクトの集約ができます

• 初期のテーマディレクトリにインストールした複数のテーマが入っています
• サブディレクトもテーマディレクト（drupal8/theme）に作成して保管しています
• 複数のテーマをインストールして、複数のサブテーマを作成したら、フォルダー数が多くなり、どっちがサブテーマかはわかりづらくなります
• ここで、元のテーマを集約するディレクトリ(contrib)、とカスタマイズのサブテーマのディレクトリ(custom)を作成して、集約することができます
  • themes
        +-- contrib
                 +-- theme 1
                 +-- theme 2
                 +-- theme ・・・
        +-- custom
                 +-- sub_theme 1
                 +-- sub_theme 2
                 +-- sub_theme ・・・
     
• 作成された集約ディレクトリ（例：contrib, custom）、各テーマ/サブテーマのディレクトリを移動します
  • 移動後に各テーマ/サブテーマの構成ファイル（例：_info.yml）の定義の修正（ディレクトリ名に合わせ）必要はありません

問題点：Bootstrap導入後にモジュール（Better Exporsed Filters）のレイアウトが崩れました

• Drupal：7.53
• Views：7.x-3.14
• Better Exporsed Filters:7.x-3.4
• モジュールViewsのExposed Filterがよく利用されると思います。特により機能良いBetter Exposed Filtersの導入で、選択肢セレクトからチェックボックスでの利用ができ、検索用の「適応」ボタンを外すことができます
• ここで、Bootstrapを導入したら、Better Exposed Filtersの外観が崩れました

原因：Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました

• Bootstrap導入より、Better Exposed Filtersの検索フォーム（選択肢ブロック）の要素、プロパティが書き直されました
  • 選択肢ブロックに「form-control」クラスが追加されました
  • Bootstrapの「form-control」クラスがブロックの高さ（height）が定義しています
• 「form-control」クラスがブロックの高さ（height）を消せば、通常の検索フォームに戻ります
  

他にいろいろな要素の確認が必要

• Bootstrap導入より、Better Exposed Filtersのレイアウトへの影響は上記だけではなく、いろいろ部分に影響を与えています。
• style.cssで各要素の上書き対応が必要となります

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

• Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
• そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）
  

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

• Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
• 通常の方法でDisplay Suiteをインストール/有効化します
• コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  
• また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
• 具体的な操作法はビデオでご参考ください
• Display Suiteの応用に「シリーズ記事」をご参考ください

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

• コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  
• 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
  
  • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
  • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
• コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います
  

新規作成したフィールドを画面表示させ、確認

• コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
• コンテンツ表示された画面で選択したトークンを確認します
• 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

• ビデオに使用したトークン例：[user:name] と [current-user:name]があります
• 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

• DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
• トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
• 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

• 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう

やりたいこと：コンテンツの表示レイアウト/フィールドを自由変更したいです

• 既存のNode表示システムでは、レイアウト/フィールドなどの表示を変更したいです
• 例：Drupalのモジュール（Display Suite）のフィールドTテンプレート（Field Template）で各フィールド表示の調整 

解決：モジュール（Display Suite）の導入

• モジュール：Display Suite-7.x-2.14
• モジュールを通常の方法でインストール、有効化します（ビデオをご参考ください）

DSのフィールドテンプレート（field template）の有効化

• モジュールインストールだけでフィールドテンプレート（field template）は有効になっていません
• DS（Display Suite）の管理画面（ホーム » 管理 » サイト構築 » Display Suite » Extras ）でField Templateタブにある「Enable Field Template」をチェックします
  
• 他のオプションが初期設定のままでよいです

コンテンツの表示管理画面でカスタムレイアウトを選択しないとフィールドテンプレートが有効になりません

• コンテンツ表示管理画面（例：ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下に、「Layout for article in default」タブで適切なレイアウトを選択します
• 各フィールドの右側にフィールド表示オプションボタンをクリックすると、Field Template選択肢が現れます
• 必要に応じ、cssよろ各フィールドの表示設定ができます

やりたいこと：コンテンツの各フィールドごとをdivなどのタグでラップしたり、cssクラス、属性を追加したいです

• Drupalのnodeシステムでは、表示設定で自由に各フィールドをラップdiv、cssクラス、属性の追加はできない
• 各フィールドが表示都合よりラップしたり、cssクラスの追加が必要となります

解決：モジュール（Display Suite）のフィールドテンプレート(field template)を有効化にします

• モジュール（Display Suite）のインポート、有効化をします
• Display Suiteのフィールドテンプレート（field template）を有効化にします

モジュール（Display Suite）のフィールドテンプレート(field template)で各表示フィールドを修正例

• フィールドをdivタグでラップしてcssクラスを追加します
• cssクラス追加よりh2タグのcss適応、各要素の間隔を調整します
  
• 具体的に設定方法をビデオでご参考ください

高度な検索オプションと検索結果を変更するために、モジュール(Display Suite)のサブモジュール(Display Suite Suite)を有効にします

• モジュール（Display Suite）より、検索結果の表示変更、高度な検索オプション変更は可能
• Display Suiteは表示上に非常に柔軟性のあるモジュールで、幅広く利用されています

検索結果に関する設定後に必ずキャッシュをクリアします

• 一般的にモジュールより表示変更はサイトのキャッシュクリアする必要はありません
• なぜかDisplay Suiteで検索結果画面の設定を変更したら、必ずキャッシュをクリアしなければならないです。

例１：検索結果をsearch-results.tpl.phpからTeaser表示に切り替えたい

• 検索結果はテンプレート：search-results.tpl.phpで管理されているので、検索結果の変更には、このテンプレートの変更は一般的となります（ハードコーディング必要）
• Display Suiteの導入より、上記テンプレートの変更必要はなくなります
• ホーム » 管理 » 環境設定 » 検索とメタデータ » 検索の設定　管理画面で検索モジュールを「Display Suite Search」に切り替えます
• ホーム » 管理 » サイト構築 » Display Suite » 検索 管理画面で「ビュー・モード」をティーザーに変えます
  

例2：高度な検索オプションの一部分を隠したい

• 初期の「高度な検索オプション」に検索可能なコンテンツが含まれています
• 一般ユーザーが一部分のコンテンツタイプを知らないので、これらのオプション（例：パネル）を隠したいです。
• ホーム » 管理 » 環境設定 » 検索とメタデータ » 検索の設定　管理画面で「ADDITIONAL NODE SEARCH CONFIGURATION」をクリックして、「コンテンツタイプを限定 SETTINGS」リンクをクリックします
• 「Hide the following content types from the コンテンツタイプを限定 filter」の「パネル」をチェックして隠します
  
• 検索画面上にある「高度な検索オプション」に「パネル」選択肢が非表示になっていることを確認します
  

モジュール(Background Images Formatter)を利用して、記事にアップロードした画像を記事のバックグランドにすることができます。本サイトでは、何らかの原因でBackground Images Formatterの表示設定時にエラーが発生して（Ajaxの設定なのでエラーメッセージも表示されなかった）、このモジュールの利用はできませんでした。

モジュールを利用せず、簡単なCSSとJavaScriptで対応することになりました。

やりたい事

• Nodeタイプの記事にイメージフィールドを必須入力項目として定義します。
• 記事ごとにアップロードしたイメージをバックグランドにセットして表示します。
  
• どんなイメージがアップロードされるのは予測できないので、文書をはっきり読めるため、画像レイヤーと文書レイヤーの間に、半透明（25%の透明度）のレイヤーを入れます。

画像をバックグランドに

• コンテンツのImageフィールド表示設定で、このフィールドのラッパーcssクラス名(例：content-background-div)を設定します
• ページのcssファイル(style.css)で上記Imageフィールドを非表示(例：content-background-div{ display:none } )に設定します
• 文書を表示するエリアのdivのcssにjQuieryでbackgroundを設定します
  • Panelsで以下のJSコードをこのページに追加します(JSコード追加にはPanels CSS & JSモジュールが必要です)

      var img_url = $('#content-background-div img').attr('src');
      $('.page-content #block-system-main').css({     // 記事を表示するエリア
        'background-image': 'url("'+img_url+'")',
        'background-repeat': 'no-repeat',
        'background-size': '100% auto',
        '-moz-background-size': '100% auto',
        '-webkit-background-size':'100% auto' 
      });
    

  • Panelsを利用しなければ、Display Suiteモジュールのダイナミックフィールドを利用して、JSコードをパスすることができます

半透明なレイヤー追加

• 上記バックグランド画像設定したdivの子divにbackground-colorをcssファイル(style.css)で設定します

  #node.node-article{
      background-color:        rgba(255,255,255,0.75);
  }
  

文書レイヤー

• 文書フィールドはそのまま表示します
• フィールドの表示に必要に応じて、cssて調整します

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

• コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  
• 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
  
  • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
  • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
• コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います
  

新規作成したフィールドを画面表示させ、確認

• コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
• コンテンツ表示された画面で選択したトークンを確認します
• 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

• ビデオに使用したトークン例：[user:name] と [current-user:name]があります
• 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

• DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
• トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
• 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

• 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう