ไปเจอมาเลยเอามาเก็บไว้ก่อน วันหลังจะได้มาดูง่ายๆ ^^~
ความรู้ที่ควรมีในการสร้าง template คือ
1. ความรู้ทางด้าน กราฟฟิก แต่งรูป
2. HTML และ CSS
3. XML (ใช้ในการทำตัวติดตั้ง template)
มาเริ่มกันเลย ดีกว่า
ก่อนที่เราจะสร้าง template ขึ้นมาใช้งานเอง ต้องสำรวจโครงสร้าง file ของ Joomla ทั้งระบบกันก่อนว่าอะไรอยู่ตรงไหนบ้าง
รูป โครงสร้าง file และ directory
จะเห็นได้ว่ามี folder หนึ่งชื่อ templates folder นี้คือ folder ที่ใช้ เก็บ template ทั้งหมดของ Joomla
Template ต้องประกอบ ด้วย ไฟล์ อย่างน้อยที่สุด สามไฟล์ คือ
1.index.php
2.templateDetails.xml
3.template_thumbnail.png หรือ template_thumbnail.jpg
วิธีการสร้าง template เริ่มด้วย
1.สร้าง folder ย่อยใน folder templates
ตัวอย่าง ผมตั้งชื่อ my_template ก็จะได้ templates/my_template/
2.สร้างไฟล์ index.php ใน folder templates/my_template/ ไฟล์นี้ อาจจะประกอบด้วย โค้ด php,html,css และอื่นๆ ที่เราต้องการ ขึ้นอยู่กับการออกแบบของเรา
ตัวอย่าง ข้อมูลในไฟล์นี้ (เน้นการทำเพื่อให้เข้าใจง่ายๆนะครับ)
ตำแหน่งต่างๆ ใน template ตาม รูป
โค้ดของ template
---------------------------
<?php
defined('_JEXEC')?or?die(?'Restricted?access'?);??//?ป้องกันการเข้าถึงไฟล์นี้โดยตรง
?>
<html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="<?php?echo?$this->language;??>"?lang="<?php?echo?$this->language;??>"?>
<head>
<jdoc:include?type="head"?/>
</head>
<body>
<table?width="100%"?border="0"?align="center">
?? <tr>
???? <td?colspan="3">Top
???? <jdoc:include?type="modules"?name="top"?/>????</td>
?? </tr>
?? <tr>
???? <td?colspan="2">User?3
???? <jdoc:include?type="modules"?name="user3"?/>???</td>
???? <td?width="26%">User?4
???? <jdoc:include?type="modules"?name="user4"?/>????</td>
?? </tr>
?? <tr>
???? <td?colspan="3">User?5
???? <jdoc:include?type="modules"?name="breadcrumb"?/>?
??? </td>
?? </tr>
?? <tr>
???? <td?width="20%"?rowspan="2">Left
???? <?php?if($this->countModules('left'))?:??>
???????????????????????????? <jdoc:include?type="modules"?name="left"?style="rounded"?/>
???? <?php?endif;??></td>
???? <td?colspan="2"><table?width="100%"?border="0">
?????? <tr>
???????? <td>User?1
???????? <jdoc:include?type="modules"?name="user1"?style="xhtml"?/>????????</td>
???????? <td>User?2
???????? <jdoc:include?type="modules"?name="user2"?style="xhtml"?/>????????</td>
?????? </tr>
??????
???? </table></td>
?? </tr>
?? <tr>
???? <td?width="54%"><p> </p>
?????? <p> </p>
?????? <p> </p>
?????? <p>Component
?????? <jdoc:include?type="component"?/>
?????? </p>
?????? <p> </p>
???? <p> </p></td>
???? <td>Right
???? <jdoc:include?type="modules"?name="right"?style="xhtml"/>????</td>
?? </tr>
?? <tr>
???? <td?colspan="3">Foot
?????? <jdoc:include?type="modules"?name="footer"?style="xhtml"/></td>
?? </tr>
?? <tr>
???? <td?colspan="3"><jdoc:include?type="modules"?name="syndicate"?/></td>
?? </tr>
</table>
<jdoc:include?type="modules"?name="debug"?/>
</body>
</html>
---------------------------
3.สร้างไฟล์ templateDetails.xml ใน folder templates/my_template/
ในไฟล์นี้โค้ดตามนี้นะครับ
---------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>my_emplate</name>
<creationDate>01/01/2009</creationDate>
<author>Akkachai</author>
<authorEmail>myemail@e-mail.com</authorEmail>
<authorUrl>http://www.mindphp.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.1</version>
<description>simple template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</install>
---------------------------------------------------------------
4.สร้าง ไฟล์ template_thumbnail.png เก็๋บไว้ใน folder templates/my_template/
เสร็จแล้ว ให้ Login เข้าหน้า ACP
เข้าไปที่ Extensions > Template Manager
จะเห็น template ที่เราสร้างเพิ่มขึ้นมา ในที่นี้คือ my_template
ลองตั้งค่าให้ เป็น Default tempalte แล้ว ไปหน้าหน้าเว็บของเราดูครับ
จะได้ template ของเว็บที่เป็น แบบฉบับของเราเอง แล้ว
ต่อไปถ้าจะเอา template นี้ไปแจก เพื่อน ก็ให้ zip folder my_template แล้ว แจกเพื่อนๆ ได้เลยครับ |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น