Drupalで企業向けサイトを作ってみよう

Drupal で企業向けサイトを作ってみよう Drupal を基礎から学ぶワークショップ TB Corpal デザインテンプレートでの設定サンプル開催日 2014 年 8 月 28 日 ( 木 ) 18:30-20:45

目次 I. 企業向けサイトを作ってみよう... 3 必要となる Drupal と拡張モジュールデザインテーマのインストール II. 標準の Drupal 7 でテンプレートの機能を学ぶ... 6 システム環境 Drupal 7 の環境 III. イメージスタイルの作成... 6 モジュールの設定画像スタイルの設定 IV. タクソノミーの作成... 9 ギャラリーのためのタクソノミーを作成 V. コンテンツタイプの作成... 11 Clients のコンテンツタイプ作成 Blog コンテンツタイプの修正 Staff コンテンツタイプの作成既存 Article コンテンツタイプの修正 Gallery コンテンツタイプの作成 VI. スライドショーのリージョン ( 領域 ) を作成... 20 Views でスライドショーの定義 VII. 問合せページ... 25 モジュールの設定 Google Map スクリプトのブロック作成 WebForm で Contact US のページを作成 VIII. Sidebar first region... 31 Our Service block Our Staff block Quicktabs Block の設定 IX. クレジット謝辞ライセンス... 47 クレジット謝辞 1

ライセンス 2

企業向けサイトを作ってみよう Drupal 7 で一般企業向けのサイトを作る場合のサンプルとして Drupal での設定や定義について学びますデザインのテンプレートとしては Themebrain 社の TB Corpal というデザインテンプレートをもとにしていますデモサイト : http://demo.themebrain.com/#corpal 構築ガイド : http://www.themebrain.com/guide/drupal-guide-for-tb-corpal-theme このデザインテンプレートは一般企業で使える汎用デザインとして開発されておりさまざまな機能や要素が組み込まれております本勉強会では時間の制限があり簡単に自分の Drupal 7 の標準環境で設定の練習ができように機能を省略しております少しでも Drupal でサイト構築する際に参考になればと思います必要となる Drupal と拡張モジュール Drupal 7 最新版 ( 必要となるコアモジュール Blog, PHP Filter, Statistic, Poll) 3

拡張モジュール : インストール後に実行します下記のモジュールはデザインテンプレートのすべての機能を使う場合です ctools Entity Entity reference Jcarousel Libraries Jquery plugin Pathauto Quicktabs Superfish Link image field Modal forms Newsletter Token Views Views accordion Views Slideshow Webform Page title Colorbox Devel デザインテーマのインストールサンプルの TB Corpal デザインテンプレートを使う場合は Themebrain 社の TB Corpal テーマは Themebrain 社のサイトから購入してインストールします 79USD ですデザインテーマだけと Drupal も入ったデモモジュールの 2 種類あります詳しくは http://www.themebrain.com/drupal-theme/tb-corpal 本資料は以下のサイトにもとづいて作成しました http://www.themebrain.com/guide/drupal-guide-for-tb-corpal-theme ワークショップの約 2 時間ではすべて説明できませんので上記のサイトで学んで下さい 4

標準の Drupal 7 でテンプレートの機能を学ぶ有料の TB Corpal デザインテンプレートではなく Drupal 7 の標準デザイン Bartik 7.31 でサイトを作る場合の説明ですすべての説明はできませんが Drupal 7 を学ぶ参考にして下さいシステム環境 Debian Linux PHP 5.4.4-14+deb7u12 MySQL 5.5.38-0+wheezy1 Drupal 7.31 ほか Drupal 7 の環境 Drupal 7.31 を通常インストールし英語から日本語環境に変更した状態ですイメージスタイルの作成モジュールの設定まず Blog モジュールを有効にします管理画面 -> モジュール -> Blog 6

画像スタイルの設定管理画面 -> 環境設定 -> メディア画像スタイル以下の画像スタイルに blog, gallery, gallery_colorbox, our_business, our_clients, our_staffs, popular, quicktabs, slideshow を追加しますシステム内部名称は小文字の英数字で同じ文字になりますもし日本語の画像スタイル名称などを使う場合は小文字の英数字に変更します縮尺とトリミング 7

同様に以下の設定を行います以下のようになります 8

タクソノミーの作成ギャラリーのためのタクソノミーを作成管理画面 -> サイト構築 -> タクソノミー -> ボキャブラリーの追加 Gallery というボキャブラリーの追加 9

Gallery のボキャブラリーに Gallery と Our Clients というタームを追加 Articles というボキャブラリーを追加 Articles のボキャブラリーに Our Business と Our Service を追加します 10

コンテンツタイプの作成 Clients のコンテンツタイプ作成管理画面 -> サイト構築 -> コンテンツタイプ -> コンテンツタイプの追加毎回 Clients というコンテンツを作成する際に常に使わない機能例えば掲載オプションではフロントページへの掲載のチェックを外し表示設定の作成者と日付情報を表示もチェックを外しますコメントの設定もクローズドを選択します保存しフィールドの追加をクリックし Client Image というイメージ ( 画像 ) のフールを追加しますイメージフィールドの追加フィールドの設定ではファイルの保存先は例えば field/client /img と設定 11

アップロードできるイメージの枚数は 1 のままです表示管理では以下のようになっているか確認します Blog コンテンツタイプの修正管理画面 -> サイト構築 -> コンテンツタイプ -> ブログエントリー -> フィールドの管理 Image を既存のフィールドを追加で画像 :field_image(image) を選択し追加します 12

イメージの保存先は field/blog/img で設定します表示管理では Image の行を上にし画像のスタイルで blog コンテンツへリンクを画像を選択しますブログのコメント設定をクローズドに設定しますその後 Blog コンテンツタイプを保存しますブログコンテンツの追加管理画面 -> コンテンツ -> コンテンツの追加 -> ブログエントリーコンテンツ追加で blog を選択しイメージを追加して 2-3 のブログ記事を追加します 13

Staff コンテンツタイプの作成 Staff というコンテンツタイプを追加しますタイトルフィールドのラベルは Staff を記入します保存しフィールドを追加をクリックし Staff Image( 画像 ) フィールドを追加します 14

保存先のファイルディレクトリを設定します field/staffs/img 次に Job title フィールドを追加しますそのフィールド設定はデフォルトで OK で保存しますコンテンツ追加で Staff のコンテンツを 2-3 追加しますコメントはクローズド掲載オプションは掲載だけにします既存 Article コンテンツタイプの修正モジュールの設定 Views Views Slideshow モジュール追加インストールし有効にします Views と Views Slideshow で必要な機能も有効にします 15

1 Ctools モジュール (Views で必要 ) https://www.drupal.org/project/ctools 2 Views モジュール https://www.drupal.org/project/views 3 Libraries モジュール (Views Slideshow で必要 ) https://www.drupal.org/project/libraries 4 J Query cycle plugin スクリプト (Views Slideshow で必要 ) http://malsup.com/jquery/cycle/download.html 5 Views Slideshow モジュール https://www.drupal.org/project/views_slideshow Libraries モジュールをインストールする際に sites/all/libraries ディレクトリを作成します J Query cycle plugin スクリプトをインストールするには sites/all/libraries/jquery.cycle ディレクトリを作成しそこにダウンロードした jquery.cycle.all.min.js もしくは jquery.cycle.all.js をコピーしますこのプラグインについては http://malsup.com/jquery/cycle を参照して下さい既存 Article のコンテンツの修正管理画面 -> サイト構築 -> コンテンツタイプ -> Article -> フィールドの管理 16

Article のコンテンツタイプに Slideshow Image フィールドを追加しますラベルは Slideshow Image 保存先のファイルディレクトリは field/article/slideshow Alt フィールドを有効画像スタイルは Thumbnail に設定表示管理で Slideshow Image のオリジナル画像の設定を変更する 17

その後 Article のコンテンツタイプを 2-3 追加し Slideshow Image を追加しますコメントはクローズドプロントページに掲載はチェックを外します Gallery コンテンツタイプの作成管理画面 -> サイト構築 -> コンテンツタイプ -> コンテンツタイプの追加イメージフィールドを追加もし field_image が使われている場合は以下のように変更しますファイルの保存先は field/gallery/img で設定 18

Category フィールドを追加しますターム参照選択リストでフィールドの設定ではボキャブラリーで Gallery を選択し保存します管理画面 -> コンテンツの追加で Gallery コンテンツをいくつか追加します 19

スライドショーのリージョン ( 領域 ) を作成 Views でスライドショーの定義管理画面 -> サイト構築 -> Views -> Add new view Add new view でページではなくブロックを作成します Display format は Slideshow, fields を選択します Item per page は任意の数字で Continue & edit をクリックします主に以下の FIELDS とフォーマットを設定します 20

FIELDS の追加をクリックしコンテンツ :Slideshow Image を選択し追加します以下のように設定 Create a label を外し以下のように設定します FIELDS でコンテンツ :Nid を追加します以下のような設定にします 21

フォーマットの環境設定をクリックボトム Widgets で Pager をチェックし Page fields にコンテンツ : Nid をクリック 22

コンテンツタイプ Article のスライドショーイメージだけにする場合は FILTER CRITERIA でコンテンツ Slideshow Image の title を選択しデフォルトで保存します FILTER CRITERIA で Article のコンテンツだけの表示になります Views を保存します 23

スライドショーブロックを定義管理画面 -> サイト構築 -> ブロック View:Slideshow ブロックを表示させたいブロックに指定しまし例えば Bartik デザインテンプレートの場合は主なという場所に設置します主なの設定をクリックして以下のページのみで <front> と記入しトップページにだけスライドショーを設定させます指定したブロックにスライドショーが表示されますただし Bartik デザインテンプレートの場合スライドショーの画面が大きすぎるのでサイズを変更します管理画面 -> 環境設定 -> 画像スタイル -> Slideshow 編集拡縮とトリミング 1200x600 の編集をクリックし半分の 600x300 に設定します更新スタイルをクリックし再度トップページを表示させると以下のようになります 24

問合せページ問合せフォームの作成は Drupal 7 コアに組み込まれているコンタクトモジュールではなく Webform モジュールを追加インストールして活用することを推奨しますモジュールの設定 Webform モジュール https://www.drupal.org/project/webform Blog モジュールを有効にします管理画面 -> モジュール -> webform 25

デザインテンプレートは違いますが勉強用に以下のようなフォームを作ります Google Map スクリプトのブロック作成管理画面 -> サイト構築 -> ブロック -> ブロックを追加問合せフォームの Google Map 用の新しいブロックを作成します 26

貼り付けるソースは <p class="google-map-help">if you need help, please use our web form or find our office address, phone number. There you'll find answers to many common questions</p> <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=d&source=s_d&saddr=&daddr=ohio&hl=en&geoco de=cczg-j3_sivnfqe4aaiddfao-ynbjk21euk2idew2z-cowtn5q&sll=40.417287,- 82.907123&sspn=4.541494,10.821533&g=ohio&mra=ls&ie=UTF8&t=m&ll=40.417287,- 82.907123&spn=4.541494,10.821533&output=embed"></iframe> <div class="contact-map-info"> <div class="contact-address"><h3 class="add-title">office's address</h3>468 Nam ultricies dolor eu velit varius scelerisque. Consequat onec quis massa</div> <div class="contact-info"> <p class="contact-tel"><span>phone. </span>(+ 012 ) 20 7345 667</p> <p class="contact-email"><span>email. </span>support@themebrain.com</p> </div> </div> ブロックを表示させる場所コンテンツで設定 27

Contact-us ページだけに表示させる設定で保存します WebForm で Contact US のページを作成管理画面 -> コンテンツ -> コンテンツの追加 -> Webform 28

タイトルを contact us としてメインメニューにも表示させます URL エイリアスには contact-us と記入し保存します Form コンポーネントに以下のように設定しますラベルを日本語にした場合は Field Key を英数字で記入します必須は任意です 29

タブのメールを選択してフォームの送信先メールアドレスを設定します複数のメールアドレスの場合はカンマ, で区切ります問合せの人に確認メールを自動送信するには Component value で email を選択します以下のようになりますその他 Wenform にはたくさんの機能がありますが省略しますトップページに戻りメインメニューに Contact-us のメニューがありますのでクリックします 30

Sidebar first region サイドバーにはいくつかの機能のメニューなどをブロックで表示させることが可能です Views モジュールと連携してデータが表示されます Views Accordion モジュールが必要になります 31

Our Service block サンプルイメージですモジュールの設定 Views Accordion モジュール https://www.drupal.org/project/views_accordion ダウンロードしインスト - ル有効にします Our Service の View を作成管理画面 -> サイト構築 -> Views -> Add new view Our service という View を作成しますブロックだけ作成します 32

Continue & edit をクリックします以下のように作成されます FIELDS でコンテンツ : Body というフィールドを追加します 33

コンテンツ :Body の設定で Rewrite Results を以下のように設定します Filter Criteria でコンテンツ : Has taxonomy term を追加しますタクソノミーのボキャブラリーは Article を選択します 34

Select terms from vocabulary Article から Our Service を選択しますフォーマットの環境設定をクリックし以下のように設定します Views を保存します 35

コンテンツタイプ Article の修正 Our Service のコンテンツはタクソノミーの Article ボキャブラリーの Our Service というタームで管理します Article コンテンツでその Our Service タームと連携できるように Article コンテンツタイプに Tags を修正します管理画面 -> サイト構築 -> コンテンツタイプ -> Article -> フィールドの管理 -> Tags -> ウィジェット -> 選択リスト選択リストで Our Service というタームを選択できるようにするコンテンツタイプ Article のデータを追加 Our Service の Article コンテンツを 2-3 追加します例えば International Trade というタームを Our Service ブロックの設定管理画面 -> サイト構築 -> ブロックブロックへ移動して表示させたいブロックに View: Our Services を設定します例えば Bartik のデザインであれな第 1 サイドバーを選びます 36

申し訳ございませんがこれ以降の機能は Drupal 7 コアのデザインテンプレート Bartik では細かい検証をしておりません以下の内容と Themebrain 社の TB-Corpal デザインテンプレートのインストールガイドでご確認下さいもしくは筆者までお問合せ下さいよろしく御願いします http://www.themebrain.com/guide/drupal-guide-for-tb-corpal-theme 37

Our Staff block Views で Our Staff という View を作成します 38

以下のような設定になります 39

1 Fields で Content: Staff Image というフィールドを追加します Fields で Content: Job Title というフィールドを追加します 40

フィールドで Rearrange を選択し以下のような順番にします Field Criteria で Content: Type を追加し Staff を選択 41

2 フォーマットで環境設定を以下のように設定しますブロックで Our Business の Views をサイドバーブッロックなどに定義します 42

Quicktabs Block の設定 43