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のサイト構築機能の概要説明が長くなってしまいましたが、実際の構築手順は以下のような形で進めて行きます。以下の順序で記事を書いて行きながら必要な機能などを都度記事に載せる形がわかりやすいのではと考えています。
- ページを用意
- タクソノミーでカテゴリーの仕分け
- 複数ページをカテゴリーでまとめる
- サイトレイアウトの確認
- ヘッダーとナビゲーションメニューの構成
- フッターの構成
- サイドメニューの構成
- テーマの基本設定
- コンタクトフォームの設定
作業途中で、ブロックの設定やタクソノミーの階層化、メニューの追加、レイアウトの変更など出て来ますが、各作業を進めていく記事の中で説明していければと考えています。
テーマの基本設定は本来、一番最初に行うべきなのですが、必要なページと構成をある程度作成してから設定を見た方が理解しやすいので8番目としています。デフォルトでCivicThemeと表示されたままとなりますが、セキュリティーや見た目も優れているので問題なく、私自身が進めた順序なので、同様にサイト構成をある程度形にした以降に設定を行います。
当記事の目的が、WEBサイトを構築する上で、必要な概要をまとめています。各メニュー項目などは、今回だけでなく、今後、実際に該当する機能を使用する際、視覚的に理解しやすいと思いますので都度登場します。
長い記事となりますが、この記事で具体的に何かを覚えてしまうというより、概要と必要なものがこんな感じというくらいに書いた記事ですので、軽く目を通していただけていれば十分な内容となっています。ご覧になった方もおそらくそのような形で購読いただけていると思います。
次項より、具体的にページを作成する例を題材に記事をまとめて行きます。
Drupalの記事
関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。
記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。
Civic Themeの記事
Drupal記事
最新の記事
Drupalについて書いた最新の記事になります。
#D30 Civic Theme 1.9.0 UpDate
#D29 Drupal Core Update
Life Styleの記事
Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。