Tai Lieu Huong Dan Thiet Ke Templates Cho Joomla

template
Thit k
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>
37: <?php mosMainBody(); ?>
38:</td>
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

Tai Lieu Huong Dan Thiet Ke Templates Cho Joomla

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

Tai Lieu Huong Dan Thiet Ke Templates Cho Joomla

Uploaded by

Copyright:

Available Formats

template

1.Cn bn lm Template v Thit k Site

Tng quan v lm Template

2: $iso = explode( '=', _ISO );

The XML Setup File

trc site v ly mt mt mn hnh (screenshot). Nhp mt mn hnh vo gi son tho ha yu thch

2. Advanced Templating ( 4 items )

Dng cc hu t lp (Class Suffixes)

Administrator Templates cc template cho Administrator

Hm mosLoadAdmiModule ly mt i s, tn ca module b i tin t mod_. u tin ca bng v d ti

0 = u ra lin tc m cc module xut ra.

The Control Panel

File tham chiu hm v Tham chiu hm

0 = (hin th mc nh) Cc Module c hin th mc nh trong mt ct. Sau y hin th mt v d u

Module 1 OutputModule 2 OutputModule 3 Output

ISO 639 language codes

Providing summary information

Kt hp cc iu khin biu mu vi yu t LABEL

Labeling form controls

You might also like