Joomla! Template Development

Cơ chế templatetrongJoomla! 1.5 Bùi Huy Thắng BraveBits Co,. Ltd

Trong 45 phút tới... Khái niệm cơ bản về template Chức năng nâng cao của template Nguồn thông tin tham khảo

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

4 Cơ chế template trong Joomla Khái niệm cơ bản về template Joomla! template trông như thế nào?

5 Cơ chế template trong Joomla Khái niệm cơ bản về template Thành phần trong Joomla! template Nội dung của Module Nội dung của Component

6 Cơ chế template trong Joomla Khái niệm cơ bản về template Cấu trúc files của 1 template /my_template component.php logo.png /images index.php template.css templateDetails.xml /css template_thumbnail.png favicon.ico

7 Cơ chế template trong Joomla Khái niệm cơ bản về template Hãy thử tạo một template

8 Cơ chế template trong Joomla Khái niệm cơ bản về template Chuẩn bị các công cụ Miễn phí Notepad++ Eclipse Có phí TopStyle Dreamweaver Kiểm tra Firefox Chrome Safari Opera IE

9 Cơ chế template trong Joomla Khái niệm cơ bản về template Những file cần chú ý /my_template component.php logo.png /images index.php template.css templateDetails.xml /css template_thumbnail.png favicon.ico

10 Cơ chế template trong Joomla Khái niệm cơ bản về template Tạo file templateDetails.xml Khai báo metadata về file XML Khai báo metadata về template Khai báo danh sách file và folder trong template Khai báo các vị trí cho module

11 Cơ chế template trong Joomla Khái niệm cơ bản về template 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"> <install version="1.5" type="template">

12 Cơ chế template trong Joomla Khái niệm cơ bản về template Khai báo metadata về template <name>JDay2009</name> <creationDate>2009-10-31</creationDate> <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>

13 Cơ chế template trong Joomla Khái niệm cơ bản về template Khai báo danh sách file và folder <files> <folder>images/</folder> <folder>css/</folder> <filename>index.html</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> </files>

14 Cơ chế template trong Joomla Khái niệm cơ bản về template Khai báo các vị trí cho modules <positions> <position>top</position> <position>bottom</position> </positions>

15 Cơ chế template trong Joomla Khái niệm cơ bản về template Tạo file index.php Khai báo khởi đầu cho file index.php Khai báo nội dung trong thẻ <head> Khai báo nội dung trong thẻ <body>

16 Cơ chế template trong Joomla Khái niệm cơ bản về template 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; ?>”>

17 Cơ chế template trong Joomla Khái niệm cơ bản về template Khai báo nội dung trong thẻ <head> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" /> </head>

18 Cơ chế template trong Joomla Khái niệm cơ bản về template 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>

19 Cơ chế template trong Joomla Chức năng nâng cao Thuộc tính cho template

20 Cơ chế template trong Joomla Chức năng nâng cao Thuộc tính cho template là gì?

21 Cơ chế template trong Joomla Chức năng nâng cao Tại sao nên dùng thuộc tính? Cho phép người dùng tuy biến template mà không cần sửa code 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 Tiết kiệm thời gian để tùy biến template

22 Cơ chế template trong Joomla Chức năng nâng cao Thêm một thuộc tính cho template

23 Cơ chế template trong Joomla Chức năng nâng cao Thêm thuộc tính cho template Khai báo về thuộc tính trong file templateDetails.xml Lưu giá trị của thuộc tính trong file params.ini Tạo code PHP để xử lý giá trị của thuộc tính

24 Cơ chế template trong Joomla Chức năng nâng cao Khai báo trong file templateDetails.xml <params> <param name="templateColor" type="list" default="blue" label="Template Color" description="Choose the template color."> <option value="blue">Blue</option> <option value="red">Red</option> </param> ... </params>

25 Cơ chế template trong Joomla Chức năng nâng cao Lưu giá trị trong file params.ini templateColor=blue

26 Cơ chế template trong Joomla Chức năng nâng cao Tạo code PHP để xử lý giá trị <?php $tplColor = $this->params->get( 'templateColor' ); $this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor .'.css' ); ?>

27 Cơ chế template trong Joomla Chức năng nâng cao Những định dạng thuộc tính có sẵn Joomla! có sẵn 21 định dạng cho mọi trường hợp Trên thực tế hay dùng nhất là List Radio Text

28 Cơ chế template trong Joomla Chức năng nâng cao Template override

29 Cơ chế template trong Joomla Chức năng nâng cao Template override là gì? Trước khi override Sau khi override

30 Cơ chế template trong Joomla Chức năng nâng cao Tại sao nên dùng override? Có code HTML đặc biệt mà không cần động đến code của extension Có được code HTML tối ưu hóa cho công cụ tìm kiếm Tiết kiệm thời gian để tùy biến template

Cơ chế template trong Joomla Chức năng nâng cao Mô hình MVC là gì? Hiển thị nội dung Điều khiển Nội dung Nội dung 31

Cơ chế template trong Joomla Chức năng nâng cao Mô hình MVC trong Joomla! Xem nội dung trên trang web Joomla! Nội dung được hiển thị căn cứ vào View va Layout Nội dung cần thiết được lấy từ DB và đưa về View Phân tích yêu cầu và đưa về component phù hợp (com_content) 32

Cơ chế template trong Joomla Chức năng nâng cao Views và Layout Views Layout 33

Cơ chế template trong Joomla Chức năng nâng cao 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/ tmpl/ 34

Cơ chế template trong Joomla Chức năng nâng cao Đố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 35

Cơ chế template trong Joomla Chức năng nâng cao Tạo một override cho component 36

Cơ chế template trong Joomla Chức năng nâng cao Tạo một override cho component Tạo folder theo cấu trúc chuẩn trong template folder Copy file View gốc của component vào folder mới được tạo Thực hiện override trên file mới được copy Cập nhật thông tin trong file templateDetails.xml 37

Cơ chế template trong Joomla Chức năng nâng cao 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/ 38

Cơ chế template trong Joomla Chức năng nâng cao 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 39

Cơ chế template trong Joomla Chức năng nâng cao 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> . . . 40

Cơ chế template trong Joomla Chức năng nâng cao Override module cũng tương tự Copy /components/mod_mainmenu/tmpl/default.php vào /templates/your_template/html/mod_mainmenu/default.php 41

Cơ chế template trong Joomla Chức năng nâng cao Bạn cần lưu ý Bạn chỉ có thể override khi component hoặc module được thực hiện theo chuẩn MVC (có folder views/tmpl) Bạn không thể override PDF và RSS feeds (phải chỉnh sửa file core) Đường dẫn đến file override phải thật chính xác Override chỉ có giá trị cho template mà bạn đang override Lưu ý cập nhật file templateDetails.xml 42

Cơ chế template trong Joomla Chức năng nâng cao Module Chrome 43

Cơ chế template trong Joomla Chức năng nâng cao Module Chrome là gì? Browser Template Modules Layouts Chrome HTML CSS JS IMAGES jdoc:include type=“modules” name=“left” style=“xhtml mystyle” modChrome_xhtml modChrome_mystyle templates/system/html/modules.php your_template/html/modules.php 44

Cơ chế template trong Joomla Chức năng nâng cao Tại sao nên dùng module chrome? Thể hiện module style cao cấp mà cơ chế có sẵn không đáp ứng được Để có thể tối ưu hóa code HTML của module phù hợp cho nhu cầu nhất định 45

Cơ chế template trong Joomla Chức năng nâng cao 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 Module content / override 46

Cơ chế template trong Joomla Chức năng nâng cao Những module chrome có sẵn trong Joomla! <div class="module"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul> </div> </div> </div> </div> <div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul> </div> xhtml rounded <ul class="menu"> <li>Menuitem 1</li> . . . </ul> none 47

Cơ chế template trong Joomla Chức năng nâng cao Tạo một module chrome 48

Cơ chế template trong Joomla Chức năng nâng cao Tạo một module chrome Tạo hoặc sửa file modules.php trong template folder html/ Tạo hàm với tên và tham số phù hợp Tạo code thực thi hàm để có module chrome mong muốn 49

Cơ chế template trong Joomla Chức năng nâng cao 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 50

Cơ chế template trong Joomla Chức năng nâng cao Tạo hàm với tên và tham số phù hợp <?phpfunction 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; } ?> 51

Cơ chế template trong Joomla Chức năng nâng cao Tạo code thực thi hàm <?phpfunction 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; } ?> 52

Cơ chế template trong Joomla Chức năng nâng cao Nói thêm về jdoc:include Gọi module position <jdoc:include type="modules"name="left"style="rounded" /> Gọi một module đơn lẻ <jdoc:include type="module"name=“breadcrumb"style=“none" /> Gọi nhiều chrome cùng một lúc <jdoc:include type="modules"name="left"style="rounded mystyle" /> 53

Cơ chế template trong Joomla Chức năng nâng cao Những điều bạn cần biết 54

Cơ chế template trong Joomla Chức năng nâng cao 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/ 55

Cơ chế template trong Joomla Chức năng nâng cao Nguồn thông tin tham khảo http://docs.joomla.org/Joomla!_1.5_Template_Tutorial http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template http://docs.joomla.org/Tutorial:Understanding_Joomla!_templates http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorial http://www.joomlashack.com/tutorials 56

Joomla! Template Development

Recommended

Recommended

More Related Content

Similar to Joomla! Template Development

Similar to Joomla! Template Development (20)

More from JoomlaShine

More from JoomlaShine (20)

Recently uploaded

Recently uploaded (12)

Joomla! Template Development