【Drupal 8入門】ブロックレイアウトとコンタクトフォーム作成

カスタムブロックの作成

先ほど示したブロックのうち、以下のブロックは現時点でまだ作成されていません。最初に、これらのブロックを作成します。

作成する「カスタムブロック」の確認

それぞれのブロックをサンプルサイト上で確認してみます。

「製品検索」ブロックはViewsで作成した製品検索の説明文を表示するためのブロックです。「製品紹介」ページの「Left Sidebar」リージョンのみに表示されます。

「当社のご紹介」と「アクセス」ブロックは「製品紹介」ページ以外のページの「Right Sidebar」リージョンに表示されます。

「カスタムブロック」の作成

では次に、3つの「カスタムブロック」を作成します。

「製品検索」ブロックの作成

1.「管理メニュー」>「サイト構築」>「ブロックレイアウト」をクリックし、「カスタムブロックライブラリ」をクリックします。

2.「カスタムブロックライブラリ」ページの「カスタムブロックを追加」ボタンをクリックします。

3.「ブロックの説明」に「製品検索」、「本文」に「製品を製品名および製品カテゴリ別に検索できます。」と入力して「保存」ボタンをクリックします。

4.「カスタムブロックライブラリ」に「製品検索」ブロックが作成されました。

5.残りの2つのブロックも以下の入力項目の通りに入力します。

以下のように3つの「カスタムブロック」が作成されました。

「ブロック」をリージョンに追加する

次に「ブロック」をリージョンに追加して、サイト上に表示させます。先ほど追加した3つの「カスタムブロック」を追加します。

「当社のご紹介」と「アクセス」ブロックの追加

1.「管理メニュー」>「サイト構築」>「ブロックレイアウト」画面で「Right Sidebar」リージョンの「ブロックを配置」ボタンをクリックします。

2.「ブロックを配置」ウィンドウが開きます。「当社のご紹介」ブロックの「ブロックを配置」をクリックします。

3.「ブロックの設定」ウィンドウが開きます。この画面では「言語」「コンテンツタイプ」「ページ」「役割」毎にブロックの表示、非表示の設定が可能です。

「当社のご紹介」ブロックを「製品紹介(/product)」ページを除いたすべてのページに表示させるには、

「ページ」タブをクリックし、「一覧にあるページで非表示」をチェックします。そして、「ページ」の入力欄に「/product」と入力します。これで、「製品紹介(/product)」ページで非表示(他のページでは表示)されるように設定されました。

「リージョン」が「Right Sidebar」リージョンに設定されているのを確認して、「ブロックの保存」ボタンをクリックします。

※「ページ」タブのURL表記について

「ページ」タブにURLを指定する際の記述方法の一例を以下の表に示します。ワイルドカード「*」を利用することで、特定のパス以下をすべて指定できます。

「一覧にあるページで表示」と「一覧にあるページで表示」を選択して、対象のページで表示するのか、非表示にするのかを選択できます。

※「ディスプレイ・タイトル」チェックボックスについて

「ディスプレイ・タイトル」チェックボックスで、ブロックを表示した際にタイトルの有無を選択できます。

ブロックの用途に応じて適宜、タイトルの表示、非表示を設定してください。

4.「Right Sidebar」リージョンに「当社のご紹介」ブロックが保存されました。

5.トップページで「当社のご紹介」ブロックの表示を確認します。製品紹介以外のページでも表示されていることを確認します。

6.同様に「アクセス」ブロックを配置します。「当社のご紹介」ブロックの後に、「アクセス」ブロックを配置します。サイト上での表示順はブロックの並び順と同様になります。

7.「アクセス」ブロックが、「当社のご紹介」ブロックの下に表示されました。

他のブロックを「リージョン」に追加する

表の通りに、他のブロックを追加します。同一リージョン内のブロックの順番も表の通りに設定します。

ここに表示されている以外のブロックは「無効」に設定します。これで、サンプルサイトとほぼ同じレイアウトになっているはずです。