Joomlaのテンプレートを作成する【第二回】

How to create Joomla template

【第一回】では最もシンプルなJoomlaテンプレートを作成しましたが、今回はこれとBootstrap 3.2を連携して、レスポンシブ対応のテンプレートに拡張します。

はじめに

今回は 【第一回】 で作成した Joomla テンプレートを編集し、Bootstrap 3.2 を利用した レスポンシブ対応のテンプレートにしていきます。

Bootstrap に関しては前回も軽く触れていますが、「何それ?」な方は以下のリンクあたりが参考になるかと思います。

Bootstrapの入手

Bootstrap との連携を行うにあたって、まずは Bootstrap を取得する必要があります。
この記事では、前回も書いたように Bootstrap 3.2 を利用しています。

※3.2 以外でも同様の手順で連係可能だと思いますが、適宜読み替えを行う等してください。

  1. Getting started - Bootstrap ページから Bootstrap をダウンロードします。
    Download Bootstrap

テンプレートにBootstrapを組み込む

前回作成したテンプレートにBootstrapを組込んでいきます。

Bootstrapファイルをテンプレートディレクトリにコピー

  1. 先にダウンロードした Bootstrap のアーカイブファイル ( bootstrap-3.2.0-dist.zip ) を適当なディレクトリで展開します。
  2. 展開先に以下のディレクトリが含まれるので、これら全てを前回作成したJoomlaテンプレートのディレクトリ ( /templates/agility/ 以下 ) にコピーします。
    • css
    • fonts
    • js

templateDetails.xml を編集

上記3ディレクトリが含まれるように templateDetails.xmlを編集します。
files 要素の記述を以下のように変更します。

    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
        <folder>fonts</folder>
        <folder>js</folder>
    </files>

index.php の編集

index.php を編集します。

<?php
defined('_JEXEC') or die;
$baseUrl = $this->baseurl;
$templateUrl = $this->baseurl . '/templates/' . $this->template;
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <jdoc:include type="head" />
  <!-- Bootstrap -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/bootstrap.min.css" />
  <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/bootstrap-theme.min.css" />
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <jdoc:include type="modules" name="header" />
  <jdoc:include type="modules" name="breadcrumbs" />
  <jdoc:include type="modules" name="left" style="none" />
  <jdoc:include type="component" />
  <jdoc:include type="modules" name="right" style="none" />
  <jdoc:include type="modules" name="footer" style="none" />
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="<?php echo $templateUrl; ?>/js/bootstrap.min.js"></script>
 </body>
</html>

上記は Getting started - Bootstrap ページにある Basic template の記述を、前回のテンプレートに対して適用したものとなっています。

上記設定が完了したら、テンプレートが正しく表示されるか確認しておきましょう。

Bootstrap3.2.0適用後

Bootstrap のスタイルが適用されているのが確認できます。

レスポンシブ対応のテンプレートにする

ここまでで、テンプレートで Bootstrap を利用できる ( 最低限の ) 状態になりましたが、レイアウト等は全くしていない状態です。
ここからレスポンシブ対応のテンプレートにしていきます。

レイアウトを決める

基本的なレイアウトは以下として作成する事にします ( PC等の高解像度の画面で閲覧した場合 )。よくある3カラムレイアウトになります。

content を除く各ブロックの名前は表示位置を表します。これは前回 templateDetails.xml で定義したものと同じです。 content は Joomla の記事を表示するブロックになります。

基本レイアウト

Bootstrap におけるレイアウト設定

Bootstrap3 では グリッドシステム を利用することでレスポンジブデザインを実現できます。

特徴

以下のような特徴があります。

  • 12カラムのグリッド
    画面をグリッド (格子) 分割してレイアウトします。Bootstrap3では12カラムでグリッドが設定されているので、各ブロックのそれぞれの横幅の占める割合を x/12 になるようにレイアウトする事になります。
    例えば、left : contet : right = 3 : 6 : 3 (合計12) といった具合です。
  • カラム数の指定は定義済みのクラスで行う。
    Bootstrap3で定義済みのクラスを指定する事で、簡単にブロックのカラム数を設定する事が可能です。
  • スクリーンの幅に応じてレイアウトが自動的に変わります

※グリッドシステムの詳細に関しては、はじめに部分で示したリンク先等を参照して下さい。

Joomlaテンプレートでグリッドシステムを使う

実際にグリッドシステムを利用して上記3カラム部分のHTMLを記述してみます。
横方向にグリッド分割する場合、以下のようにします。

  1. container、または、container-fluid クラスを指定した要素を記述
  2. rows クラスを指定した要素を 1 の子要素として記述
  3. col-xx-n クラス(xxはデバイスによって xs, sm, md, lg の何れか, n は数値) を指定した要素を 2 の子要素として記述
具体的なHTMLの例を以下に示します。

  <div class="container">
   <div class="row">
    <div class="col-md-3">left</div>
    <div class="col-md-6">content</div>
    <div class="col-md-3">right</div>
   </div>
  </div>

先の index.php に適用してみます。

<?php
defined('_JEXEC') or die;
$baseUrl = $this->baseurl;
$templateUrl = $this->baseurl . '/templates/' . $this->template;
?>
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <jdoc:include type="head" />
  <!-- Bootstrap -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/bootstrap.min.css" />
  <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/bootstrap-theme.min.css" />
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-md-12">
      <jdoc:include type="modules" name="header" />
    </div>
   </div>
  </div>

  <div class="container">
   <div class="row">
    <div class="col-md-12">
      <jdoc:include type="modules" name="breadcrumbs" />
    </div>
   </div>
  </div>

  <div class="container">
   <div class="row">
    <div class="col-md-3">
      <jdoc:include type="modules" name="left" style="none" />
    </div>
    <div class="col-md-6">
      <jdoc:include type="component" />
    </div>
    <div class="col-md-3">
      <jdoc:include type="modules" name="right" style="none" />
    </div>
   </div>
  </div>

  <div class="container">
   <div class="row">
    <div class="col-md-12">
      <jdoc:include type="modules" name="footer" style="none" />
    </div>
   </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="<?php echo $templateUrl; ?>/js/bootstrap.min.js"></script>
 </body>
</html>

PCでの表示確認

表示がどう変わるか確認してみましょう。
PC上で十分な横幅がある状態のWebブラウザで確認した場合、記事一覧は中央よりに表示されている事が確認できると思います。

但しサンプルデータのままの状態ではcontent部分以外には何も表示されないため、レスポンシブデザインとして機能しているか確認がしづらいです。
管理画面から適当なモジュールを header, breadcrumbs, left, right, footer に表示する設定にしてから確認するとよいでしょう。
以下はモジュールを描画する設定をして表示したものになります。

※各ブロックのborderを描画するようにCSSで設定しています。

グリッドシステム

スマートフォンでの表示確認

スマートフォンで表示した場合、以下のように表示されます。

※PCのWebブラウザの幅を狭くした場合にもレイアウトが変わるのを確認できます。

グリッドシステム

PCでは3カラムレイアウトだったのが1カラムのレイアウトで表示されてます。

もし、スマートフォンでも2カラムや3カラムレイアウトを行いたいという場合はどうすればよいでしょうか。
その場合は .col-xs-n (nは数値) を指定する事で可能になります。

  <div class="container">
   <div class="row">
    <div class="col-xs-3 col-md-3">
      <jdoc:include type="modules" name="left" style="none" />
    </div>
    <div class="col-xs-6 col-md-6">
      <jdoc:include type="component" />
    </div>
    <div class="col-xs-3 col-md-3">
      <jdoc:include type="modules" name="right" style="none" />
    </div>
   </div>
  </div>

上では xs と md の場合の設定を行っていますが、更に sm, lg の設定を追記する事も可能です。
このようにしてデバイス ( 表示幅 ) によって、動的に変更されるレイアウトを設定する事が可能になっています。

まとめ

今回は 前回 作成したテンプレートに Bootstrap 3 ( 3.2 ) を組込み、レスポンシブ対応のテンプレートを作成するところまで行いました。

現状、非常にシンプルなテンプレートなので、これをベースにカスタマイズしてより完成度の高いレスポンシブ対応のテンプレートとする事も可能かと思います。
独自に拡張等してみてはいかがでしょうか。

次回 (以降) は

  • Bootstrap の特徴の一つである Navbar の組み込み
  • left/right モジュールの有無で 1カラム~3カラムへ変更
  • テンプレート設定の追加

等に関して取り上げてみようかと思っています。

2014/10/3 追記
と思っていたのですが、今回で終了するかも。
( Joomla 関連案件が流れそうなのと、当記事に対するアクセス/レスポンスが少ない事から )