Joomla3 テンプレート作成 その３
テンプレート各ファイル内容
必要な知識
HTML , CSS , （PHPは今回は必要なし。より完成度の高いサイト作成には必須）
必須ファイルの内容
▶ index.html （セキュリティ上必要なファイル）
<!DOCTYPE html><title></title>
▶ templateDetails.xml （テンプレートの情報や基礎データ）
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template">
<name>mytemplate2106a</name>
<creationDate>2016-9-28</creationDate>
<author>Your Name</author>
<authorEmail></authorEmail>
<authorUrl>http://hitokotoubuntu.blogspot.jp/</authorUrl>
<copyright>Copyright (C) 2016 - hitokotoubuntu.blogspot.jp All rights reserved.</copyright>
<license>GNU/GPL</license>
<version>0.0.1</version>
<description>My Template2016a</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>left</position>
<position>footer</position>
<position>position-0</position>
</positions>
</extension>
▶ index.php
（PHPファイルだが、一般的な index.html に書かれている内容。 HTML言語）
（
<jdoc:include 〜 /> がJoomla管理で登録されたモジュールが反映される）
<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Joomla3.x-Template</title>
<link rel="stylesheet" type="text/css" href="templates/mytemplate2016a/css/template.css">
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
header
<jdoc:include type="modules" name="header" />
</div>
<!-- /header -->
<!-- contents -->
<div id="contents">
<!-- left-contents -->
<div id="left-contents">
left-contents
<jdoc:include type="modules" name="left" />
</div>
<!-- /left-contents -->
<!-- center-contents -->
<div id="center-contents">
center-contents
<jdoc:include type="modules" name="position-0" />
<jdoc:include type="component" />
</div>
<!-- /center-contents -->
</div>
<!-- /contents -->
<!-- footer -->
<div id="footer">
footer
<jdoc:include type="modules" name="footer" />
</div>
<!-- /footer -->
</div>
<!-- /container -->
</body>
</html>
▶ template.css （CSSファイル）
body {
font-size: 16px;
background-color: #E0E0E0;
}
#container {
margin: 10px;
width: 980px;
margin: 0 auto;
background-color: #FEFFD0;
}
#header {
width: 100%;
height: 120px;
background-color: #DCFF9B;
}
#contents {
width: 100%;
background-color: #D4FFFB;
}
#left-contents {
float: left;
width: 25%;
background-color: #D4DFFF;
}
#center-contents {
float: left;
width: 75%;
background-color: #D4D4D4;
}
#footer {
clear: both;
height: 80px;
background-color: #FFCDBC;
}
▶ index.php について
今回は、簡潔にするため以下の５つを設定した。
エクステンション ＝＞ モジュール で作成したものを反映するための記述 ４つ
<jdoc:include type="modules" name="header" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="position-0" />
<jdoc:include type="modules" name="footer" />
記事の内容を反映するための記述 １つ
<jdoc:include type="component" />
以上、５つは HTML中の表示したい位置に記述する。
▶ templateDetails.xml について
<files>
<filename>フォルダー上にあるファイル名</filename>
<folder>フォルダー名</folder>
</files>
は、
テンプレートに必要なファイル および フォルダー
<positions>
<position>header</position>
<position>left</position>
<position>footer</position>
<position>position-0</position>
</positions>
は、
エクステンション ＝＞ モジュール で作成したものを反映させるための手続
モジュールや記事を表示するエリアは以下の通り
作成したモジュールを テンプレートのどの位置に表示するかは 以下の画面で設定する。
続く・・・・
