SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Drupal 9で始めるWebサイト開発入門

Drupalのインストールとノンコーディングでサイト構築

Drupal 9で始めるWebサイト開発入門 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

メニュー機能を使う

 次に、メニューを作成します。Drupalにおけるメニューとは、ナビゲーションとも呼ばれるサイトを回遊するためのリンクです。今回は上記で作成した店舗一覧ビューのページをヘッダーメニューに追加します。

メニューリンクを追加する

 メニュー項目の追加・編集をするには、サイト構築>メニューへ遷移します。インストール直後で5つのメニューがありますが、これらは管理者がページ作成などを行う際の管理メニュー、ログイン・ログアウトを行うためのユーザーアカウントメニューなどです。ヘッダーに表示されるメインのメニューはメインナビゲーションなので、メニューの編集>リンクの追加をクリックします。

 今回は先ほど作成した店舗一覧ページをメニューに追加するので、以下の情報を入力し保存します。

ビューの名前 店舗一覧
リンク /stores

 完了すると、ヘッダー部分に店舗一覧リンクが表示され、クリックすると店舗一覧ビューに遷移します。また、メニューリンクはコンテンツの編集・作成画面やビュー設定画面からも追加できます。

ブロック機能を使う

ブロック機能とは

 Drupalにおけるブロックとは、ページを構成する部品のことです。サイトに表示されている検索ボックス、ナビゲーションやロゴ、コンテンツの表示部分もブロックとして「リージョン」と呼ばれるスロットに埋め込む形でページ内に表示します。

ブロックを配置する

 それでは、新しくブロックを配置します。まずはサイト構築>ブロックレイアウトの順に遷移して、「ブロックリージョンを仮表示する」のリンクをクリックします。

 この画面で黄色く表示されている部分が「リージョン」と呼ばれ、ブロックを配置できるスロットです。今回はサイトの右カラム「Sidebar second」にブロックを設置します。

カスタムブロックの追加

 ブロックには大きく分けて2種類あり、1つはブロック管理画面で記事や画像を入力し作成する「カスタムブロック」と、もう1つはビューズやメニューなどの別の機能により自動で作られるブロックです。

 まずはカスタムブロックを設置します。ブロックレイアウト画面に戻り、「Sidebar second」リージョンの「ブロックを配置」ボタンをクリックします。モーダルが表示されるので、「カスタムブロックを追加」をクリックします。

 カスタムブロックコンテンツの入力画面が表示されるので、以下の情報を入力し、保存します。

ブロックの説明 夏のおすすめメニュー
本文 2020年夏のおすすめメニューは「ほうじ茶タピオカドリンク」です。(WYSIWYGエディタから画像を挿入することもできます)

 次にブロックの設定画面が表示されるので、以下の情報を入力し、保存します。

タイトル 夏のおすすめメニュー
システム内部名称 recommended_menu_summer
リージョン Sidebar second

 ブロックレイアウト画面に戻り、Sidebar secondリージョンに「夏のおすすめメニュー」が追加されていれば成功です。

 フロント画面に戻ると、本文の右にブロックが追加されています。

ビューブロックの追加

 カスタムブロックは、頻繁に更新しないブロックを表示する際には手軽で便利です。しかし、トップページにニュース一覧を配置するように、動的なコンテンツを表示したい場合には、ビューブロックを作成することができます。今回は最新ニュース一覧を表示するビューをブロックとして作成します。

 サイト構築>ビューズから「ビューを追加」ボタンをクリックします。ビューを追加画面で以下の情報を入力し保存します。

ビューの名前 最新ニュース
システム内部名称 latest_news
ビューの設定 表示:コンテンツ/タイプ指定:記事
ブロックの設定 ブロックを作成(チェックボックス)
ブロックの表示設定 ディスプレイフォーマット:HTMLリストのタイトル(リンク付き)

 次の設定画面では変更を加えずに保存し、ブロックレイアウト画面に戻ります。サイト構築>ブロックレイアウトの「Sidbar second」リージョンの「ブロックを配置」ボタンをクリックします。モーダル画面では検索ボックスに「最新ニュース」と入力し、先ほど作成したブロックを表示して「ブロックを配置」をクリックします。

 次のブロックの設定画面は変更を加えずに保存します。トップページに戻り、最新ニュース一覧が表示されていれば成功です。

まとめ

 第2回では、Acquia Dev Desktopを使用したDrupalのインストールとノンコーディングでのサイト構築を行いました。Drupalではさまざまなコンテンツの種類に対応できるコンテンツタイプや一覧画面を表示できるビューズ、コンテンツの分類と絞り込みができるタクソノミー、シンプルに管理できるメニュー、パーツごとにページを構成できるとなるブロックなどの機能により、迅速に保守しやすいウェブサイトを構築できます。多機能のため、最初に慣れるのには時間がかかりますが、慣れると他のCMSにはもう戻れないという開発者の方も多くいます。

 次回は引き続きノンコーディングでサイトを構築していきますが、より高度な機能である多言語やメディア管理、レイアウトビルダー、JSON:API、ワークフローについて紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Drupal 9で始めるWebサイト開発入門連載記事一覧

もっと読む

この記事の著者

岸 俊兵(キシ シュンペイ)

 カナダ・イエローナイフでウェブ開発者として勤務していた際、エンタープライズ向けオープンソースCMSのDrupalによる開発に従事。帰国後、Drupalのヘビーユーザーであるジョンソン・エンド・ジョンソン株式会社の社内SE等を経て、2019年1月よりアクイアジャパンのソリューションエンジニアとして勤...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12593 2020/07/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング