Joo Mla Developer Manual

Thit k
template
joomla
1.Cn bn lm Template v Thit k Site

Tng quan v lm Template File dn trang Style Sheets trang inh kiu
Tng quan v lm Template

The Joomla Template system is amongst the easiest to learn in the Content Management System family. Templates are located in the /templates directory. The following shows a typical directory structure for a template: H thng Joomla Template nm trong nhng ci d hc nht ca h Content Management System /templates /basic_template /css template_css.css /images index.php template_thumbnail.png templateDetails.xml l tp hp ti thiu cc file bn cn to mt template. Lnh nhn i hi mi tn file phi c tn trng nh th. Ch rng trong khi khng c nh no hin th trong th mc /images, n l ni c trng bn nn bt c nh no ang h tr cho template ca bn, nh nh nn (backgrounds), banner, v.v. Chng ta hy xem k tng file trong .
index.php y l file gin trang template. template_css.css Css stylesheet cho template (trang nh kiu). templateDetails.xml File siu d liu (metadata) theo nh dng XML. template_thumbnail.png Mt mt mn hnh (screenshot) thu nh ca template, thng khong rng 140 pixel v cao 90 pixel.
File dn trang
Mc d file dn trang l mt file PHP, n c vit phn ln trong HTML vi ch vi tiu trnh (snippet) ca PHP. Bn khng cn phi l mt chuyn gia v PHP vit c mt file template. Tt c bn cn l hc ni no t cc kha mc (key hooks) vo c my template Joomla. Trong khung (framework) HTML bn t cc ca x nhn vo bn trong c s d liu ng sau website ca bn. c nhiu ca s nh in hnh c gi l cc Module v thng thng mt cai m rng hn (nh mt ca chnh) cho mt Component. Bn c khuyn khch vit cc template trong XHTML. Mc d c tranh lun liu XHML c l li i ca tng lai hay khng, n vn l mt nh dng XML chun rt tt, trong khi HTML l mt chun ri rc. Cc phin bn tng lai ca Joomla s gia ngy cng nhiu vo XML v l li i k tc kiu muby gi. File index.php cho dn trang 3 ct gn nh ging di y trong kiu sng sng: 1: <?php
2: $iso = explode( '=', _ISO ); 3: echo '<?xml version="1.0" encoding="' . $iso[1] . "\">\n"; 4: /** ensure this file is being included by a parent file */ 5: defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); 6: ?> 7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>"> 9: <head> 10: <title><?php echo $mosConfig_sitename; ?></title> 11: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> 12: <?php 13: if ($my->id) { 14: initEditor(); 15: } 16: ?> 17: <?php mosShowHead(); ?> 18: <link href="<?php echo $mosConfig_live_site;?>/templates/basic_template/css/template_css. css" rel="stylesheet" type="text/css" /> 19: </head> 20: <body> 21: <table cellspacing="0" cellpadding="5" border="0"> 22: <tr> 23: <td colspan="3"> 24: <?php echo $mosConfig_sitename; ?> 25: </td> 26: </tr> 27: <tr> 28: <td colspan="3"> 29: <?php mosLoadModules ( 'top', 1 ); ?> 30: </td> 31: </tr> 32: <tr> 33: <td width="20%" valign="top"> 34: <?php mosLoadModules ( 'left' ); ?> 35:</td> 36: <td width="60%" valign="top"> 37: <?php mosMainBody(); ?> 38:</td> 39: <td width="20%" valign="top"> 40: <?php mosLoadModules ( 'right' ); ?> 41: 42: 43: 44: 45: </td> </tr> <tr> <td colspan="3" valign="top"> <?php mosLoadModules ( 'bottom' ); ?>
46: </td> 47: </tr>
48: </table> 49: </body> 50: </html> Cng tm hiu nhng chc nng chnh. Chng ti gi d rng bn d bit cht t v cc trang HTML mc nh l cc th tag head, body, table, v.v. s b qua. Dng 1-3: nh ngha file l chun file XML. _ISO l mt hng s c bit nh ngha bng m k t c dng. N c nh ngha trong file ngng ng ca bn (language file). Dng 5: Ngn chn vic truy cp trc tip vo file ny. L iu cn thit khi bn thm dng ny vo template ca bn. Dng 7-8: Thit lp chun XHTML cho trang. Dng 10: In ra tn bin cu hnh Tn Site trong cp th tag title ng v m. Dng 11: _ISO c dng li nh ngha tp hp k t dng. Dng 12-16: $may->id l mt bin lnh (script) m s mang gi tr non-zero nu mt ngi dng ng nhp vo site ca bn. Nu mt ngi dng ng nhp th mt trnh son tho trc quan ch nh trc c np. Bn c th, nu bn mun, lun lun np trc trnh son tho, nhng ni chung mt khch nc danh s khng cn vit bi. N lu gi mt tp lnh tiu bn trn vic duyt site bnh thng. Dng 17: Chn nhiu khi siu d liu (metadata block). Dng 18: Ti CSS stylesheet (trang nh kiu). $mosConfig_live_site l mt bin cu hnh nm gi a ch URL tuyt i ca site bn. Dng 24: N in Tn Site trong mt bng (m rng ra 3 ct) Dng 29: Ti cc module bt k c xut bn trong v tr top. i s th hai, 1, ch rng cc module c cn dng theo chiu ngang. Dng 34: Ti cc module bt k c xut bn ti v tr left. Cc module ny s c hin th trong mt ct n. Dng 37: Ti component vo template ca bn. Component c thit lp bi a ch URL, v d, index.php?option=com_content s hin th ni dung (Content) Component trong vng ny. Dng 40: Ti bt k module no c xut bn trong v tr right. Cc module ny s hin th trong mt ct n. Dng 45: Ti module bt k c xut bn trong v tr bottom.
Style Sheets
CSS Stylesheets
PHI LM
The XML Setup File

PHI LM
The Thumbnail
Khi bn hon thnh template ca mnh, xut bn n vi Template Manager trong Administrator. Xem
trc site v ly mt mt mn hnh (screenshot). Nhp mt mn hnh vo gi son tho ha yu thch v ct ton ni dung ca cng xem trnh duyt. Gim kch thc nh xung khong 140 pixel chiu rng v 90 pixel chiu cao ri lu n theo nh dng PNG trong th mc template (n l /templates/basic_template).
2. Advanced Templating ( 4 items )

Tng quan Administrator Templates (cc template cho Administrator) Tham kho chc nng Cc chun template
Tng quan
Chng ny bao gm mt s chc nng cao cp hn nh n cc ct template v thit k template cho Administrator.
n cc module
i khi mun n cc module no nu khng c module c gn cho vng . Bn c th n cc vng ny bng cch dng hm mosCountModules. <?php if (mosCountModules( 'right' )) { ?> <td> <?php mosLoadModules( 'right' ); ?> </td> <?php } ?> Nu hm mosCountModules tr v gi tr ln hn 1, bng s c hin th. Nu khng c module c nh ngha cho v tr right trang lin quan ny, th s khng c hin th. y l mt k thut tt tng chiu ngang mn hnh trn cc trang no .
Dng cc hu t lp (Class Suffixes)

PHI LM
Administrator Templates cc template cho Administrator

Lc ny kiu mu cho cc Administrator Template vn ang hnh thnh. Mong rng c hai h thng template Site v Administrator s hp nht vo mt API chung trong tng lai. D vy, mt s ghi ch c to ra y tham kho.
H tr Module
Bn c th thm cc module vo cc Administrator template trc tip vi mosLoadAdminModule hoc trong cc nhm, ging nh cc site template, vi mosLoadAdminiModules. V d: <table width="100%" class="menubar" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="menubackgr"><?php mosLoadAdminModule( 'fullmenu' );?></td> <td class="menubackgr" align="right"> <div id="wrapper1"> <?php mosLoadAdminModules( 'header', 2 );?> </div> </td> <td class="menubackgr" align="right"> <a hreef="index2.php?option=logout style="color: #333333; font-weight: bold">Logout</a> <strong><?php echo $my->username;?>  </td> </tr> </table>
Hm mosLoadAdmiModule ly mt i s, tn ca module b i tin t mod_. u tin ca bng v d ti Full Menu module ( l mod_fullmenu). Trong th hai, tt c cc module c gn vo v tr header c ti. thng s th hai l mt thit lp kiu (style): 0 = u ra lin tc m cc module xut ra. 1 = hin th mi module trong mt Tab 2 = hin th mi module c bao bc trong mt th tag <div>
nh dng cho cc module header c thc hin hon ton thng qua CSS. V d, kiu wrapper1 c nh ngha nh sau: #wrapper1 div { border: 0px; margin: 0px; margin-left: auto; margin-right: auto; padding: 0px 5px 0px 5px; display: inline; } Cc module c bao trong cc th tag thun <div>. hin th cc module trong mt ct bn c th thm mt thuc tnh chiu rng v thay i thuc tnh hin th thch hp. Cc module sau y sn dng vi bn phn phi Joomla. mod_fullmenu Full Menu module hin th menu Administrator DHTML truyn thng. Cc Content Section v Component c thm ng vo phn tha ca menu c nh ngha tnh. mod_components Components module hin th mt danh sch y cc Component v cc mc con. N hu dng ni nhiu component c ci t v sc cha ca cc menu DHTML c m rng. mod_latest Lastest Items module hin th cc mc ni dung mi nht. mod_mosmsg Message module hin th thng ip gi trong URL. mod_online Users Online module hin th s lng thnh vin log in. mod_pathway Pathway module hin th mt ng dn Administrator. mod_popular Most Popular module hin th mt danh sch cc mc bi nhiu hit nht. mod_stats Menu Stats module trnh by mt s thng tin thng k v cc menu. mod_toolbar Toolbar module hin th biu tng toolbar. mod_unread Unread Messages module hin th s lng cc thng ip c nhn cha c. mod_logged Logged module hin th mt danh sch cc user login hin thi.
mod_quickicon Quick Icon module hin th mt mng cc biu thng shortcut.
The Control Panel

Control Panel cho Administrator l mt file ring bit, cpanel.php, n c bao gm trong template. N l mt file ring bit cho php ty bin vng ny theo cc site khc nhau v cc user thch c nhu cu khc bit cho nhng phn gi tr ca mn hnh c nh. File Control Panel khng cn c bao gm nhng nu n c bao gm th n s hin th mt s Administrator Module c publish trong v tr cpanel. File cpanel.php c th ch n gin nh v d di y: <?php /** * @version $ Id: cpanel.php,v 1.3 2004/08/12 08:29:21 rcastley Exp $ * @package Joomla * @copyright Copyright (C) 2005 Open Source Matters. All rights reserved. * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php * Joomla! is free software and parts of it may contain or be derived from the * GNU General Public License or other free or open source software licenses. * See COPYRIGHT.php for copyright notices and details. */ /** ensure this file is being included by a parent file */ defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <tableclass="adminform"> <tr> <td width="100%" valign="top"> <?php mosLoadAdminModules( 'cpanel', 1 ); ?> </td> </tr> </table>
File tham chiu hm v Tham chiu hm

Cc hm sau y ang sn dng cho cc nh pht trin template. mosLoadComponents C php: mosLoadComponents( $name ) Ti mt component. V d banners. Khng bao gm tin t com_. mosCountModules C php: mosCountModules( $position_name ) m s lng module c th hin th trn trang hin ti trong v tr position_name. mosLoadModules C php: mosLoadModules( $position_name [, $style] ) Hin th tt c cc module c gn vo v tr pssition_name cho trong hin ti. i s style l ty chn nhng c th l:
0 = (hin th mc nh) Cc Module c hin th mc nh trong mt ct. Sau y hin th mt v d u ra:  <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table>  1 = Cc module c hin th theo hng ngang. Mi module c xut ra trong mt ca bng bao bc. sau y hin th mt v d xut ra:  <table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td align="top">  <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table>  </td> <td align="top">  </td> </tr> </table> -1 = Cc module c hin th nh mt hng xut ra v khong c cc tiu . Sau dy hin th mt v d xut ra:
Module 1 OutputModule 2 OutputModule 3 Output

-2 =Cc mudule c hin th trong nh dng X-Joomla. Sau y hin th mt v d ca u ra:  <div class="moduletable[suffix]"> <h3>Module Title</h3> Module output </div>  -3 = Cc mudule c hin th trong mt nh dng cho php, v d, cc gc trn co dn c. Ty chn ny c gii thiu trong Mambo 4.5.2.1.  <div class="module[suffix]">
<div> <div> <div> <h3>Module Title</h3> Module output </div> </div> </div> </div>  Ch trong tt c c trng hp mt lp ty chn suffix c th c p dng thng qua cc thng s module. mosShowHead C php: <?php mosShowHead(); ?>
Tp hp nhiu th tag head bao gm th tag title v nhiu th tag meta.
mosMainBody C php: <?php mosMainBody(); ?> Bao gm u ra ca component c quyt nh bng gi tr ty chn trong URL.
Template Standards
Cc tiu chun (NHP) Nhn dng ngn ng trong th tag Head Yu t HTML phi bao gm thuc tnh lang (ngn ng). <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>"> <head> Ghi ch: t Joomla 1.1 tr i n s c hiu lu dng $_LANG->isoCode() th hin ca tham chiu _LANGUAGE.: ISO 639 language codes Identifying the primary language
Cung cp mt tm tt cc bng Yu t TABLE nn bao gm thuc tnh tm tt din t cu trc v mc ch ca n. <table summary="Hits on news compared to help"> <caption>Hits on news compared to help</caption>  </table> Dng thuc tnh tm tt cho cc bng dn trang l ty nh thit k nhng ni cung khng c khuyn khch, tham kho thm: Providing summary information Layout Tables
Vn bn lin kt To on vn bn lin kt khi chng la s liu trong ng cnh v cng phi chc chn rng cc a ch lin
kt khc nhau c vn bn khc nhau. V d, cho php dng click here. Tham kho: Link text
Kt hp cc iu khin biu mu vi yu t LABEL Yu t LABEL c th kt hp trc tip mt m t ca yu t biu mu vo chnh n. LABEL thuc tnh for phi ph hp duy nht vi thuc tnh id ca yu t biu mu. <label for="mod_login_username"> <?php echo $_LANG->_( '_USERNAME' ); ?> </label> <br /> <input id="mod_login_username" name="username" type="text" class="inputbox<?php echo $moduleclass_sfx; ?>" alt="username" size="10" /> Vi s kt hp ny, mt s trnh duyt cho php vic click nhn dnh c con tr cho vic iu khin. tham kho: Labeling form controls Forms - Section 508 Accessibility

Joo Mla Developer Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Joo Mla Developer Manual

Uploaded by

Copyright:

Available Formats

Thit k

1.Cn bn lm Template v Thit k Site

Tng quan v lm Template

46: </td> 47: </tr>

The XML Setup File

2. Advanced Templating ( 4 items )

Dng cc hu t lp (Class Suffixes)

Administrator Templates cc template cho Administrator

mod_quickicon Quick Icon module hin th mt mng cc biu thng shortcut.

The Control Panel

File tham chiu hm v Tham chiu hm

Module 1 OutputModule 2 OutputModule 3 Output

You might also like