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

How to create Joomla template

弊社ではオープンソースのCMS Joomla を利用したWebサイト構築を行ってきました。
仕事がらみで Joomla サイト構築を行う可能性があったので、Joomla でのサイト構築を学ぶついでにテンプレートの自作等を行ってみたので、手順を記しておきます。

今回は最もシンプルなテンプレートをフルスクラッチで作成します。

はじめに

梅雨も明けセミの鳴き声もうるさくなってきました。今年はセミの羽化をタイムラプス撮影したいと思っている今日この頃、皆様いかがお過ごしですか?

弊社Webサイトは JavaベースのCMS Magnolia を利用しているのですが、これまではWebサイト構築においては PHPベースの CMSである Joomla を利用する事が殆どでした。

私自身は 「PHP?なにそれ?美味しいの?」な人 ( PHP のオープンソースをカスタマイズする程度はできる。フルスクラッチは経験無し ) なのですが、Joomla 案件に関わる可能性もあるため、最近Joomlaでのサイト構築を学ぶついでに、テンプレートやモジュールの自作等も行っています。
( ※最近記事更新が行えてなかった原因 ... )

自作テンプレートに関してはそれなりに形になってきており、ある程度のノウハウも獲得できたので、基本的な作成方法に関してまとめてみます。

一つの記事で書くと非常に長くなるので、複数回の記事による連載にします。
第一回は最もシンプルなJoomlaテンプレートの作成までを行います。

※諸事情により Joomla のバージョンは 2.5 になります
※個人的には Joomla よりも Drupal のが得意。ナレッジマネジメント系の開発してたのもあり、社内の情報共有サイト等を作る事があるが、そういうのには Drupal のが向いていると思う。
※写真は IM FREE から ( Roxanne by Jonathan Kos-Read )

どんなテンプレートにするか?

おおまかな仕様を決める

テンプレート作成においても、ある程度の仕様は決めて作業にかかる方がよいでしょう。
デザインが既に決まっている場合ならば、それをベースに考えても構いませんが、今回はそういったものはないので、以下の要件をある程度満足させるものを作成する事にします。

  • できるかぎりHTML5準拠
  • レスポンシブ対応

一から全て作るのは結構大変ですが、幸い今はこれら要件を満たすための著名なCSSフレームワークがあるので、これを利用させていただきましょう。
BootstrapFoundation、他にも色々ありますが、今回は最も有名どころである Bootstrap を利用する事にします。

作成方法

テンプレートの作成方法としては、

  • 既存のテンプレートをベースに変更する
  • 一からスクラッチで作る

といった方法が選択できますが、今回は一からスクラッチで作成する方法を採る事にしました。

名前

テンプレート名も決めます。
会社名にちなんで Agility にする事にしました。

環境

環境は以下のようになります。

Joomlaバージョン 2.5.22
Bootstrapバージョン 3.2.0

動作確認は、ローカルの開発環境 ( Windows 8.1 )、及び、Linux ( CentOS 6.5 ) 上で行っています。

テンプレートの構成要素

Joomla のテンプレートは基本的な構成があります。
バージョン2.5 のテンプレートに関しては以下のファイルが最少構成になります。
※Agility テンプレートとして agility サブフォルダ以下に作成される場合

  • /template/agility/index.php
    Joomla において HTML(画面)を描画するためのPHPファイル
  • /template/agility/templateDetails.xml
    テンプレート定義が記述されたXMLファイル

最小構成のテンプレートを作成する

上記2ファイルを作成します。

index.phpの作成

index.php を作成します。
テキストエディタを利用して以下のコードを入力します。

※php、xmlファイル何れもUTF-8で保存して下さい。

<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <jdoc:include type="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" />
  </body>
</html>

上記 index.php はJoomlaのテンプレート用index.phpとしては最低限のものといってよいかと思います。

<jdoc:include type="component" /> が joomla のコンテンツ ( 記事 ) を出力する部分になります。

<jdoc:include type="modules" name="xxxxx" /> 部分は モジュールを表示します。
Joomla のモジュールでは表示位置を指定しますが、name="xxxxx"が表示位置を表しています。

templateDetails.xml の作成

templateDetails.xml を作成します。
テキストエディタを利用して以下のコードを入力します。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="2.5" type="template" client="site">
    <name>agility</name>
    <creationDate>2014-07-10</creationDate>
    <author>Masao Suda</author>
    <authorEmail>suda@agilegroup.co.jp</authorEmail>
    <authorUrl>http://www.agilegroup.co.jp</authorUrl>
    <copyright>Copyright (C) 2014 Agile Company Ltd.</copyright>
    <version>1.0</version>
    <description>
    <![CDATA[
        <p>agility template is Joomla 2.5 template with Bootstrap 3.2</p>
    ]]>
    </description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
    </files>
    <positions>
        <position>header</position>
        <position>breadcrumbs</position>
        <position>footer</position>
        <position>left</position>
        <position>right</position>
    </positions>
</install>

templateDetails.xml では joomla のテンプレートの内容を定義します。

description 要素までは、テンプレートに関する説明で、見て頂ければ判ると思います。
ここで 重要なのは files 要素と positions 要素です。

files 要素中にはテンプレートに含まれるファイル、及び、フォルダを定義します。
上記テンプレートでは index.php、及び、templateDetails.xml が定義されています。

positions 要素中にはテンプレートで利用可能な表示位置を定義します。
ここで定義されている position 要素は index.php 内でモジュールの表示位置として指定していた名前と一致している必要があります。

表示位置を示す名前に関しては、「これでなければならない」といった決まりはないようで、テンプレートによって好き勝手な名前が付けられているようです。
今回はそれなりに一般的に通じそうな名前で定義してみました。

テンプレートのインストール

作成したテンプレートを早速試す場合、以下の手順で試す事が可能です。
※上記テンプレートは joomla の templates ディレクトリ以下に存在するものとします。

テンプレートのインストール

  1. Joomlaの管理画面にログインします。
  2. メニューから、[ エクステンション ] > [ エクステンション管理 ] をクリックします。
  3. [ 探す ] をクリックします。
  4. 作成したテンプレートが表示されたら、チェックボックスをチェックし [ インストール ] をクリックします。

※上記、探すを行ってもテンプレートが見つからない場合、index.php、及び、templateDetails.xml が含まれるフォルダ ( 今回の場合 agility フォルダ ) を zip 形式でアーカイブし、エクステンション管理からインストールする方法(=Joomlaにおける通常のテンプレートインストール方法)でも、テンプレートのインストールが行えます。
環境による問題なのか、上手く機能しない場合もあったので、探すで駄目な場合はこの手順を採ってみると解決するかもしれません。

テンプレートを利用

テンプレートがインストールされたら、作成したテンプレートを利用するように設定します。

  1. メニューから、[ エクステンション ] > [ テンプレート管理 ] をクリックします。
  2. インストールしたテンプレートが表示されたら、チェックボックスをチェックし、[ 標準 ] をクリックします。
  3. 管理画面右上にある [ サイトへ ] リンクをクリックする事で、作成したテンプレートでの表示を確認できます。

以下は上記テンプレートを適用して、joomla2.5のサンプルデータを表示した画面になります。

テンプレートによる表示

まとめ

今回は最もシンプルなテンプレートの作成方法に関して書きました。

Joomla を利用する場合、殆どの方は

  • デフォルトのテンプレートを使う
  • フリー、あるいは、有償で提供されているテンプレートを使う
  • 上記テンプレートをカスタマイズして使う

の中の何れかの方法を採る場合が多いと思われます。

テンプレートをフルスクラッチするのは、単純に既存のものを利用するのに比べると、ある程度のスキル、及び、時間が必要になりますが、最新のCSSフレームワークの機能を Joomla に取り入れたいといった場合には有効な手段となります。
興味がある方は試してみてはいかがでしょうか。

次回 はこれをベースに Bootstrap 3.2 と連携して、レスポンシブ対応のテンプレートにする手順を示す予定です。