Joomlaのテンプレート作成用のシンプルな土台

　Joomlaのテンプレートは、テンプレート ディレクトリの中に任意のディレクトリを作って、そこに配置するだけなので簡単。ローカルで作ったテンプレートのディレクトリをzipで固めれば、Joomlaの管理画面からインストールする事もできます。

　Joomlaのテンプレートを作成して行く土台になるシンプルなテンプレートを作ったので、公開しておきます。著作権等は主張しないので、自由に使って下さい。もし役立ったら、コメントをもらえたり、ブログ等に書いてもらえると、うれしいです。

　テンプレートファイルの配置は、/templatesの下に
/myTemplate (自分のテンプレート名)
index.php
templateDetails.xml
/css/template.css

　の３つを配置するだけ。実際はcssも必要になるとは思うけれど、最低限必要なのは、index.php とtemplateDetails.xml の2つのファイル。この2つのファイル名は変えられないけれど、css等の他に置くファイルは、templateDetails.xmlで指定するので、自分の好きな名前をつけられます。

　3カラムで構成してありますが、右サイドバー付きの2カラム、左サイドバー付きの2カラムにも、このテンプレートで対応できる様になっています。2カラムにするには、Joomlaのメニュー構成で、右メニューの項目をなくせば、左サイドバーの2カラム構成になります。反対に左メニューの項目をなくせば、右サイドバーの2カラム構成になります。

　templateDetails.xmlの中身。ここにテンプレート フォルダの中にあるファイル名等を書いておきます。Joomlaの管理画面で表示される内容にもなるので著作権表示等もこのファイルに書きます。

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
    <name>Simple Template</name>
    <creationDate>2009 May 05th</creationDate>
    <author> alifedesign.net </author>
    <copyright>GPL</copyright>
    <authorEmail> mail@server.com </authorEmail>
    <authorUrl> your site address </authorUrl>
    <version>0.0.1</version>
    <description>The simple template for customizing</description>
 
    <files>
        <filename>templateDetails.xml</filename>
        <filename>index.php</filename>
        <filename>template_thumbnail.png</filename>
        <filename>css/template.css</filename>
        <!--　JavaScriptや画像ファイルを置く場合の例
        <filename>js/somefile.js</filename>
        <filename>images/Title.png</filename>
        <filename>images/HeaderBack.png</filename>
        -->
    </files>
 
    <positions>
        <position>top</position>
        <position>left</position>
        <position>right</position>
        <position>footer</position>
        <position>breadcrumbs</position>
    </positions>
 
    <!--　パラメータを設定する場合の書式
    <params>
        <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        </param>
    </params>
    -->
</install>

　<files>タグの間に、ファイル名やディレクトリ構造を定義します。cssファイルは、cssディレクトリの下に置く様にしましたが、構造は自由なので、特に分ける必要は無いです。それから、今回は省略していますが、管理画面で表示されるテンプレートのスクリーンショットをtemplate_thumbnail.pngという名前で206×150の大きさで付けておくのがお作法です。テンプレートを公開して配布するなら、付けた方が良いでしょう。

　<positions>タグの間に、テンプレート上で表示されるコンテンツの配置場所を一覧にしておきます。top, left, right, fotterが最小構成でしょうか。パン屑リストを表示するbreadcrumbsも入れています。メインコンテンツの部分はここで設定する必要はありません。positionはこの他に、banner, user1, user2…などいろいろとあり、全部で20個を超えます。

　今回は使っていませんが、<params>タグの間にテンプレートの管理画面で設定できる様にパラメータを指定できます。

　長くなるので、index.phpとtemplate.cssについては投稿を分けます。

あわせてこちらの記事もどうぞ

• Joomlaで 404エラーページをカスタマイズ
• Post by alifedesign.net