joomla! template development

Cơ chế template

Joomla! 1.5

Bùi Huy ThắngBraveBits Co,. Ltd

Trong 45 phút tới...

1. Khái niệm cơ bản về template2. Chức năng nâng cao của template3. Nguồn thông tin tham khảo

Joomla! template cơ bản

Khái niệm cơ bản về template

Joomla! template trông như thế nào?

Cơ chế template trong Joomla

Thành phần trong Joomla! template

Nội dung của Module

Nội dung của Component

Cấu trúc files của 1 template

/my_template

/images

logo.png

template.css

component.php

index.php

templateDetails.xml

template_thumbnail.png

favicon.ico

Hãy thử tạo một template

Chuẩn bị các công cụ

Miễn phí

Có phí

Notepad++ Eclipse

Kiểm tra

Dreamweaver TopStyle

Firefox IE Chrome SafariOpera

Những file cần chú ý

/my_template

/images

logo.png

template.css

component.php

templateDetails.xml

template_thumbnail.png

favicon.ico

index.php

Tạo file templateDetails.xml

1. Khai báo metadata về file XML2. Khai báo metadata về template3. Khai báo danh sách file và folder

trong template4. Khai báo các vị trí cho module

Khai báo metadata về file XML

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template

1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

Khai báo metadata về template

<author>BraveBits Co,. Ltd</author>

<authorEmail>info@bravebits.vn</authorEmail>

<authorUrl>http://www.bravebits.vn</authorUrl>

<copyright>BraveBits Co,. Ltd</copyright><version>1.0</version><license>GNU/GPL</license><description>Demo template for Joomla! Day HCMC 2009</description>

Khai báo danh sách file và folder

<files>

<folder>images/</folder>

<filename>index.html</filename>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>favicon.ico</filename>

</files>

Khai báo các vị trí cho modules

<position>bottom</position>

</positions>

Tạo file index.php

1. Khai báo khởi đầu cho file index.php2. Khai báo nội dung trong thẻ

<head>3. Khai báo nội dung trong thẻ

<body>

Khai báo khởi đầu cho file index.php

<?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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>“ dir="<?php echo $this->direction; ?>”>

Khai báo nội dung trong thẻ <head>

<head>

<jdoc:include type="head" />

</head>

Khai báo nội dung trong thẻ <body>

<body>

<jdoc:include type="modules" name="top" />

<jdoc:include type=“message" />

<jdoc:include type="component" />

<jdoc:include type="modules" name="bottom" />

</body>

Thuộc tính cho template

Chức năng nâng cao

Thuộc tính cho template là gì?

Tại sao nên dùng thuộc tính?

1. Cho phép người dùng tuy biến template mà không cần sửa code

2. Tạo thêm nhiều tính năng cho template mà không làm quá trình sử dụng phức tạp hơn

3. Tiết kiệm thời gian để tùy biến template

Thêm một thuộc tính cho template

Thêm thuộc tính cho template

1. Khai báo về thuộc tính trong file templateDetails.xml

2. Lưu giá trị của thuộc tính trong file params.ini3. Tạo code PHP để xử lý giá trị của thuộc tính

Khai báo trong file templateDetails.xml

</param>

</params>

Lưu giá trị trong file params.ini

templateColor=blue

Tạo code PHP để xử lý giá trị

$tplColor = $this->params->get( 'templateColor' );

$this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor .'.css' );

Những định dạng thuộc tính có sẵn

1. Joomla! có sẵn 21 định dạng cho mọi trường hợp2. Trên thực tế hay dùng nhất là

Template override

Template override là gì?

Trước khi override

Sau khi override

Tại sao nên dùng override?

1. Có code HTML đặc biệt mà không cần động đến code của extension

2. Có được code HTML tối ưu hóa cho công cụ tìm kiếm

3. Tiết kiệm thời gian để tùy biến template

Mô hình MVC là gì?

Hiển thịnội dung

Nội dung

Điều khiển

Nội dung

Mô hình MVC trong Joomla!

Xem nội dung trên trang web

Joomla!

Phân tích yêu cầu và đưa về component phù

hợp(com_content)

Nội dung cần thiết được lấy từ DB và đưa

về View

Nội dung được hiển thị căn cứ vào View va

Layout

Views và Layout

Views Layout

Files của Views và Layout

com_content/ <- folder chứa file chung thuộc component

views/ <- folder chứa file thuộc phần View

article/ <- folder chứa file thuộc View một bài viết

tmpl/ <- folder chứa file layout

default.php <- file layout

form.php <- file layout

category/

Đối với Module

mod_mainmenu/ <- folder chứa file chung thuộc module

tmpl/ <- folder chứa file layout

default.php <- file layout

helper.php <- helper file với logic xử lý của module

mod_mainmenu.php <- file chính của module

mod_mainmenu.xml <- file thông tin về module

Tạo một override cho component

1. Tạo folder theo cấu trúc chuẩn trong template folder

2. Copy file View gốc của component vào folder mới được tạo

3. Thực hiện override trên file mới được copy4. Cập nhật thông tin trong file templateDetails.xml

Tạo folder theo cấu trúc chuẩn

YourTemplate/ <- folder template của bạn

html/ <- folder chứa các file overrides

com_content/ <- folder mang tên component sẽ bị override

article/ <- folder mang tên view sẽ bị override

com_user/

login/

Copy file View gốc của component

Copy/components/com_content/views/article/tmpl/default.php

vào/templates/your_template/html/com_content/article/default.php

Thực hiện override trên file mới

. . .<td class="contentheading<?php echo $this->escape($this-

>params->get('pageclass_sfx')); ?>" width="100%"><h2>

<?php echo $this->escape($this->article->title); ?> </h2>

</td>. . .

Override module cũng tương tự

Copy/components/mod_mainmenu/tmpl/default.php

vào/templates/your_template/html/mod_mainmenu/default.php

Bạn cần lưu ý

1. Bạn chỉ có thể override khi component hoặc module được thực hiện theo chuẩn MVC (có folder views/tmpl)

2. Bạn không thể override PDF và RSS feeds (phải chỉnh sửa file core)

3. Đường dẫn đến file override phải thật chính xác4. Override chỉ có giá trị cho template mà bạn đang

override 5. Lưu ý cập nhật file templateDetails.xml

Module Chrome

Module Chrome là gì?

Modules Layouts Chrome Template Browser

modChrome_xhtmlmodChrome_myst

jdoc:include type=“modules” name=“left” style=“xhtml mystyle”

HTMLCSSJSIMAGES

templates/system/html/modules.php

your_template/html/modules.php

Tại sao nên dùng module chrome?

1. Thể hiện module style cao cấp mà cơ chế có sẵn không đáp ứng được

2. Để có thể tối ưu hóa code HTML của module phù hợp cho nhu cầu nhất định

Module chrome khác gì Module override?

<div id="left"> <div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li id="current" class="active item1"> <li class="item2"> ...... Module HTML code khác ...... </div></div>

Module position container

Module chrome wrapper

Modulecontent / override

Những module chrome có sẵn trong Joomla!

<div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul></div>

<div class="module"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul> </div> </div> </div></div>

<ul class="menu"> <li>Menuitem 1</li> . . .</ul>

Tạo một module chrome

1. Tạo hoặc sửa file modules.php trong template folder html/

2. Tạo hàm với tên và tham số phù hợp3. Tạo code thực thi hàm để có module chrome

mong muốn

Tạo hoặc sửa file modules.php

YourTemplate/ <- folder template của bạn

html/ <- folder chứa các file overrides

modules.php <- file khai báo hàm cho module chrome

/templates/system/html/modules.php

Tạo hàm với tên và tham số phù hợp

<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?

>"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>

Tạo code thực thi hàm

<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?

>"> <?php if ($module->showtitle != 0) : ?> <h2><?php echo $module->title; ?></h2> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>

Nói thêm về jdoc:include

<jdoc:include type="modules" name="left" style="rounded" />

<jdoc:include type="module" name=“breadcrumb" style=“none" />

<jdoc:include type="modules" name="left" style="rounded mystyle" />

Gọi module position

Gọi một module đơn lẻ

Gọi nhiều chrome cùng một lúc

Những điều bạn cần biết

Những trang web dùng Joomla! ấn tượng

http://www.palgor-publicidade.com/http://www.spacemakerwardrobes.com.au/http://www.lonestar.com.au/http://www.childrenoftherevolution.com.au/http://www.cultureelcafe.nl/http://btl.bialystok.pl/http://www.waterandstone.com/http://www.55thinking.com/

Nguồn thông tin tham khảo

http://docs.joomla.org/Joomla!_1.5_Template_Tutorialhttp://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_templatehttp://docs.joomla.org/Tutorial:Understanding_Joomla!_templates

http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorialhttp://www.joomlashack.com/tutorials

joomla! template development

Education

template joomla

tutoriel création de template joomla! 1.6

1) joomla version 3.8.1: aktuelles template...

templates joomla! 2 · template creator ck template creator...

omnia responsive joomla template

joomla - guida ai template joomla15

huong dan phat trien template joomla

joomla! 1.5: istallazione e configurazione del template

sekilas joomla / instalasi joomla / template / konten ...1 |...

guida alla realizzazione di template per joomla 1

joomla! override : template for dummies

panduan dasar membuat template pada joomla

ember responsive joomla template

joomla template overrides mit uikit

Índice: entendendo o joomla! estrutura do joomla...

tc4 - website template voor joomla - scouting

tutoriel template joomla! 1.6

joomla 1.5 template design

galeria responsive joomla template

joomla template erstellen -...