Cùng nhau nghịch Temp của Joomla =) Part 1
Kinh nghiệm tàm tạm đúc kết lại sau một thời gian chọc ngoáy thằng Joomla, giờ vác ra viết lại để dành chơi. Tất nhiên là không thể bằng các bậc cao thủ zdồi
Bài viết áp dụng cho Joomla ver 1.5.x trở lên.
Hy vọng sau bài viết này, các bạn có thể tự làm cho mình một temp đơn giản với Joomla.
Quay trở lại việc giao diện cho các website, đôi khi ta có thể tìm được temp ưng í với mình và chỉ cần redesign lại được là ngon lành cành đào, nhưng cũng đôi khi, khách hàng muốn mới lạ và phá cách … đến lúc này chỉ còn nước bật PTS lên mà bôi vẽ rồi cắt ghép thôi
Về cấu trúc của 1 temp sẽ bao gồm:
templates/tên_temp/
tên_temp/css
tên_temp/images/
index.php
templateDetails.xml
Trong tên_temp/css có file template.css để chứa css giao diện của bạn.
Trước tiên, bạn cần định hình rõ xem temp của mình sẽ cắt như thế nào, chia bố cục trên dưới trái phải ra sao.
Ở đây tôi dùng temp đơn giản nhất ở dạng “1 trên – 1 dưới – trái – giữa – phải” ( top – footer – left – content – right ) Đây là cấu trúc temp thường gặp nhất, hay còn được biết đến với tên cấu trúc “3 cột”.
File index.php sẽ có cấu trúc như sau:
<?php
/*
Tên của Temp – Joomla template
@version 1.0.0
@copyright (C) 2010 by blah blah
*/
?>
<!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; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/tên_temp/css/template.css” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”header”><jdoc:include type=”modules” name=”top” /> </div>
<div id=”banner”><jdoc:include type=”modules” name=”banner” /> </div>
<div id=”sidebar_left” class=”float”><jdoc:include type=”modules” name=”left” /></div>
<div id=”sidebar_right” class=”float”><jdoc:include type=”modules” name=”right” /></div>
<div id=”content” class=”float”><jdoc:include type=”component” /></div>
<div id=”footer” class=”clear”><jdoc:include type=”modules” name=”footer” /></div>
</div>
</body>
</html>
Ta khai báo một div container chứa toàn bộ các div “con” ở trong. Các div con sẽ bao gồm “trên dưới trái phải A B A B …. bất tử 30 lần Rambo :X ” (chết nhầm) … đại khái có những vị trí nào trên site thì khai báo hết vào trong này.
Vậy là xong file index.php, giờ ta chuyển đến file templateDetails.xml
Đây là file khai báo các thông tin của temp như tên temp, tác giả, thời gian khởi tạo, các position trong temp …blah blah.
Nội dung của file này sẽ có cấu trúc chung như sau:
<?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”>
<name>Nhét tên vào</name>
<creationDate>04/2010</creationDate>
<author>NamBH</author>
<authorEmail>buihoainam@gmail.com</authorEmail>
<authorUrl>http://www.nambh.net</authorUrl>
<copyright>Blah blah</copyright>
<license>GNU/GPL hoặc bất cứ cái gì bạn ….thích</license>
<version>1.0.0</version>
<description>Blah blah Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>banner</position>
</positions>
</install>
XML được cái dễ nhìn và dễ đọc nên file này chắc ai cũng hiểu zdồi. Có bao nhiêu position thì khai báo vào cho đủ. Càng nhiều thì càng dễ chia dữ liệu và càng ….rối rắm
Sắp mất điện nên post tạm phần 1, phần 2 sẽ bao gồm css và những tips loanh quoanh khi làm temp mà tôi rút kinh nguyệt trong quá trình tập tọe chọc phá temp của Joomla :P
Hớ hớ