読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

Joomla!(7)テンプレートを自作する -最もシンプルなテンプレート-

Joomla!

Joomla! は CMS ですのでテンプレートを使ってページを生成します。ブログのようにひとつのサイトにひとつのテンプレートということはなく、すべてのページを違うテンプレートで作ることもできます。そんな極端なことはしないにしても、見た目はサイト作成の重要ポイントですので、デザインの可能性が広がることは優位性があります。

で、テンプレートの作り方ですが、

  1. デフォルトテンプレートをカスタマイズする
  2. 有料、または無料で手に入れたテンプレートをカスタマイズする
  3. 一から自作する

のいずれかになります。

3.の「一から自作」なんてとても大変と思われるかもしれませんが、1.にしても 2.にしても、結局カスタマイズするためにはテンプレートの基本を理解していないとできないことですので、一から作ってみようと思います。

とは言いつつも、Joomla! は日本語情報が少ないですので英語サイトの情報を探しつつやっていくことになります。

最もシンプルなテンプレート構成

Creating a basic Joomla! template - Joomla! Documentation

こちらのサイトや Joomla!3 のデフォルトテンプレート protostar を参考にして進めましょう。
テンプレート名を mytemplate としますと次のディレクトリ構成とファイルが最低必要になります。

mytemplate/
├ css/
│ └ template.css
├ index.php
└ templateDetails.xml

templateDetailes.xml

まず、templates ディレクトリにテンプレート名(mytemplate)でディレクトリを作り、上のディレクトリ構成と空ファイル template.css、次の templateDetailes.xml を作成します。

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template">
    <name>mytemplate</name>
    <creationDate>2015-11-17</creationDate>
    <author>ausnichts</author>
    <authorEmail></authorEmail>
    <authorUrl>http://www.imuza.com</authorUrl>
    <copyright>Copyright (C) 2015 - IMUZA.com All rights reserved.</copyright>
    <license>GNU/GPL</license>
    <version>0.0.1</version>
    <description>My Template</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>breadcrumb</position>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>footer</position>
    </positions>
</extension>

index.php

次に、同様に index.php を作成します。

<?php
defined('_JEXEC') or die;
?>

<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<header>
    <jdoc:include type="modules" name="top" /> 
    <jdoc:include type="modules" name="breadcrumbs" />
</header>
<main>
    <div id="left">
        <jdoc:include type="modules" name="left" /> 
    </div>
    <jdoc:include type="component" />
    <div id="right">
        <jdoc:include type="modules" name="right" /> 
    </div>
</main>
<footer>
    <jdoc:include type="modules" name="footer" />
</footer>
</body>
</html>

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

エクステンション > エクステンション管理 > 探すで上の探すボタンをクリックすると作成したテンプレート mytemplate が現れますので、チェックしてインストールをクリックします。

f:id:ausnichts:20151117125801p:plain

テンプレートの適用

エクステンション > テンプレート管理 で標準列の をクリックすると色が変化しテンプレートに mytemplate が適用されます。

f:id:ausnichts:20151117130153p:plain

template.css

どうなっているかサイトをプレビューしてみましょう。テンプレート > モジュール管理 でそれぞれモジュールの表示位置を top, breadcrumbs, left, right, footer に指定して、右上のサイト名をクリックしてください。

f:id:ausnichts:20151117131131p:plain

ただコンテンツが並んでいるだけですね。css でブロック位置を調整してみましょう。template.css に次のスタイルを追加してください。

#left,
#right {
  width: 25%;
  float: left;
  box-sizing: border-box;
  border: 2px solid red;
}
#content {
  width: 50%;
  float: left;
}
footer {
  border: 2px solid green;
  clear: both;
}

.breadcrumb li {
    display: inline-block;
}
header img {
    display: block; /* 画像の下の空白を取るため */
    width: 100%; /* わかりやすくするため画像を拡大 */
    height: 180px;
}

こうなります。

f:id:ausnichts:20151117135627p:plain

ということで、基本は意外と簡単です。

position 名は自由に決められますので、希望のものを templateDetails.xml に追加し、index.php でレイアウトを決め、template.css で整形するという流れになります。

ということなんですが、もう少しハードルを低くするために、次は bootstrap を入れてみましょう。