おそらく最も分かりやすいDrupal7のテーマ制作チュートリアル

Drupalは日本では馴染みの薄いCMSですが、WordPress、Joomlaに次いで世界第３位に使われているCMSです。実際にWebディベロッパーとして就職活動していると募集要項にDrupalが書かれていることもあります。

そんなDrupalですが、Drupalが就活で必要になった、Drupalに一度は触れておきたい、という方のためにも、今回はDrupalのテーマ作成について解説していきたいと思います。この記事の対象は、

WordPressのテーマは制作したことがあるけどDrupalはない
HTML、CSS、JavaScriptまたはjQuery、PHPの基本を知っている、Webサイト制作を行ったことがある

という方が対象です。PHPの基礎などについては説明を省きますので、そちらは適宜別で賄ってください！それでは早速始めましょう。

準備編：Drupalの開発環境についてとインストール手順
本編：Durpal7におけるテーマ作成の方法

Drupalの開発環境についてとインストール手順

ではまずDrupalのインストールから説明します。しかしその前に開発環境が必要ですね。DrupalはPHPで書かれておりデータベースからデータを取得してブラウザ上に情報を表示するため、LAMP（Linux、Apache、MySQL、PHP）環境、またはMAMP環境（Mac、Apache、MySQL、PHP）が必要です。MAMPを使っても開発を進めることもできますし、またVirtualBoxで仮想Linux環境を構築してその中で構築するのもいいと思います。

今回の私の場合は契約しているホスティングサーバーを使用しています。ファイルのアップロードについては手順を省略しますが、適宜お使いの開発環境に当てはめてください。（ホスティングサーバであればFTP転送ツールを使う、MAMPであれば該当のフォルダにファイルを置くなど）

MAMPの開発環境の構築はスタジオUmiさんの記事が詳しいのでこちらを参考にしてください。（MAMPの場合はメモリーリミットをあげないとDrupalインストール中にエラーになるのでメモリーリミットを上げるようにしてください。）

それでは開発環境が構築できたら早速Drupalをインストールしてみましょう。Drupalの現在の最新バージョンは8なのですが、まだまだ7で動いているサイトが多く、実務では7を使うことの方が多いと思います。Drupal8でのテーマ制作については別の機会に譲るとして、今回はDrupal7でテーマ制作を行っていきます。

では公式ページからDrupal7をダウンロードしてきます。

Drupal公式のダウンロードページはこちらです。

tar.gzとzipバージョンの２つありますが、どちらでも好きな方をダウンロードしてください。ファイルを解凍後、フォルダ内のデータを全てWebサーバーにアップロードします。ここからは「ルートディレクトリ」はこのアップロードしたDrupalの解凍後直下のフォルダのことを指します。またファイルパスはこのルートデイレクトリからのパスで表記していきます。

そしてブラウザ上からアクセスしてインストール画面を表示します。

一番初めの画面ではインストール方法を選びます。MinimalはインストールするModuleを選べるようになるのですが、特に変更はなくStandardを選んだままSave and continueをクリックします。

次の画面では日本語表示に変更します。日本語表示にするには言語ファイルをダウンロードしてアップロードします。言語ファイルのダウンロードはこちらのページからjpを選んでください。Drupal7用のファイルを選んでダウンロードし、/profiles/standard/translations/の直下にファイルを置きます。

ファイルをアップロードして画面をリフレッシュすると日本語が選べるようになります。日本語を選んでSave and continueクリックします。

次の画面では使っているデータベースのタイプを選び、データベース情報を入力します。データベースのパスワードではデータベースユーザーのパスワードを入力してください。

次にWebサイト情報を入力します。ここでコンソール画面にアクセスするためのユーザー名とパスワードを設定します。入力後保存して次へをクリックします。ここで設定したユーザー名やパスワード、サイト名はインストール後でも変更可能です。

インストール経過を示すゲージが現れた後、無事インストールが完了すれば完了画面が表示されます。「あなたの新しいサイトにアクセスする。」をクリックします。

インストールされたばかりのDrupalはデフォルトのテーマが表示された状態になります。管理画面にログインした状態でなければ先ほどのユーザー名とパスワードを入力してログインしてください。

デフォルトでは各設定画面（コンテンツ、サイト構築など）を開くとメニューがオーバーレイで表示されます。個人的に使いにくいので私の場合はこのオーバーレイ表示を切ります。モジュールをクリックし、インストールの画面でOverlayを非表示にして保存します。

最初のうちはなかなかDrupalの各機能を把握するのが大変だと思いますが、習うより慣れろでどんどん操作してテーマを作成した方が機能への理解が進むと思うので早速テーマ作成に進んでみましょう。

本編：Durpal7におけるテーマ作成の方法

1. テーマ開発に必要なモジュールをインストールする

それではまずテーマ開発に必要な（あると便利な）モジュールをインストールしていきます。まずモジュールのインストール方法について簡単に説明します。

メニューのモジュールをクリックして、「新しいモジュールをインストール」をクリックします。ダウンロードしてきたモジュールをアップロードしてインストールすることもできますし、リンクをコピーして貼り付けてインストールすることも可能です。（リンクを貼り付ける方が簡単なのでオススメです。）

注1：DrushというDrupalに特化したコマンドラインからもモジュールをインストールすることも可能です。しかし今回は一切黒い画面（Macで言うTerminal）を使わずにテーマ作成を進めたいと思います。

インストールするのは下記のモジュールです。下記のリンクからそれぞれのモジュールページに飛んで、圧縮ファイルのリンク先をコピーし、インストールしてから有効化をしてください。

Devel：開発援助モジュール
simplehtmldom API：Theme Developerに必要なモジュール。バージョン7.x-1.12をインストールすることに注意！
Theme Developer：どのテンプレートを使っているか表示するモジュール。後で詳しく説明します。

2. .infoファイルの編集

今回はこちらで準備したシンプルなブログテーマを使います。

注2：ただブログをやるだけであればWordPressの方が便利なのですが、今回は「Drupal初心者がDrupalのテーマ制作について学ぶ」という目的のためにあえて簡素なブログテーマを制作することにしています。

注3：DrupalにはデフォルトでBlogモジュールが組み込まれており、このモジュールを使うことで簡単にDrupalでブログを制作できるのですが、今回はテーマ制作の学習のためにあえてBlogモジュールを使わずに開発を行っていきます。

注4：今後モジュールのインストールが出てきた時は有効化までを行ってください。今後のモジュールインストールでは手順の説明を省略します。

テーマのダウンロード

早速Drupalのテーマディレクトリの直下を見てみましょう。ルートディレクトリ/sites/all/themes/の直下をチェックしてみます。ここに自分の作成するテーマフォルダを置きます。ここからデフォルトでインストールされているStarkテーマをカスタマイズしていって自分のテーマに変えていきます。

/themes直下のstarkフォルダをコピーして、sites/all/themes/直下に貼り付けます。どちらも同じthemesという名前のフォルダですが、違うフォルダなので気をつけましょう。

貼り付けた後、フォルダの名前を作成するテーマの名前に変更します。今回はsimpleという名前のテーマを作成しますのでsimpleに変更します。また名前を変更したフォルダの中に入っているstark.infoファイルの名前もsimple.infoに変更します。このinfoファイルの名前は後にinfoファイルに書くテーマ名と統一する必要があります。

注5：フォルダ名はテーマ名と同じである必要はないですが、他の名前にであっても小文字のアルファベットとアンダースコアのみ使います。

この時点でsites/all/themesの直下は以下のようになっているかと思います。

Drupalのテーマで最小限必要なのはinfoファイルになります。それではまずinfoファイルから編集していきます。simple.infoファイルをテキストエディタで開いてください。Starkテーマの情報が入ったままになっているかと思います。この中でname、descriptionを変更し、packageの行と8行目以降を削除して保存します。

name = Simple
description = This is Simple theme.
version = VERSION
core = 7.x
stylesheets[all][] = layout.css

.infoファイルを書く上で気をつけるべき点は以下の点です。

.infoファイルのファイル名はアルファベットの小文字から始めること、またハイフンの代わりにアンダースコアを使うこと。スペース、句読点も含めないこと
.infoファイルで不可欠な情報はnameとcore。この２点が書いてあれば一先ずテーマとして認識される
coreはDrupalのバージョンを表記する。7.xはDrupal7であることを表している
versionはテーマのバージョンでアップデートした時にナンバーを追加していくために使うが、公式サイトでは「discourage」と非推奨になっている
packageはモジュール用のプロパティなのでテーマ用のinfoファイルでは必要ない
sytlesheets[all][] でスタイルシートの登録をする。allの部分はcssのメディアクエリ。例えばprint用のスタイルシートであればstylesheets[print][]で登録できる
.infoファイルを編集した後はキャッシュのクリアが必要。環境設定→パフォーマンス→から「すべてのキャッシュをクリアー」をクリックしてキャッシュをクリアする（今後キャッシュのクリアをする場合は全てこの手順の方法を指します。）

注6：あくまでテーマ用のinfoファイルの書き方で、モジュール用の.infoファイルはまた書く項目が変わります。

変更が終わったら、早速テーマフォルダをサーバーにアップロードしてみましょう。特に問題なければアップロード後、テーマメニューをクリックし、下の方の「無効テーマ」の欄に作成したテーマが表示されていると思います。

Simpleの「有効」をクリックすると、上の「有効のテーマ」の欄に表示されるので、「デフォルトに設定」をクリックしてテーマを適用します。テーマを適用した後キャッシュをクリアします。ブラウザをリフレッシュすると先ほどのデフォルトテーマから作成したSimpleテーマに変更されていると思います。

注7：今後キャッシュのクリアは絶対に必要な時以外は説明を省略します。テーマをアップデートしても反映されない場合はまずこのキャッシュのクリアを行って確認してみてください。

テーマが無事に表示されることを確認したらダウンロードしてきたHTMLとCSSファイルをテーマ化する作業をしていきます。

simple.infoファイルに適用されているCSSファイルがStarkのままだとlayout.cssですが、準備したCSSファイルであるstyle.cssに変更します。

stylesheets[all][] = layout.css

の部分を

stylesheets[all][] = sytle.css

に変更します。変更後、style.cssとsimple.infoファイルをアップロードし、キャッシュをクリアして変更が適用されているか確認します。問題がなければ次はHTMLの適用をしていきます。

HTMLを適用するにあたって、Drupalのリージョン（Region）とブロック（Block）の概念の簡単な理解が必要なので説明します！

3. リージョン（Region）、ブロック（Block）、ノード（node）と各テンプレートファイルについて

Drupalでリージョン、ページ、ブロックと各テンプレートファイルが分かれており、またレイヤー構造になっています。まずこのリージョン、ページ、ブロックとは何かを説明します。

ノード（node）：Drupalでは全てのコンテンツが「ノード」として管理されます。ノードにはページ、ブログエントリー、ユーザー、画像ファイルなどが含まれます。（ブログエントリーを１つのノードとして設定もできますし、画像ファイル単体で１つのノードとすることもできます。）
リージョン（region）：リージョンは日本語に訳すと「領域」になりますが、テンプレートファイルにリージョンを設定することで後述するブロックを置くことができるようになります。またブロック以外にもノードを表示するリージョン、フッター、ヘッダーのためのリージョンと設定することもできます。
ブロック（block）：ブロックはリージョンを指定することでブロック毎に独立してコンテンツを表示できる機能です。指定するリージョンを変えることで表示する場所を変えることができます。

また各機能はそれぞれ独自のテンプレートファイルを持っています。各テンプレートファイルはレイヤー構造になっています。どのような構造になっているかは公式サイトの説明画像が分かりやすいのでそのまま引用します。

引用:Overview of theme files. drupal.org

Drupalでは一つのページ内に複数のテンプレートファイルが使われています。それぞれのテンプレートファイルは使われる場所が決まっています。上の図を見れば分かると思うのですが、html.tpl.php > page.tpl.php > region.tpl.php > block.tpl.php, node.tpl.phpとなり、またnode.tpl.phpに含まれるコメント欄用のcomment.tpl.phpとなります。各テンプレートファイルをざっくりと紹介します。

html.tpl.php：html構造を表示するためのテンプレートファイル。ファイル内部ではDOCTYPE宣言からbodyの開始タグ、page.tpl.phpを読み込む関数、bodyの終了タグからhtmlの終了タグを含む
page.tpl.php：ページを表示するためのテンプレートファイル。主に大枠のhtml構造と各リージョンの記述をする
region.tpl.php：リージョンを表示するためのテンプレートファイル。リージョン毎にテンプレートファイルを分けることも可能。ただブロックを置くためだけにとどめれば必ずしも必要ないファイル。
block.tpl.php：ブロックを表示するためのテンプレートファイル。ブロック毎にテンプレートファイルを作ることも可能。

Drupalのテーマ作成においてはまず.infoファイルにリージョンを定義していきます。ヘッダーやフッター、ノードやブロックを表示したい場所をリージョンで指定します。１つのリージョンに複数のブロックを置くこともできます。ですのでどこにどのようなコンテンツを表示するかを意識しながらリージョンを決めていきます。

今回のsimpleブログのデザインでは以下のようにメニューとサイドバーにおいてリージョンを設定していきます。

Regionを指定するには先にinfoファイルに定義を書く必要があります。simple.infoファイルを開いて下記を追加します。

;Regions
regions[menu] = Menu
regions[content] = Content
regions[sidebar_first] = First Sidebar
regions[footer] = Footer
regions[page_top] = Page top
regions[page_bottom] = Page bottom

注8：Page topとPage bottomはテーマ用ではなくモジュール用のリージョンです。

編集が終わったらファイルをアップロードしてキャッシュをクリアします。

4. html.tpl.phpの編集

infoファイルにリージョンを指定した後、いよいよテンプレートファイルの編集に移ります。まず最初にhtml.tpl.phpを編集します。html.tpl.phpでは先ほど言ったようにbodyタグの開始までと終了後を記載します。先にコードを示して説明します。

<!DOCTYPE html>
<head>
<?php print $head; ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?></body>
</html>

幾つか変数が使われていますが、変数名を見れば大体分かると思うのですが、$headはheadセクションのマークアップ、$sytleはinfoファイルに指定したスタイルシートの読み込み、$scripsは同じくinfoファイルに設定したスクリプトの読み込み、$pageはpage.tpl.phpに記載されているコンテンツの読み込みになります。

5. page.tpl.phpの編集

では次にpage.tpl.phpを編集していきます。まずブログタイトルとメニュー表示がされるように設定します。page.tpl.phpを今後編集していくにあたってデフォルトのpage.tpl.phpのコードを見てみましょう。modules/system/page.tpl.phpをコピーして適当なフォルダに保存して開いてみてください。

まずはタイトルの表示をDrupal側に登録されたタイトルが表示されるようにしていきます。デフォルトのpage.tpl.phpのタイトル部分には以下のコードが書かれています。

<?php if ($logo): ?>
  <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
    <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
  </a>
<?php endif; ?>

デフォルトのpage.tpl.phpではロゴ画像があった場合にロゴを表示するようになっていますが、今回のテーマではロゴ画像は使いません。ですのでロゴに関する部分は省きます。変数$logoが使われている部分以外をsimpleテーマ側のpage.tpl.phpに置き換えていきます。

simpleテーマのpage.tpl.phpのタイトル部分を以下のように書き換えます。

<div class="back-to-home">
  <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
  <?php 
    if($site_name) {
      print $site_name;
    } 
  ?>
  </a>
</div>

各変数の説明はデフォルトのpage.tpl.phpの冒頭にコメントアウトで書かれています（英語ですが）。$front_pageはホームページへのURLを出力し、title属性にはタイトルが表示される変数、$site_nameは登録されているサイト名（環境設定→サイト情報→サイト名に登録されている名前）が表示されます。page.tpl.phpで使われている変数はだいたいここで説明されているため参考にします。ここまで書いたらちゃんと表示されるかファイルをアップロードして確認してみてください。

次にメニューの表示に移ります。メニューの表示はデフォルトのpage.tpl.phpの110行目から115行目に書かれています。

<?php if ($main_menu || $secondary_menu): ?>
  <div id="navigation"><div class="section">
    <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>
    <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
  </div></div> <!-- /.section, /#navigation -->
<?php endif; ?>

デフォルトのテーマでは直接関数を使用してメニューを表示しています。これでもいいのですが、できればメニューの管理画面からブロックを置くことで表示するようにしてみたいと思います。（そうすることでコードに触らなくてもユーザーが編集できる、本来のCMSの目的により沿った構築になります。）

ここでDrupal管理画面で「サイト構築」を表示すると「メニュー」の項目があります。通常のメニューであればこの「メニュー」を使って構築すればいいのですが、今回のメニューに使われているデザイン、開発、マーケティングは各記事のカテゴリー=タクソノミーとしても機能する予定です。

ですのでタクソノミーとして登録した単語をメニューでも使えるようにする必要があります。デフォルトのままではそのような機能はないので、それが実現できるモジュールを探しインストールします。探したところ以下のモジュールで目的を達成できそうなのでインストールします。

Taxonomy menu

上記のモジュールをインストールしたら、ひとまずpage.tpl.phpの編集に戻ります。メニューをブロックとして置く場合はリージョンの設定が必要です。リージョンを指定する<?php print render($page[‘menu’]); ?>をpage.tpl.phpに追加します。

<?php print render($page['menu']); ?>

追加後ファイルをアップロードします。ファイルをアップロード後、タクソノミーを設定してメニューに追加し、メニューのブロックを設定したmenuリージョンに追加します。

まず初めにメインメニューにデフォルトで登録されているメニューを削除します。サイト構築からメニュー、メインメニューのリンク一覧をクリックし、削除をクリックしてデフォルトのメニュー名を削除していきます。

削除後カテゴリーを登録していきます。サイト構築からタクソノミー、タームを追加をクリックし、名前にカテゴリー名を入力、URLエイリアスにURL部分のワードを入力し保存をクリックします。タームの追加後、再度リスト一覧のページでも保存をクリックしないと設定が保存されません。

デザイン、開発、マーケティングのタグを追加した後、タグの設定画面で編集をクリックし、Taxonomy menuのMenu locationでメインメニューを選び保存します。

保存後もう一度メニューに移動しメインメニューをクリックしてリスト一覧を表示してみると、先ほど追加したタグが登録されていると思います！

メニューはデフォルトで該当するメニューのブロックが作成されます。サイト構築からブロックをクリックしブロック一覧を表示します。

下に表示されているメインメニューのリージョン欄でメニューを選びます。自動的にメインメニューのブロックがメニューリージョンの欄に追加されます。

またデフォルトで設定されている「システムヘルプ」をメニューから外します。追加後ブロックの保存をクリックします。ブロックを保存したら実際にサイトにアクセスして表示を確認します。何も問題なければメニューが表示されていると思います。

ただデフォルトの状態ではメニューの名前である「メインメニュー」も表示されてしまっていると思います。こちらを非表示にするために、メインメニューブロックの「設定」をクリックし、ブロックのタイトルに<none>を入力して保存します。

6. メニュー用のカスタムblock.tpl.phpの設定

ここまで設定できたところで、htmlファイルを見てメニュー周りのコードを見てみましょう。モバイル用のハンバーガーメニューを含めたコードがmenu-wrapperのdivタグに囲まれていると思います。

<div class="menu-wrapper">

  <div class="navbar-block">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle">
        <span>Menu</span>
      </button>
    </div>
    <div class="menu-block close" id="menu-block">
      <ul class="menu">
        <li class="menu-item"><a href="/development">デザイン</a></li>
        <li class="menu-item"><a href="/development">開発</a></li>
        <li class="menu-item"><a href="/development">マーケティング</a></li>
      </ul>
    </div>
  </div>

</div><!-- menu-wrapper -->

メニューをテンプレート通りに動かすにはこのmenu-wrapper以下のコードを設置したメニューブロックに含める必要があります。管理画面からコードを追加することはできないので、メニューブロック用にカスタムのblock.tpl.phpを作成して編集することになります。

まずテンプレートのどの部分がどう表示されているか確認するためにmodule/block/block.tpl.phpをコピーして、テーマフォルダ内に保存して開きます。同時にWebサイト上のメニュー部分をディベロッパーツールで開いてファイルとコードを比較してみましょう。

block.tpl.phpの方ではまた様々な変数が使われています。ファイルを見てみると、contentクラスを持つdivタグのすぐ下にある$content変数から管理画面に登録したブロックのコンテンツが表示されるようです。ディベロッパーツールで表示されているコードを見てみても、contentクラスを持つdivタグ直下からulタグが始まりメニューが表示されていると思います。

また先ほどタイトル部分が表示されないようにしたため、$block->subjectや$title_attributesといったタイトルに関連する部分は表示されていません。一番上位のdivタグに注目してみると、idは$block_html_id、classは$classesという変数で出力しているようです。

メニューを正常に機能させるには先ほど削除したmenu-wrapperのコードをこのブロックに含める必要があります。そこでこのメニューブロック専用のブロックテンプレートを作成します。先ほど保存したblock.tpl.phpのファイル名をカスタム用に変更します。

カスタムのブロックを作成する場合のブロックのファイル名には一定の規則がありますのでここで紹介します。

block – – block – – [block-id].tpl.php
block – – [module] – – [delta].tpl.php
block – – [module].tpl.php
block – – [region].tpl.php
block.tpl.php

上位に行くほど下位のテンプレートが上書きされます。今回はメニューリージョンにメニューブロックしか置かれないため、リージョンネームが入ったblock – – menu.tpl.phpを作成することにします。

注9：テンプレートの命名規則の詳細については公式サイトのTheme hook suggestionsについての記事を確認してください。

modules/block/block.tpl.phpファイルをコピーしテーマフォルダ内に貼り付け、ファイルの名前をblock – – menu.tpl.phpに変更します。変更後ファイルを開くとデフォルトのコードと、各変数の説明がコメントアウトで上部に記されています。

$contentの部分でブロックの内容が出力されますので、$contentを囲むように先ほど削除したmenu-wrapperのコードを貼り付けます。

<div<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>
  <?php if ($block->subject): ?>
    <h2<?php print $title_attributes; ?>><?php print $block->subject; ?></h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <div<?php print $content_attributes; ?>>
  
    <div class="menu-wrapper">
      <div class="navbar-block">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span>Menu</span>
          </button>
        </div>
        <div class="menu-block" id="menu-block">
         <?php print $content; ?>
        </div>
      </div>
    </div><!-- menu-wrapper -->

  </div>
</div>

作成後、早速ファイルをアップロードして表示を確認してみましょう。追加したコードが反映されていると思います。

ただまだhtmlファイルのように表示されていません。listタグのクラス名が入っておらず、その部分のCSSが適用されていないためです。listタグの部分はDrupalのメニュー機能で自動的に生成されており、デフォルトのままではlistタグにクラス名を追加する機能がありません。

ここでまた新たにモジュールをインストールします。Menu attributesというその名の通りメニューに属性を追加できるモジュールをインストールして有効化します。有効化後、サイト構築からメニュー、メインメニューのリスト一覧から各メニューリンクの編集画面に行くと、MENU LINK ATTRIBUTESとMENU LINK ITEMSの項目が表示されるようになっています。

MENU LINK ATTRIBUTESはアンカータグの設定であり、今回はlistタグにクラス名を追加するのでMENU LINK ITEMSのClassesの欄にクラス名を追加します。

追加したら保存をクリックします。全てのカテゴリーにおいてクラスを追加し保存すれば、メニューが正常に表示されるようになります。

7. node.tpl.phpの編集

次に各ブログポストの一覧ページを編集します。現状はhtmlファイルには載っていない編集者情報やタグが表示されていると思います。こちらをコンテンツタイプの機能を使ってまず非表示にします。

コンテンツタイプというのは、その名の通りコンテンツのタイプを設定できる機能です。ブログのような記事、または普通のページ、といったものだけでなく、Webサイト上に掲載する情報を元にフィールドも設定できます。（WordPressでいうカスタムフィールドに似ています）Drupalでは１つのコンテンツタイプとして定義します。新しいコンテンツタイプを追加することで自分オリジナルのコンテンツタイプを作成することが可能です。

サイト構築からコンテンツタイプをクリックします。デフォルトの状態ではArticles（記事）と基本ページが表示されています。既にDrupal側に記載されていますが、記事はブログ記事などの時系列が重要なコンテンツ、基本ページはあまり更新されないページに使用します。今回はブログの構築なので記事を使用します。

ここで簡単にコンテンツタイプの画面の説明をします。

「フィールドの管理」はサイト管理者側の編集画面にフィールドを表示するかしないかを設定できます。隣の「表示の管理」というのはWebサイト側に表示するかしないかを設定できる管理画面です。またコメントフィールドは管理画面側のコメント用のフィールドの設定、コメント表示はWebサイト側のコメントの表示設定を変更できます。ここで表示の管理をクリックしてください。

Drupalでは各フィールドにおいてそのフィールド名を表示することができ、それがラベルと呼ばれています。例えば表示管理の画面でBodyのラベルを「上部」を選んで保存すると、Bodyのコンテンツの上に「Body」と表示されます。今回のテーマでは、ラベルを表示する必要はないので全て非表示にしておきます。

また３つほどコンテンツを追加しておきます。コンテンツからコンテンツを追加をクリックし、「記事」を選びます。TitleとBodyに何らかコンテンツを書き込み保存します。同じ手順でブログコンテンツを３つほど作成しておきましょう。

8. Theme Developerの使い方

この後テンプレートファイルを編集するのですが、まずTheme Developerの機能を使ってどのテンプレートが使われているか見てみましょう。左下に表示されているThemer infoのチェックボックスをクリックします。そうすると右上に黒い画面が表示されます。

サイト内でマウスカーソルを動かすと赤い線が表示されます。線が表示されている領域の上でクリックすると、その領域で使われているテンプレートが表示されます。

メニューの周辺で再度クリックするとメニューブロックで使われているテンプレートのファイル名が表示されます。ポスト部分をTheme Developerでクリックするとnode.tpl.phpのファイルが表示されるはずです。各ポスト部分についてはpage.tpl.phpではなくnode.tpl.phpが使われているんですね！では早速テーマに沿った形になるように編集したいと思います。

先ほどと同じようにmodules/node/node.tpl.phpをコピーしてテーマフォルダに貼り付けます。node.tpl.phpにもファイル上部に各変数がどう使われているか説明されているため注意深く確認していきます。テーマのhtmlファイルではもっと読む、コメントを追加、作成者は表示されていません。また日付表示も変更する必要があります。

調べていくと $content[‘links’];がまず必要なく、また$user_picture、$submittedといった変数が必要ありません。また日付表示についてはPHPのdateの引数が使えそうです。（node.tpl.phpファイル内で説明がない場合は検索して確認します。）

下記のようなコードになりました。

<article id="node-<?php print $node->nid; ?>" class="post <?php print $classes; ?> "<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>
  <?php if (!$page): ?>
    <?php if(isset($node->created)):?>
      <span class="post-date"><?php print date('M j, Y',$node->created); ?></span>
    <?php endif; ?>
    <?php print render($title_prefix); ?>
      <?php if($title): ?>
        <h2 class="post-title" <?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
      <?php endif; ?> 
    <?php print render($title_suffix); ?>
  <?php endif; ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the comments and links now so that we can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
    ?>
  </div>

  <?php print render($content['comments']); ?>

</article>

9. 投稿記事ページにもタイトルを表示する

それでは次に投稿記事ページに移りたいと思います。投稿記事ページのテンプレートがまずどのようなテンプレートを使っているか、Theme Developerで確認してみます。そうするとフロントページと同じpage.tpl.phpを使っていることが分かりますが、タイトルや日付の表示がありません。

作成したnode.tpl.phpを見てみると、4行目から13行目の間で既にタイトルを表示するためのコードがあります。これを投稿記事ページにも表示できるようにしたいと思います。タイトル部分のコードを見てみると、<?php if (!$page) : ?>~（コード略）~<?php endif; ?>という部分があります。この$pageという変数が何をしているか上部のコメントアウトされている説明を見てみると、

$page: Flag for the full page state.

と説明されています。これがどういうことかというと、Drupalでは要約表示と全文表示のモードの２つあり、要約表示の場合は$teaserという変数で、全文表示は$pageという変数で場合分けができるようになっています。

注10：teaserは日本語ではティーザーになっています。コンテンツタイプの表示管理画面からティーザーの設定を変更できます。

先ほどのフロントページで表示されていたのは要約でしたが、投稿記事のページでは全文表示になるわけですが、<?php if (!$page) : ?>ということは全文表示のページではタイトルを表示しない設定になっています。このif分を削除することで全文表示にできそうです。またタイトル表示の周りに投稿記事ページへのアンカーリンクがありますが、これは逆に!$pageを用いてフロントページの要約表示の時のみリンクが付くようにしたいところです。

よってnode.tpl.phpの最終コードは下記になりました。

<article id="node-<?php print $node->nid; ?>" class="post <?php print $classes; ?> "<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>
    <?php if(isset($node->created)):?>
      <span class="post-date"><?php print date('M j, Y',$node->created); ?></span>
    <?php endif; ?>
    <?php print render($title_prefix); ?>
      <?php if($title): ?>
        <h2 class="post-title" <?php print $title_attributes; ?>>
          <?php if (!$page): ?><a href="<?php print $node_url; ?>"><?php endif; ?>
            <?php print $title; ?>
          <?php if (!$page): ?></a><?php endif; ?>
        </h2>
    <?php print render($title_suffix); ?>
  <?php endif; ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the comments and links now so that we can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
    ?>
  </div>

  <?php print render($content['comments']); ?>

</article>

これで投稿ページも正常に表示されるようになりました！

10. Viewsを使ったサイドバープロフィールの設定

さて、いよいよDrupalテーマ作成も一番の肝に入ってきました。サイドバーのプロフィール写真と名前ですが、登録されているユーザー情報を表示します。

まず初めに現在のアカウント設定ですとユーザー名以外の名前が入っていません。ブログ上に表示するのはセキュリティの観点からも違う名前を使いたいところです。そこで新たに別の名前がユーザーに追加できるよう、フィールドを追加して保存します。

環境設定からアカウントの設定、フィールドの管理をクリックし、新しくフィールドを追加します。フィールドを追加の欄にフィールド名を入力します。今回は表示名としました。システム内部名称の編集をクリックし、display_nameと入れます。システム内部名称は英数文字とアンダースコアのみが使えます。フィールドタイプを選択ではテキストを選びます。テキストを選ぶとウィジェットは自動的にテキストフィールドが選ばれます。その後保存をクリックし、フィールドの最大文字数はデフォルトのままにて保存します。

フィールドを追加後、メニューからユーザーをクリックし、表示したいユーザーの欄で「編集」をクリックし、写真のアップロードにプロフィール画像をアップロードし、先ほど作成した表示名フィールドにに表示したい名前を入力して保存します。

さて、これで準備が整いました。次にユーザー情報をサイドバーに表示するためにcToolsとViewsというモジュールが必要ですのでインストールします。また一緒にインストールされるViews UIを有効化します。

このViews、Drupal8ではコアに組み込まれるぐらいよく使われるモジュールです。Viewsは必要なフィールドを選択することで、SQLクエリを作成してデータベースから情報を引き出し、かつHTMLにて出力してくれる機能です。最初はとっつきにくいのですが、Viewsは裏でクエリ文を作成していることを意識すればより早く慣れられると思います。

Add new viewをクリックしてView nameにViewの名前を入力します。名前はなんでもいいのですが、今回はProfileという名前に設定しました。システム内部名称には半角英数字とアンダースコアのみで入力します。表示の欄には今回ユーザー情報を使うのでユーザーを選びます。そのあとCreate a blockにチェックを入れます。Items per pageには１を入力します。これはViewで表示するアイテム数で、１回のクエリーで表示するアイテム数になります。

設定後、Continue & editをクリックして次の画面に移ります。ここでViewsの画面と設定について解説したいと思います。

追加ボタン：Viewでは最初のマスターの設定を引き継いで異なる設定のViewを作ることができます。部分ごとに違う設定のブロックを複数作成する時にはマスターに共通の設定をし、それぞれのブロック毎に違う設定を行うと便利です。異なる設定のViewを作る場合には追加をクリックして作成します。
Display name：ここでViewの名前を編集します。
タイトル：タイトルを追加できます。ここに入力されたタイトルはWebサイト上にも表示されます。
フォーマット；表示されるフォーマットを設定します。Viewの機能でデーターをテーブルで表示したり、またリスト表示をしたりすることができます。
Fields：どの情報を出力するかここで設定できます。フィールド単位で選択していきます。
Filter Criteria：出力するデーターの制限をかけます。様々な条件でフィルターをかけることができます。今回はアクティブで「はい」を、またUsernameを指定して別のユーザーが登録されても表示したいユーザーのみ表示されるようにします。
Sort Criteria：出力を昇順にするか降順にするか設定できます。また日付指定もできます。
Block name：ブロック名の設定
Access：アクセス制限をかけられます
ヘッダー・フッター：View自体にヘッダーとフッターを追加できます。
Auto preview：ここにチェックが入っていることで、現在してる設定の結果表示されるコンテンツがその下に表示されます。

まずタイトルを非表示にするために、タイトルをクリックしてタイトルを削除し空白にして保存します。保存後タイトルは「なし」と表示されます。（Webサイト側にはタイトルが表示されなくなります。）

フォーマットの欄は、出力されるHTMLの形式を選択できますが、今回はデフォルトのままにしておきます。

Fieldsでは出力したいフィールドを様々なコンテンツタイプやその他のフィールドを追加できます。今回はユーザー情報の表示名とプロフィール画像を出力したいためその２つのフィールドを設定します。まずデフォルトで設定されているユーザー：名前は管理画面のログインに使うユーザー名ですので、これを削除し、新たに先ほど設定した表示名を追加します。

FIELDSの欄の追加ボタンの横にあるアイコンをクリックし、「Rearrange」をクリックします。出てきたポップアップにて削除をクリックし、Applyをクリックして名前の表示を削除します。

次にFIELDSの欄の追加ボタンをクリックし、表示名を追加します。検索のところに「表示名」と入力することで、ユーザーの表示名フィールドが抽出されるため、チェックボックスにチェックを付けてApplyをクリックして表示名フィールドを追加します。

次の画面ではクラス名を設定できます。プロフィール画像と表示名の各設定で以下のように設定します。

Create a labelのチェックを外す
Style Settingsを開きCustomize field and label wrapper HTMLにチェックを入れる
Wrapper HTML elementはDIVを選ぶ
Create a CSS classにチェックを入れて、「profile-name」というクラス名を入れる
Applyをクリックして保存する

プロフィール画像のフィールドも同様の手順で追加します。プロフィール画像の場合はフィールド名はユーザー：写真、クラス名はprofile-pictureになります。（htmlファイルを見ればクラス名が確認できます。）

追加後、再度Rearrangeをクリックし、プロフィール画像、表示名の順番に左の十字のアイコンをドラッグして並び替えます。

次にFILTER CRITERIAに移ります。この項目は条件を追加して表示したいコンテンツが表示されるようにします。今回ですと複数のユーザーが登録されている場合、今の設定では新しく追加したユーザーが表示されてしまうため、狙ったユーザーが表示されるようにユーザー：名前で条件を絞ります。

FILTER CRITERIAの欄で追加をクリックし、「名前」で検索をかけてユーザー：名前を選びます。次の画面では「is one of」が選択された状態で出力したいユーザー名（ログイン時に使用するユーザーネーム）を入力しApplyをクリックします。

View全体に関わる注意事項としては、

Viewの設定はマスターという全体の変更と、追加したView単体で変更の大きく分けて２つが各設定で選べます。ポップアップで表示された各設定画面の上部のForの横にあるバーでThis block(override)かAll displaysか選びます。今回は特に追加のブロックがないため全体の変更のみしました。

クエリが作成されると下にSQLクエリが表示できることが確認できます。このクエリ文を見て実際に自分が出力したいデータが表示されるクエリになっているか確認します。またそのクエリの結果がAuto previewにチェックを入れることで、どのようなデータが出力されるか確認できます。

Viewは本当に細かく様々な設定ができ奥が深いです。今回はまずViewに慣れるのが目的で、こんなことができるんだー程度に分かればいいと思います！ユーザーに登録されたプロフィール画像と表示名が出力されていることを確認して保存をクリックします。

注11：このVIewの保存をクリックしないと設定が保存されないため必ず保存をクリックするようにしてください。設定途中ででもこまめに保存することをお勧めします！

View作成後、ブロックの設定に移ります。先ほど作成したViewブロックが、View：Profile：First sidebarという名前で作成されていると思います。このブロックをFirst Sidebarリージョンに追加して保存します。保存後実際にサイトを見てみて出力されていることを確認します。

11. Block Class モジュールをインストールしてブロックのラッパーにクラス名を追加する

Viewでプロフィール画像と名前は出力されましたが、CSSが適用されていません。テンプレート元のHTMLファイルのサイドバーをよく見てみると、sidebar-itemというクラス名がついています。このsidebar-itemを先ほど作ったView及びこれからサイドバーに追加するブロックに設定したいところですが、デフォルトのままではブロックのラッパーにクラス名を追加することができません。

そこでBlock classモジュールをインストールして管理画面側からクラス名を追加できるようにします。追加後、先ほどのView：Profile：First sidebarにsidebar-itemのクラス名を追加します。

12. CKEditor、File entity、IMCEのインストールとテキストフォーマットの追加

サイドバーの残りの部分に移る前に、管理画面側のコンテンツ入力をしやすくするためにCKEditorをインストールします。またデフォルトのままでは入力画面からのファイルのアップロードもできないためFile entityとIMCEモジュールもインストールします。

CKEditorをインストール後、CKEditor専用のテキストフォーマットを設定します。DrupalでもWordPressと同じようにVisualのようなHTMLを意識せず書けるモードと、TextのようなHTMLタグが打ち込めるモードがあります。それぞれのモードが１つのテキストフォーマットとして登録されています。今回はCKEditor用に新たにテキストフォーマットを作成します。

環境設定→テキストフォーマットをクリックし、テキストフォーマットを追加をクリック、名前は適宜設定し、有効なフィルターを全て外し設定を保存します。（今回私の場合はWYSIWYGという名前にしました。意味は皆さんもご存知であろうWhat you see is what you getの略です）

設定後、環境設定画面に戻り、今度はCKEditorの設定を行います。CKEditorをクリックします。デフォルトでは２つのプロフィールが設定されています。このプロフィールというのは CKEditorの設定を保存する機能なのですが、特にユーザー毎に使い分ける場合でなければ、設定をシンプルにするためにどちらか一方を削除します。（私の場合はAdvancedを残しました。）共通の設定はデフォルトのままにしておきます。

削除後残った方のプロフィールを設定していきます。CKEditorの設定はかなり細かくできますが、今回は必要最低限の項目について設定していきます。

まずBASIC SETUPのタブを開き、先ほど作成したテキストフォーマットにチェックを入れます。これによってCKEditor専用のテキストフォーマットが入力画面から選択できるようになります。
次にADVANCED CONTENT FILTERタブを開き、Advanced Content Filterを無効にします。テキストフォーマットでもフィルター機能があるので、CKEditorのフィルターは無効にしておきます。
CLEANUP AND OUTPUTの項目では、Font formatsにユーザーに入力を許可するHTMLタグを入れておきます。私の場合はデフォルトのままにしています。
FILE BROWSER SETTINGSではFile browser typeで先ほどインストールしたIMCEを選びます。
高度なオプションでは適宜必要な項目を有効、はいを選択します。Force pasting as plain textはHTMLタグを入れてもテキストとして貼り付ける機能です。

全ての設定が終わったら保存をクリックします。CKEditorの設定に関してより詳しく知りたい方はこちらのチュートリアルに分かりやすくまとめられています。

13. プロフィールブロック、ソーシャルメディアブロックを作成する

CKEditorの設定後、サイドバーのプロフィールのブロックとソーシャルメディアのブロックを作成します。こちらは単純にブロックを作成してコンテンツを追加するだけで大丈夫です！ブロックを追加をクリックし、ブロック作成画面を開きます。ブロックのタイトルには<none>を指定することでタイトルを非表示にすることができます。

ブロックの本文ではテキストフォーマットをWYSIWYGに変更した後、Sourceをクリックし、sidebar-item内のコードを直接HTMLファイル上からソースをコピーして貼り付けます。

またソーシャルボタン用のSVG画像はWYSIWYGの画像のアップロード機能から、Brwose Serverをクリックしてファイルをアップロードし、アップロード後Sourceモードに変更しリストタグにsocial-media-iconクラスを追加します。

サイドバー用のブロックなので忘れずにラッパー用のクラス名もCSS Classも追加しましょう。終わったら保存しリージョンをFirst Sidebarに設定します。

同じ要領でフッターブロックも追加します。コピーライトの部分のコードをコピーしDrupal側に貼り付け、保存後はFooterのリージョンに追加します。

14. DrupalにおけるjQuery/JavaScriptの設定

最後にモバイル版メニューが正常に動作するためにJavaScriptのコードを入力します。DrupalにJavaScript/jQueryを取り込むには少し特殊な設定が必要です。

まずJavaScriptファイルをテーマにロードするために.infoファイルにファイル名を追加します。

scripts[] = js/scripts.js

その後テーマフォルダ内にjsフォルダを作成しその中にscripts.jsファイルを作成します。今回のコードはjQueryを使っているため、用意しておいたscript.jsのコードをDrupalのscripts.jsを作成するときに以下の点に気をつけます。

jQueryを使う際は他のJSライブラリとの競合を避けるために、(function($) {…コード…}(jQuery));でコードを囲む
各JSモジュールはDrupal.behaviors.modulename = { attach: function (context, settings) {…コード…} };で書き始める

の２点です。DrupalではDOMが読み込まれた時に、contextとsettingsの２つの引数が渡されます。contextにはDOM情報が含まれ、settingsにはサーバーサイドのセッティングが含まれています。（詳しく内部でどのような処理がされてるか知りたい方はこちらの記事を参考にしてください。）

では上記２点の作法を踏まえてscripts.jsを書いていきます。貼り付けた後のコードは下記のようになりました。

(function ($) {
  Drupal.behaviors.personalMenu = {
    attach: function (context, settings) {

      $(document).ready(function() {

        function mobileMenu() {
          var menuBlock = $('#menu-block'),
              browserWidth = window.innerWidth;
          //If browser window width is under 860px
          if(browserWidth < 660) {
            //Close menu block if users change browser window width
            menuBlock.css('display','none');

            //Set width to the dropdown menu
            var outerBrowserWidth = $(window).width();
            menuBlock.css('width', outerBrowserWidth-30);

            //Show menu block if it's a mobile device
            $('.navbar-toggle').click(function() {
              if(!menuBlock.hasClass('open')) {

                //Slidedown the dropdown menu
                menuBlock.slideDown('400', function(){
                  menuBlock.removeClass('close');
                  menuBlock.addClass('open');
                });
              }
              else {
                //Slideup the dropdown menu
                menuBlock.slideUp('400', function(){
                  menuBlock.removeClass('open');
                  menuBlock.addClass('close');
                });
              }
            });
          }//If browser window width is over 660px; show menu
          else if (660 <= browserWidth) {
            menuBlock.css('width', 'auto');
            if( menuBlock.css('display') == 'none') {
              menuBlock.css('display','block');
            }
          }

        }

        //Execute mobileMenu function when users land on the page
        mobileMenu();

        //Execute the function when browser window is resized
        $(window).resize(function(){
          mobileMenu();
        });

      });

    }
  };
})(jQuery);

こちらのファイルと編集したsimple.infoファイルをサーバーにアップロードし、キャッシュをクリアし表示を確認します。問題なければモバイル版のメニューがドロップダウンで表示されるはずです！ひとまずsimpleブログのテーマ作成についてはこれで完了となります。ここまで駆け足で解説してきましたが、少しでもDrupalの設定とテーマ作成に慣れていただければ幸いです！

追記：

正式リリースされたDrupal8になるとDrupal7とはかなり違った仕様になりました。Drupal開発に特化したANNAIさんから分かりやすいDrupal8開発の本が出されたみたいです。Drupal8に関する日本語情報はかなり少ないのでDrupal8で開発するには必須ではないでしょうか。