既存デザインをjoomlaサイトで実現する際のテンプレートカスタマイズ

Joomla

Joomlaでサイトを作るとき、すでにこうしたい！というレイアウトが考案されているとき、以下の方法のどちらがよいかを考えてみました。

  1. フリーテンプレート使用：webで配布されている、joomlaのフリーテンプレートを使用し、後から理想とするレイアウトに修正する。
  2. オリジナルテンプレート使用：考案したHTML+CSSから、オリジナルのテンプレートを作成する。


ここでは、以下のような特徴を持つレイアウトデザインにしたい場合を仮定します。

  • トップメニューは2段構成
  • ３カラムレイアウト


これを踏まえて1と2のメリットとデメリットを挙げてみました。
レイアウトがすでに決定している場合のテンプレート比較

メリット デメリット
フリーテンプレート使用 ・最初の導入が楽。
・時間節約になる		 ・トップメニュー2段にすると、3カラムレイアウトのテンプレートではメインメニューがつぶれるものが多い。
・トップメニュー2段にしても崩れないテンプレートを選ぶと、今度は真ん中のカラムのコンテンツの幅が大きいとき、右側のモジュールが重なってしまう。
構想に近いレイアウトのテンプレートを見つけにくい。
オリジナルテンプレート使用 思いどおりのレイアウトを実現できる。 ・phpのコードを埋め込むなど、導入に手間がかかる。
・joomla特有のCSSを作成するのに時間がかかる。


Joomlaのテンプレートありきでそれを活かしてサイトを構築しようとなると、圧倒的に1のフリーテンプレートを使用する方法が優位です。
が、ここで考える件のように、すでに構想されたレイアウトがあり、細部まで決められている状態だと②の方が実現しやすいように思えます。

以下、1と2両方の方法で実現の可能性を探ってみます。

1. フリーテンプレート使用

joomlaのフリーテンプレートを利用し、2段トップメニューになるように修正します。
完成図は以下。

1. ダウンロード

例として使用するのは、以下のサイトのテンプレート。
３カラムレイアウトで、トップメニューを二段表示する修正をしても形が崩れないタイプのテンプレートです。
SiteGround Joomla 1.5 Template Gallery : siteground-j15-1
このリンクの画面右上の[Download Template]ボタンを押します。
必要事項を入力すると、ダウンロードリンクをメールで送ってくれます。

2. モジュールのpositionを新しく追加

モジュール[トップメニュー２]を表示させる位置をテンプレートに追加します。
ダウンロードしたテンプレートをアップロードし、デフォルトのデザインとしてサイトに適用してください。
以下のファイルを直接編集。

/templates/siteground-j15-1/templateDetail.xml

ファイルの最後のほうにあるpositionsタグに、他のpositionと同じように"user6"のタグを追加。(user1〜5はデフォルトで使用しているテンプレートが多いので避ける)

<positions>
	<position>user3</position>
	<position>user6</position>
	<position>left</position>
	<position>right</position>
	<position>syndicate</position>
	<position>debug</position>		
</positions>
3. 「トップメニュー2」をuser6の位置に指定

■ メニュー管理画面で「トップメニュー2」を作成
[joomla管理画面]＞[メニュー]＞[メニュー管理]で、トップメニューをコピーして「トップメニュー2」を作成

  • 新しいメニュー名：トップメニュー２
  • 新しいモジュール名：TopMenu2

■ モジュール管理画面で、TopMenu2を編集
[joomla管理画面]＞[エクステンション]＞[モジュール管理画面]＞TopMenu2の設定を編集
以下のように設定する。（Top Menuモジュールの設定を参考にする）

  • 詳細＞位置：user6
  • パラメータ＞モジュール設定＞メニュー名： トップメニュー２
  • パラメータ＞モジュール設定＞メニュースタイル：リスト
  • パラメータ＞拡張パラメータ＞メニュークラスサフィックス： -nav
4. user6を表示させるようテンプレートを編集。

[エクステンション]＞[テンプレート管理]より siteground-j15-1を選択。
HTML編集を選択し、index.phpを編集する。user3を読み込んでいる部分をそのすぐ下にコピーして、idとモジュール名をpillmenu2,user6に修正。

<div id="tabarea2">
            <table cellpadding="0" cellspacing="0" class="pill">
                <tr>
                    <td class="pill_l"></td>
                    <td class="pill_m">
                    <div id="pillmenu2">
                        <jdoc:include type="modules" name="user6" />
                    </div>
                    </td>
                </tr>
            </table>
 </div>
5. トップメニュー2にスタイルを適用

[joomla管理画面]＞[エクステンション]＞[テンプレート管理]
より、siteground-j15-1の編集画面を開きます。
CSS編集を選択し、template.cssを編集。
上記で修正したid tabarea2とpillmenu2についてのスタイル情報を、tabareaとpillmenuに関連するスタイル情報からコピー。

デフォルトテンプレートに指定し、トップメニューが二段になっていることを確認。

以上。

2. オリジナルテンプレート使用

考案したHTML+CSSから、オリジナルのテンプレートを作成します。
完成図は以下。

例にとるのは以下のサイトのCSSテンプレート(joomla用ではない、普通のホームページ用のテンプレート)。

free CSS template.org: hanging
3カラムレイアウトなので選択。
上記リンクよりダウンロード。

1. ツールの用意

テンプレート作成にあたってあれば便利なツールは以下。

  • HTML2Template：index.htmlからindex.phpを自動生成してくれる（要jdk1.6）。
  • TemplateXmlGenerator：templateDetail.xmlを自動生成してくれる。

これらをダウンロードし、解凍。使用方法はそれぞれのHPを参照。

2. HTML2Templateを利用してindex.phpを作成。

ダウンロードしたHP用テンプレートのディレクトリ構造を、Joomlaテンプレート用に以下のように変更する。

hanging
    |_[css]
        |_default.css
    |_[img]
    |_index.html

■ index.htmlを編集。
HTMLTemplateの使用方法に従い、記事やモジュールをを表示させたい箇所に__MAIN_CONTENT_HERE__と__MODULE_modulename__を記述する。
modulenameは、left, rightなどを記述する。

■ index.htmlからindex.phpを作成
HTML2Template画面で[File]>Openを選択してindex.htmlを読み込む。
必要項目を記述し、Exportを選択すると同じ階層にindex.phpが作成される。
また、index.phpに必要なメタコードなど、必ず必要な共通部分も自動生成してくれる。
このとき、同時に作成されるtemplateDetail.xmlは削除。

3. templateXmlGeneratorを使用してtemplateDetail.xmlを作成

templateDetail.xmlには、テンプレートに含まれるcssやimgファイルの場所を全て書き込まなければならない。
templateXmlGeneratorはを選択することで、その直下にあるファイルを読み込んでtemplateDetail.xmlに記述してくれる。
項目に値を入力→ディレクトリを選択→作成ボタンを押す。
templateDetail.xmlがhangingディレクトリ直下に作成されていることを確認。

ところで、ここで作成したファイルを修正。templateDetail.xmlを開く。

  • 全てが一行で表示されているので、まず改行。
  • 冒頭にxml宣言を追加。
  • インポートするfilenameがtemplatedetail.xmlになっているので、templateDetail.xmlに直す。
注意点
  • ダウンロードしてきたテンプレートの場合は、cssなど階層を変更するため、imgファイルのパスを変更すること。
  • html2Templateでモジュールを読み込むコードがうまく変換されているか確認すること。

作りなおしたディレクトリ構造は以下のようになっています。

heading
    |_[css]
        |_default.css(任意の名)
    |_[img]
    |_index.php
    |_templateDetail.php

headingディレクトリを含まないようにその下の階層でzipファイルに圧縮し、joomlaにインストール。
あとはjoomlaで表示を確認しながら追加表示したいモジュールをindex.phpに足したり、CSSを調整します。
（template.cssなど、自分が適用するスタイル情報を別にして作成すると分かりやすいです。）
テンプレート作成にあたっての参考URL

Create a simple Joomla 1.5 template: http://www.siteground.com/tutorials/joomla15/joomla_create_template.htm

Tutorial:Creating a basic Joomla! template: http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template

まとめ

構想されたレイアウトにしたがってHPを作りたい場合、オリジナルのテンプレートのほうが良いと上に記しました
しかし、既存テンプレート利用のほうが、やはりどちらかというとサイトメンテナンス工数の削減になるので、よいかもしれません。
既存のテンプレートは、joomlaのコンテンツ、モジュールなど大部分においてスタイル情報が確立しているため、大幅にレイアウトが崩れることはまずありません。
その後のサイトメンテナンスが楽です。
一方オリジナルテンプレートを作成すると、joomlaのデフォルトのテンプレートに合わせたCSSを作成するのに時間がかかります。
モジュールごとのデザインも崩れてしまうこともあり、その場合はjoomlaのデフォルトのテンプレートのスタイル情報にオリジナルのスタイル情報をつけくわえて行く形になります。
しかし、それでは包括的なレイアウトを組めず、その後のサイトのメンテナンスにも余計な工数がかかることが危惧されます。
包括的なレイアウトを組むにはjoomla特有のスタイル情報などに熟知している必要があります。