เอาล่ะ สั่งสมประสบการณ์มาพอสมควร joomla แบบเบสิกคงจะได้กันหมดแล้ว คราวนี้มาพูดถึงเรื่องการออกแบบ joomla 1.5 template กันดีกว่า ความจริงผมก็ไม่ได้เก่งกาจอะไรนักหนานะครับเพียงแต่ได้ใช้งาน joomla บ่อย มาก ๆ ตั้งแต่ก่อนเริ่มที่จะมาเป็น joomla ด้วยซ้ำ เลยมีความชำนาญสักหน่อย แต่เรื่องเขียนโค๊ดโปรแกรม ของผมนี่คงจะไม่ค่อยได้เรื่องเท่าไหร่ อาศัยแบบงู ๆ ปลา ๆ ไปเรื่อย ๆ จะให้เขียนโค๊ดแบบผู้ที่เขาเรียนมาโดยตรงคงไม่ได้ครับ ผมเองก็ไม่ได้เรียนมาโดยตรงทางนี้ซะด้วย อาศัยศึกษาด้วยตนเอง มีเวลาว่างเมื่อไหร่ก็จะมานั่งศึกษากัน ส่วนใหญ่ก็จะไม่ค่อยว่างมานั่งศึกษาการเขียนโปรแกรมอย่างจริงจัง เพราะต้องทำงานหาเงินด้วยอ่ะ พอดีได้หนังสือมาเล่มหนึ่ง เป็นของต่างประเทศฝรั่งเขียนเรื่องการออกแบบ joomla 1.5 template design ก็เลยนั่งอ่าน ๆ ก็ อ๋อ ๆ เออ มันเป็นอย่างนี้ ต้องเอาตรงนี้มาใส่ตรงนั้น เอาตรงนั้นไปใส่จะเป็นอย่างนี้ อืม ๆ พอได้ ๆ ก็เลยเอามาเล่าสู่กันฟัง เอาล่ะโม้มาก็มาก มาดูก่อนควรจะมีพื้นฐานอะไรบ้างสำหรับการที่จะออกแบบ joomla 1.5 template ได้นี่ ไม่ต้องเอาเก่งนะครับ (หรือจะเก่งก็ได้ไม่ว่ากัน) อันที่จริงจะได้คุยกันรู้เรื่องไงครับว่าที่ผมสื่อไปนี้มันคืออะไร

 

พื้นฐานที่ควรมี

1.ความรู้พื้นฐานด้าน HTML, XHTML (เอกสารที่เกี่ยวกับโค๊ด HTML, XHTML หาอ่านได้ที่นี่)

2.ความรู้พื้นฐานด้าน php

3.ความรู้พื้นฐานด้าน CSS (เอกสารที่เกี่ยวกับโค๊ด css หาอ่านได้ที่นี่)

แนะนำเว็บศึกษาเรื่อง css ครับ เว็บนี้แจ่มมากอ่านแล้วเข้าใจดี http://www.divland.com/blog/

 

4.การใช้งานโปรแกรม Dreamweaver หรือโปรแกรมอื่น ๆ สำหรับออกแบบเว็บเพจ

5.การใช้งานโปรแกรม editor สำหรับแก้ไขโค๊ด เช่น edit plus, rapid CSS

6.การใช้งานโปรแกรม photo shop ใช้ในการตกแต่งรูปภาพ

 

โปรแกรมที่จำเป็นต้องใช้

1.edit plus, rapid CSS

2.photoshop

3.Macromedia Dreamweaver (เดี๋ยวนี้เขาเปลี่ยนเป็น adobe แล้วมั้ง)

4.โปรแกรมเบราเซอร์ Mozilla Firefox, Internet Explorer 6, 7, 8 เอาไว้ทดสอบ หน้าเว็บเพจ

 

ก่อนอื่นก็ต้องมีไฟล์พื้นฐานที่ต้องมีก่อนก็คือ

 

 

 

Joomla 1.5 Core Template Files
– templateName/index.php
– templateName/templateDetails.xml
– templateName/template_thumbnail.png
– templateName/images/… /* สำหรับเก็บไฟล์รูปที่ใช้กับ template
– templateName/css/… /* สำหรับเก็บไฟล์ css

 

 

ไฟล์ template_thumbnail.png สำหรับแสดงรูปย่อแบบนี้ครับ

 

โค๊ดพื้นฐานที่ต้องมีในไฟล์ index.php

View source
<?php
defined('_JEXEC') or die('Restricted access');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="language; ?>" lang="language; ?>" >
<head>
<jdoc:include type="head" />
 
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/
/css/template.css" type="text/css" />
</head>
<body>
 
</body>
</html>

Template Modules (& code to call modules) สำหรับเรียกวางตำแหน่งโมดูล

View source
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user3" style="xhtml" />
<jdoc:include type="modules" name="user4" style="xthml" />
<jdoc:include type="modules" name="user5" style="xthml" />
<jdoc:include type="modules" name="user6" style="xthml" />
<jdoc:include type="modules" name="user7" style="xthml" />
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> <!-- Main Content -->
<jdoc:include type="modules" name="footer" style="none" />
<jdoc:include type="modules" name="debug" style="none" />

 

การใส่คำสั่งโหลดโมดูลก็จะเป็นประมาณนี้

View source
<?php if ($this->countModules('user1')) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>

 

templateDetails.xml

View source
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5.1" type="template">
<name>templateName</name>
<creationDate>Month Date Year</creationDate>
<author>Authors Name</author>
<copyright>GPL</copyright>
<authorEmail>name@mySite.com</authorEmail>
<authorUrl>www.mySite.ca</authorUrl>
<version>1.0</version>
<description>Brief description of template design here</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/logo.gif</filename>
<filename>images/header.jpg</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
</install>

 

สำหรับตรวจสอบไฟล์และบอกพาธสำหรับติดตั้ง

View source
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/logo.gif</filename>
<filename>images/header.jpg</filename>
<filename>css/template.css</filename>
</files>

ส่วนกำหนดตำแหน่งโมดูลต่าง ๆ

View source
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
</install>

เริ่มแรกก็มาร่างแบบกันก่อนว่าต้องการโมดูลในตำแหน่งไหนบ้าง ใช้ร่างง่าย ๆ ในกระดาษก็ได้ครับ

อย่างของผมก็ต้องการ การวางตำแหน่งโมดูลแบบนี้ (อาจจะบูด ๆ เบี้ยว ๆ ไปหน่อย)

 

 

ก่อนอื่นก็วางแบบโครงสร้างก่อนโดยใช้ <div> ยังไม่ต้องใส่คำสั่งโหลดโมดูล แล้วใช้ css เป็นตัวกำหนดรูปแบบของ <div>

View source
<?php
defined('_JEXEC') or die('Restricted access');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="
">
<head>
<jdoc:include type="head" />
 
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/
/css/template.css" type="text/css" />
</head>
<body>
 
<a name="top"></a><!--anchor for top-->
<div id="mainbody"><!---start mainbody-->
 
<div id="user1">
 <em> พื้นที่สำหรับแสดงuser1</em>
</div><!---end user1-->
 
<div id="header">
 <em> พื้นที่สำหรับแสดง head</em>
</div><!---end header-->
 
<div id="user2">
 <em>user2</em>
</div><!---end user2-->
 
<div id="user3">
 <em>user3</em>
</div><!---end user3-->
 
 
<div id="content">
 <em>main content พื้นที่สำหรับแสดงบทความในหน้า front page</em>
</div><!---end content-->
 
<div id="breadcrumbs">
 <em>breadcrumbs</em>
</div><!---end breadcrumbs-->
 
<div id="user4">
 <em>user4</em>
</div><!---end user4-->
 
<div id="user5">
 <em>user5</em>
</div><!---end user5-->
 
<div id="user6">
 <em>user6</em>
</div><!---end user6-->
 
<div id="footer1">
<div id="user7">
 <em>user7</em>
</div><!---end user7-->
 
<div id="footer">
 <em>footer</em>
</div><!---end footer-->
 
</div>
</div><!---end mainbody-->
<div id="debug">
 <em>debug</em>
</div><!---end footer-->
 
</body>
</html>
ไฟล์ template.css แบบวางโครงร่างไว้ก่อน  


View source
/*////////// GENERAL //////////*/
body {
  border: 1px solid #008080; อันนี้จะมีในทุกบรรทัดคำสั่งเพื่อให้แสดงแสดงให้เห็นขอบเขตของข้อมูล
  margin: 0 auto;
  min-width: 750px;
  max-width: 960px;
  height: 0 auto;
}
 
/*////////// TYPEOGRAPHY //////////*/
h1, h4 {
   font-family: Georgia, Times, serif;
}
 
h2, h3{
 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
h1 {
  font-size: 32px;
}
 
h2 {
  font-size: 22px;
}
 
h3 {
  font-size: 16px;
}
 
h4 {
  font-size: 14px;
}
 
p {
  margin-bottom: 18px;
}
 
 
a {
  text-decoration: none;
  font-weight: bold;
}
 
a:hover {
  text-decoration: underline;
}
 
a:visited {}
 
/*////////// HEADERS //////////*/
#header {
  border: 1px solid #000000;
  padding: 3px;
  margin: 5px;
  height: 0 auto;
 
}
 
/*////////// CONTENT //////////*/
#content {
  border: 1px solid #FF00FF;
  margin-top: auto;
      margin: 2%
 
}
 
#mainbody {
  border: 1px solid #ff0000;
  margin: 5px;
  /*padding-top: 250px;*/
 
}
 
#user1 {
  border: 1px solid #00ffff;
  margin: 5px;
}
 
#user2 {
    border: 1px solid #ff0000;
  margin: 5%;
  min-width: 375px;
  max-width: 480px;
  height: 0 auto;
  float: left;
    margin-bottom: auto;
}
 
#user3 {
  border: 1px solid #ff0000;
  margin: 5%;
  min-width: 375px;
  max-width: 480px;
  height: 0 auto;
  float: left;
    margin-bottom: auto;
}
 
#user4 {
  border: 1px solid #660000;
    margin: 5px;
    height: 0 auto;
    float: left;
}
 
#user5 {
  border: 1px solid #660000;
    margin: 5px;
    height: 0 auto;
    float: left;
}
 
#user6 {
  border: 1px solid #660000;
    margin: 5px;
  height: 0 auto;
    float: left;
 
}
 
#user7 {
  border: 1px solid #009900;
    margin: 10px;
  height: 10%;
 
}
 
#breadcrumbs {
  border: 1px solid #CC0033;
    height: 33px;
    margin: 5px;
    padding-left: 32px;
    padding-top: 8px;
    background: url(../images/homei.gif) 0 0 no-repeat;
}
 
/*////////// SIDEBARS //////////*/
 
/*////////// NAV //////////*/
 
 
/*////////// FORMS //////////*/
 
 
/*////////// FOOTER //////////*/
#footer {
  border: 1px solid #009900;
    margin: 10px;
  height: 10%;
 
}
 
#footer1 {
  border: 1px solid #009900;
    margin: 5px;
    margin-top: 50px
}
 
#footer2 {
  border: 1px solid #000000;
    margin: 5px;
 
}
 
#debug {
  border: 1px solid #cc0033;
    clear:both;
}
 
/*////////// IMAGES //////////*/

ก็จะได้หน้าตาแบบนี้

โปรดติดตามตอนที่ 2

สามารถดาวน์โหลดไฟล์ template ตามแบบของบทความได้ที่นี่

สามารถดาวน์โหลดไฟล์ template ตามแบบของบทความได้ที่นี่