2016-09-29

Joomla3.xテンプレート作成方法ー03

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>
は、エクステンション　＝＞　モジュール　で作成したものを反映させるための手続

モジュールや記事を表示するエリアは以下の通り




作成したモジュールを　テンプレートのどの位置に表示するかは　以下の画面で設定する。


続く・・・・
投稿者
ラベル: