การออกแบบ joomla 1.5 template ตอนที่ 2

Design Articles

Random Articles

Template Design

( 1 Vote )

เขียนโดย Administrator

วันศุกร์ที่ 08 มกราคม 2010 เวลา 22:13 น.

มาต่อตอนที่ 2 กันดีกว่า ในตอนแรกกล่าวถึงการร่างโครงร่างและวางโครงสร้างให้เห็นว่า template มีหน้าตาอย่างไร โดยยังไม่ใส่คำสั่งสำหรับโหลดโมดูล และทำการกำหนดค่า css ให้ได้ขนาดโครงสร้างตามต้องการ

จะเห็นว่าการกำหนดหน้าตาของ template นั้น ขึ้นอยู่กับการออกแบบใน css เป็นส่วนใหญ่ คราวนี้ก็ทำการใส่คำสั่งสำหรับโหลดโมดูล ให้กับ template

คำสั่งที่จะใช้ jdoc:include

รูปแบบ Component

<jdoc:include type="component" />

องค์ประกอบนี้ควรจะปรากฏในองค์ประกอบ <body> ของ template เพื่อแสดงเนื้อหา/บทความของ เว็บไซต์

รูปแบบ Head

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

จะเห็นว่าในไฟล์ index.php หรือในเกือบทุก ๆ ไฟล์ของ joomla จะมีบรรทัดนี้อยู่บนส่วนต้นของหน้าโค๊ด มีไว้ทำอะไร มีไว้เพื่อป้องกันการรันไฟล์นี้จากเบราเซอร์โดยตรง
เช่น เมื่อคุณพิมพ์ URL ในเบราเซอร์เป็น http://www.youdomain.com/templates/youtemplate/index.php จะขึ้นหน้าขาว ๆ แล้วมีคำว่า Restricted access อยู่เท่านั้น
เหตุผลด้านความปลอดภัยนั้นเอง

และส่วนที่จะแสดงผลใน เบราเซอร์

องค์ประกอบนี้ควรจะปรากฏในองค์ประกอบ <head> ของ template เพื่อแสดงลักษณะสคริปต์และองค์ประกอบของ meta ที่ใช้เชื่อมโยงกับเพจปัจจุบัน

<jdoc:include type="head" />

รูปแบบ Installation

<jdoc:include type="installation" />

องค์ประกอบนี้จะใช้เฉพาะในการติดตั้ง joomla template ใช้แสดงเนื้อหาหลักขั้นตอนการติดตั้ง

รูปแบบ Message

Message

มีไว้แจ้งเตือนแบบข้อความจากระบบเมื่อมีการทำอะไรบางอย่างกับระบบ เช่น ล็อคอินผิดพลาด, ลงทะเบียนเสร็จแล้ว, ลงทะเบียนไม่ถูกต้อง ฯลฯ

<jdoc:include type="message" />

องค์ประกอบนี้ควรจะปรากฏในองค์ประกอบ <body> ของ template เพื่อใช้แสดงข้อความผิดพลาดและข้อความในคำขออื่น ๆ สไตล์ CSS สำหรับข้อความ ระบบสามารถพบได้ใน template\system\css\system.css

รูปแบบ Module (สังเกตุ module ไม่มี "s" )

<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="module" name="menu" />
<jdoc:include type="module" name="submenu" style="rounded" id="submenu-box" />

องค์ประกอบนี้แสดงผลโมดูลเดียว โดยอ้างอิงชื่อโมดูล

รูปแบบ Modules สังเกตุ modules มี "s" )

<jdoc:include type="modules" name="debug" />
<jdoc:include type="modules" name="icon" />
<jdoc:include type="modules" name="left" style="rounded" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="status"  />
<jdoc:include type="modules" name="syndicate" />
<jdoc:include type="modules" name="title" />
<jdoc:include type="modules" name="toolbar" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />

คำสั่งแรกโมดูลมาแสดงยังพื้นที่นั้น ๆ แยกเป็นพื้นที่ ๆ แตกต่างกันไปตาม template และตำแหน่งที่กำหนดในไฟล์ templatedetails.xml การใช้งาน jdoc:include's

name="[template position name]"

ทำการแทรกตำแหน่งโมดูล (module position) 1 ตำแหน่ง

<?php if ($this->countModules('user1')) : ?>
<div id="user1">   ใช้ div ครอบไว้ ปรับแต่งค่า id ของ div ที่ template.css
    <jdoc:include type="modules" name="user1" style="xhtml" />
</div><!---end user1-->
<?php endif; ?>

วางตำแหน่งโมดูล (module position) 2 หรือ 3 ตำแหน่ง (ศึกษาเรื่อง countModules เิ่พิ่มเติมที่นี่)

<?php if ($this->countModules('user2 or user3')) : ?>
<?php if ($this->countModules('user2')) : ?>
<div id="user2">
    <jdoc:include type="modules" name="user2" style="xhtml" />
</div><!---end user2-->
 
 
 
<div id="user3">
    <jdoc:include type="modules" name="user3" style="xhtml" />
</div><!---end user3-->

คราวนี้ผมก็ใส่ ตำแหน่งโมดูล (module position) ตามรูปแบบที่ได้ร่างไว้ใน

 
<!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="/joomla//templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/joomla//templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla//templates/
/css/template.css" type="text/css" />
</head>
<body>
 
<a name="top"></a><!--anchor for top-->
<div id="mainbody"><!---start mainbody-->
 
 
<div id="user1">
    <jdoc:include type="modules" name="user1" style="xhtml" />
</div><!---end user1-->
 
 
 
<div id="header">
    <jdoc:include type="modules" name="header" style="xhtml" />
</div><!---end header-->
 
 
 
 
<div id="user2">
    <jdoc:include type="modules" name="user2" style="xhtml" />
</div><!---end user2-->
 
 
 
<div id="user3">
    <jdoc:include type="modules" name="user3" style="xhtml" />
</div><!---end user3-->
 
 
 
    <div id="content">
                <jdoc:include type="message" />
                     
                            <jdoc:include type="component" />
                     
    </div><!---end content-->
 
<div id="breadcrumbs">
    <jdoc:include type="modules" name="breadcrumb" style="raw" />
</div><!---end breadcrumbs-->
 
 
    
<div id="user4">
    <jdoc:include type="modules" name="user4" style="xhtml" />
</div><!---end user4-->
    
 
    
<div id="user5">
    <jdoc:include type="modules" name="user5" style="xhtml" />
</div><!---end user5-->
    
 
    
<div id="user6">
    <jdoc:include type="modules" name="user6" style="xhtml" />
</div><!---end user6-->
    
    
 
 
<div id="footer1">
<div id="user7">
    <jdoc:include type="modules" name="user7" style="xhtml" />
</div><!---end user7-->
 
<div id="footer">
    <jdoc:include type="modules" name="footer" style="none" />
</div><!---end footer-->
 
</div>
</div><!---end mainbody-->
<div id="debug">
    <jdoc:include type="modules" name="debug" style="none" />
</div><!---end footer-->
 
</body>
</html>

template.css

/*////////// 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 auto;
 height: 0 auto;
 float: left;
}
 
#user5 {
 /*    border: 1px solid #660000;*/
 margin: 5px auto;
 height: 0 auto;
 float: left;
}
 
#user6 {
    /*border: 1px solid #660000;*/
 margin: 5px auto;
    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 //////////*/

ส่วนค่า css ก็ปรับแต่งเรียบร้อยแล้วในตอนที่ 1 ก็ไม่ต้องปรับอะไรมากมายเพียงแค่เอาเส้นออกแค่นั้นเอง /*border: 1px solid #cc0033; */ โดยใช้แท็กคอมเม้นต์ปิดไว้ คราวนี้ก็ลอง preview ดู เข้าท่าแค่ไหน

joomla template