DrupalでWEBサイトを構築

DrupalでCivicThemeを使いWEBサイトを構築していく記事をまとめていきます。当WEBサイトを題材に記事を書いていくのですが、実際にはすでに構築されていて、現状様子を見ながら記事を追加したり、機能の追加など少しずつ手直しをしている状況ですので、記事との内容のギャップが出てしまうかもしれません。

WEBサイトを構築していく記事を書くとなると、WEBサイトを構築するDrupalの機能面の説明や、構成はどう行ったかの説明、構築順序や、公開する情報をまとめる概念的な説明など、内容が散見しやすく、どこまでを記事にまとめるかと考えた場合、見てくれた方が書かれた記事をどう理解し参考となるかを考える必要があります。

当WEBサイトの目的の一つが、私自身がDrupalを使いながら習得する事があり、基本的に用意されたAdmin Menu内で出来る範囲を基本として使い、WEBサイトを構築し運用していく事があります。必要あらば、コードを書きカスタマイズする事も考えていますが、これはまだ先の話になります。

記事を書くにあたって

記事の趣旨としては、プログラミングの知識を意識せずWEBサイトを作る選択種として、CMSの利用を考えていて、一つの選択種としてDrupalに興味があるような方がご覧になった場合の参考となるような記事にしていければと考えています。知識のあるエンジニアの方でも知識のない方でも参考になれば幸いです。

私自身が無理をして、使い方のチュートリアル的な記事内容にするのではなく、実際にWEBサイトを構築していく過程で選択した機能や、それを選択するために得た知識など、実際にDrupalでWEBサイトを構築する際に生ずる、疑問や問題点、解決策、解決すると大したことではないが、知らないと進まない問題などをまとめていければと考えています。

内容が漠然としていますが、まず当WEBサイトの構成を簡単にまとめてみます。この構成を整理しないと、以降、どの部分を、どう構成しているかの説明が、ご覧になった方に伝わり難いのではと考えています。

簡単な構成図を書くと以下のような形になっています。

※長いコードデータになってしまうのでアコーディオンメニューにまとめています。

当サイトの構成

非常にオーソドックスなWEBサイトの構成としています。


|- [1]Top
|
|- [2]Drupal
|
|---- [2.1]全ての記事
|
|-------- [2.1.1]実際の記事
|
|---- [2.2]環境構築
|
|-------- [2.2.1]実際の記事

と、階層で言えば3階層で構成されています。ページの構成は実際には2階層ですが別項で説明するメニュー構成を説明しないとわかり難くなるので3階層としています。


[2]Drupal = [2.1] 全ての記事
// 上記は同じページで、メニューの構成上階層が分かれています。
[2.1]全ての記事 = [2.2]環境構築
// は同じ階層

ページ構成は


[0]ページ構成
|
|- [1]ヘッダー
|- [2]Body
|- [3]サイドメニューLeft
|- [4]サイドメニューRight ※未使用
|- [5]フッター
|
// Bodyを上下左右のナビゲーションで囲むオーソドックスな構成

となっています。実際の構成レイアウトは


[1]ヘッダー
|
|- [1.1]ヘッダーTop
|
|---- [1.1.1]ヘッダーTop Left
|
|---- [1.1.2]ヘッダーTop Middle
|
|---- [1.1.3]ヘッダーTop Right
|
|- [1.2]ヘッダーMiddle
|
|---- [1.2.1]ヘッダーMiddle Left
|
// 以下省略
|

のように、各ナビゲーション内の構成も細かく設定を行えるようになっています。

WEBサイトのページを構成する要素

  • [0]ページ構成

において、実際のページ内容である

  • [2]Body

は 管理画面 ※ 通称Admin Menuとも言われています。のメニューで

  • [1] コンテンツの機能を使いページを作成して行きます。

Bodyを上下左右で取り囲むナビゲーションメニューであるヘッダーやフッター、サイドメニューは、どこに配置をして何をメニューに入れるかなどを設定していく必要があります。この設定は

  • [2] サイト構築の機能を使い設定して行きます。

上記の[1]コンテンツ、[2] サイト構築、の項目の各機能を使いページを作り、必要な項目を追加してWEBサイトを構築して行きます。

ここで、各機能を説明するために、Admin Menuの各項目のメニューを整理します。


[0]Admin Menu
|
|- [1]コンテンツ
|- [2]サイト構築
|- [3]テーマ
|- [4]機能拡張
|- [5]環境設定
|- [6]ユーザー
|- [7]レポート
|- [8]ヘルプ
|
// Drupal Admin Menuの各項目

各機能のメニュー項目は長くなるので、アコーディオンメニューでまとめて行きます。

各機能のメニュー項目

実際の構築手順

サイトの構成とDrupalのサイト構築機能の概要説明が長くなってしまいましたが、実際の構築手順は以下のような形で進めて行きます。以下の順序で記事を書いて行きながら必要な機能などを都度記事に載せる形がわかりやすいのではと考えています。

  1. ページを用意
  2. タクソノミーでカテゴリーの仕分け
  3. 複数ページをカテゴリーでまとめる
  4. サイトレイアウトの確認
  5. ヘッダーとナビゲーションメニューの構成
  6. フッターの構成
  7. サイドメニューの構成
  8. テーマの基本設定
  9. コンタクトフォームの設定

作業途中で、ブロックの設定やタクソノミーの階層化、メニューの追加、レイアウトの変更など出て来ますが、各作業を進めていく記事の中で説明していければと考えています。

テーマの基本設定は本来、一番最初に行うべきなのですが、必要なページと構成をある程度作成してから設定を見た方が理解しやすいので8番目としています。デフォルトでCivicThemeと表示されたままとなりますが、セキュリティーや見た目も優れているので問題なく、私自身が進めた順序なので、同様にサイト構成をある程度形にした以降に設定を行います。

当記事の目的が、WEBサイトを構築する上で、必要な概要をまとめています。各メニュー項目などは、今回だけでなく、今後、実際に該当する機能を使用する際、視覚的に理解しやすいと思いますので都度登場します。

長い記事となりますが、この記事で具体的に何かを覚えてしまうというより、概要と必要なものがこんな感じというくらいに書いた記事ですので、軽く目を通していただけていれば十分な内容となっています。ご覧になった方もおそらくそのような形で購読いただけていると思います。

次項より、具体的にページを作成する例を題材に記事をまとめて行きます。

実際のページ作成

当記事で、当WEBサイトの簡単な構成や、DrupalのAdmin Menu内の項目の説明、ページやナビゲーションをどの機能を使って作成していくかの事前知識をまとめてみました。私の悪い癖で、文章や項目が多くなり、伝えたい事がぼやけてしまう記事になり反省しています。次項から実際にコンテンツの機能を使いページを作成していく記事をまとめて行きます。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

Civic Themeの記事

このWeb SiteはDrupalのThemeであるCivic Themeで構成されています。Civic Themeはオーストラリア政府関連機関に採用されるGovCMSと言われる情報整理に優れたテーマです。
  • Drupal記事まとめ
  • Civic Theme

Drupal記事

Drupalについて記事を書いています。このWEBサイトを構築していく上でのトピックになります。プログラミングやソースコードなどエンジニア的な記事ではなく、プログラミング経験がない個人がDrupalでパーソナルなWEBサイトを構築するという観点での記事になります。
  • Drupal記事まとめ

最新の記事

Drupalについて書いた最新の記事になります。

#D32 Drupal 10.4.0

Drupal Coreが10.3xから10.4xにアップデートされましたので当サイトも早速アップデートします。
  • Civic Theme
  • Drupalの記事

#D31 Civic Theme Sub Theme

Node.jsのバージョン制限の問題でインストールしていなかったサブテーマをインストールして、サブテーマでの運営に切り替えます。
  • Drupalの記事
  • Civic Theme

#D30 Civic Theme 1.9.0 UpDate

Civic Themeのアップデートの通知が来ていましたので1.8.2から1.9.0にアップデートしました。3月程度のブランクながら1.8x > 1.9xなので様子をみようと考えたのですが、改善点も多いので早速アップデートを行いました。
  • Drupalの記事
  • Civic Theme

#D29 Drupal Core Update

前記事で、10.3.4 > 10.3.5のアップデート行う際にアップデートの内容を確認しました。Gitlabで変更内容のコードを確認する事で、変更内容をより詳しく理解することが可能です。今回10.33 > 10.3.4のアップデートの内容を確認します。
  • Drupalの記事
  • 環境構築

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

Life Style記事

ライフスタイルの記事になります。Drupalに触れる目的でこのWEBサイトを立ち上げています。元はWord Pressで作成した記事をこちらのWEBサイトに再構築しています。Word Pressも学習目的で利用したのですが記事をしっかり作る事を目的としていたので、テーマに興味があればそれなりに楽しめると思います。
  • Life Style記事まとめ
  • Drupalの記事
  • Civic Theme