CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/07/27 11:00

目次

コンテンツを作る

記事の作成

 早速コンテンツを作ってみます。コンテンツ>コンテンツを追加>記事の順で遷移し、新規コンテンツ作成画面に以下を入力し、保存します。

タイトル 2月の営業日
本文 2月は、定休日(木曜日)以外は休まず営業します!
URLエイリアス(右カラムのドロップダウン) /news/information-february

 トップページに戻り、作成した記事の要約が表示されていれば成功です。後で利用するので、もう1つ記事を作ってみます。以下の情報を入力して保存します。

タイトル 3月の営業日
本文 3月は、3日(火)お休みします。
URLエイリアス(右カラムのドロップダウン) /news/information-march

 トップページに2つ目の記事も表示されます。

 このように、標準では記事コンテンツタイプの一覧がトップページに表示されます。しかし、ブログ以外でのウェブサイトではこのような仕様になることは少なく、時系列でないページがトップページとなることが多いと思います。このようなページは「基本ページ」コンテンツタイプで作成し、トップページに指定することができます。

基本ページの作成

 「記事」のような時系列なコンテンツではない、一般的なページに使われる「基本ページ」を作成します。コンテンツ>コンテンツを追加>基本ページの順で遷移し、新規コンテンツ作成画面に以下を入力します。

タイトル ホーム
本文

「まる茶」は東京都内に数店舗を構えるタピオカドリンク専門喫茶店です。

店主こだわりの茶葉で丁寧に仕上げたタピオカミルクティーをぜひご堪能ください。

 保存すると、作成した基本ページに遷移します。

基本ページをトップページに指定する

 作成した基本ページをサイトのトップページに指定します。まず、ページのURLの「/node/[数字]」となっている部分をクリップボードにコピーしておきます。次に、環境設定>サイトの基本設定へ遷移し、「デフォルトのフロントページ」フィールドにコピーしたURLのをペーストします。

 「構成を保存」ボタンをクリックし、トップページに戻ると、上記で作成した基本ページの内容が表示されます。

新しいコンテンツタイプを作る

コンテンツタイプとは

 「記事」「基本ページ」のような標準であるコンテンツタイプ(コンテンツの種類)のほかに、独自に必要なコンテンツタイプを作成することができます。

 独自にコンテンツタイプを作成することで、「まる茶」のサイトにドリンクメニューや店舗情報などを掲載する際、コンテンツタイプごとにフィールドを定義し、フィールドを必須にする、バリデーションをかけるなどの設定が可能です。フロント画面でのコンテンツ表示もコンテンツタイプごとに変更できます。また、複数人でウェブサイトを管理する場合、例えば店舗情報コンテンツタイプのみ各店舗の店長に編集権限を与える、などユーザー権限の部分でも効果を発揮します。

 今回は「まる茶」の店舗所在地を表示する「店舗」のコンテンツタイプを作っていきます。まずはコンテンツタイプを定義し、次にフィールドを付与します。

コンテンツタイプの作成

 コンテンツタイプを作るときには、サイト構築>コンテンツタイプ>コンテンツタイプの追加、をクリックします。コンテンツタイプの名前、システム内部名称を設定し、フィールドの管理ボタンをクリックします。

コンテンツタイプ名 店舗
システム内部名称 store
掲載オプション>フロントページへ掲載 OFF (チェックボックスを外す)

 次に、店舗コンテンツタイプで使用するフィールドを付与します。フィールド管理のページから「フィールドの追加」ボタンをクリックし、以下の項目を入力します。

新しいフィールドの追加 テキスト(プレーン)
ラベル 住所
システム内部名称 address

 「保存して次へ」をクリックします。その他の項目は標準のままで進み、フィールドの管理ページに戻ってくれば完了です。同じ要領でもう2つ、フィールドを追加しておきます。

新しいフィールドの追加 テキスト(プレーン)
ラベル 電話番号
システム内部名称 phone
新しいフィールドの追加 画像
ラベル 店舗画像
システム内部名称 store_image

 今後、一覧ページで表示するのに利用するので、店舗情報を3点入力しておきましょう。

店舗情報 渋谷本店
本文 まる茶の記念すべき第1号店です。
電話番号 03-xxxx-xxxx
住所 東京都渋谷区渋谷2丁目
       
店舗情報 新宿店
本文 まる茶の記念すべき第2号店です。
電話番号 03-xxxx-xxxx
住所 東京都新宿区新宿3丁目
       
店舗情報 北千住店
本文 まる茶の記念すべき第3号店です。
電話番号 03-xxxx-xxxx
住所 東京都足立区千住1丁目

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5