Thêm một vị trí module mới vào template

Đối với Joomla 1.5.x

Mở file chứa template của bạn chẳng hạn "\templates\vinaora\index.php", xác định chỗ
mà bạn muốn thêm một vị trí module mới và đặt vào đoạn mã sau:

<?php if ($this->countModules('vinaora_new_position')) : ?>

<div>
<jdoc:include type="modules" name="vinaora_new_position"
style="xhtml" />
</div>
<?php endif; ?>

Tiếp theo, mở file "\templates\vinaora\templateDetails.xml", thêm vào mục

<positions></positions> đoạn mã sau:

<position>vinaora_new_position</position>

Trong đó thuộc tính "style" có thể là: rounded, none, table, horz, xhtml, outline

Đối với Joomla 1.0.x

Mở file chứa template của bạn chẳng hạn "\templates\vinaora\index.php", xác định chỗ
mà bạn muốn thêm một vị trí module mới và đặt vào đoạn mã sau:

<?php if (mosCountModules('vinaora_new_position')>0) { ?>

<?php mosLoadModules('vinaora_new_position',-2); ?>
<?php } ?>

Trong đó tham số thứ hai của hàm mosLoadModules là một trong 5 số nguyên: 1 =
horizontal, 0 = normal, -1 = raw, -2 = XHTML và -3 = extra divs.

Tham khảo thêm:

• What is module chrome?
• Applying custom module chrome
• mosLoadModules

Keyword:
• module, vị trí, template
Phần 1: Căn bản về vị trí các module và component
Trước khi tìm hiểu về template Joomla chúng ta cần phải phân biệt rõ sự khác nhau giữa
2 khái niệm module và component và vị trí xuất hiện của chúng trong template. Trong
hình vẽ sau, bạn hãy chú ý các khối được đánh dấu màu da cam. Chúng mô tả các vị trí
của module và component mà template này cung cấp.

Chú ý: Trên một trang bất kỳ các module có thể có nhiều (cả về số lượng và vị trí) hoặc
không có module nào nhưng luôn có duy nhất một component (trừ 1 vài trường hợp đặc
biệt)

Làm thế nào để biết template đang sử dụng cho phép những vị trí nào? Thật đơn
giản, bạn chỉ cần đăng nhập vào trang quản trị (VD: http://vinaora.com/administrator).
Sau đó, mở menu Extension >>> Modules Manager bạn sẽ trông thấy các vị trí có thể
dùng được trong danh sách có dòng chữ "Select Position" như hình dưới đây
Chúng ta hãy quay trở lại trang chủ Joomla và bạn sẽ nhận thấy rằng, các module,
component đã được bố trí như sau:

Keyword:
• joomla, template
• thiết kế, trang chủ, vị trí
Phần 2: Tìm hiểu về vị trí của các module khi viết mã
Chúng ta cần xem xét những đoạn mã nào đã tạo ra các vị trí dành cho module và
component. Bạn hãy quan sát hình sau:

Chú ý: Tất cả các module bên trái đều sử dụng duy nhật một đoạn mã có dạng như sau:
<jdoc: include type="modules" name="left" style="...." />

Chú ý: Tất cả các module bên phải đều sử dụng duy nhật một đoạn mã sau:
<jdoc: include type="modules" name="right" style="...." />

Keyword:
• joomla, template, module
• thiết kế, trang chủ

Phần 3: Tạo những file cơ bản cho template

Bước 3.1:
Mở thư mục [Joomla]/templates và tạo một thư mục có tên là "vinaora_template"
Bước 3.2:
Mở thư mục "vinaora_template" vừa tạo ở trên và tạo 2 file có tên là: "index.php" và
"templateDetails.xml"

Bước 3.3:
Mở file "templateDetails.xml" và gõ vào nội dung sau:
Hoặc copy đoạn mã sau:

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">
<name>vinaora_template</name>
<version>1.0.0</version>
<creationDate>12/12/07</creationDate>
<author>VINAORA</author>
<authorEmail>admin.vinaora.com</authorEmail>
<authorUrl> http://vinaora.com </authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<description>TPL_VINAORA_TEMPLATE</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
 <position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</install>

Bước 3.4:
Mở file "index.php" và gõ vào nội dung sau:

Keyword:
• joomla, template
• thiết kế, trang chủ

Phần 4: Kích hoạt Template mới tạo

Để kích hoạt Template vừa tạo mới, bạn thực hiện các bước sau:

Bước 4.1: Đăng nhập vào trang quản trị (VD: http://vinaora.com/administrator)

Bước 4.2: Mở menu "Extensions" >>> "Template Manager"

Bước 4.3: Chọn template "vinaora_template" mà bạn mới tạo

Bước 4.4: Nhấn nút [Default] trên thanh công cụ để kích hoạt "vinaora_template" làm
template mặc định.

Bước 4.5: Mở trang chủ và kiểm tra xem template mới đã được nạp chưa.

Keyword:
• joomla, template
• thiết kế, trang chủ

Phần 5: Tạo Layout

Bước 5.1: Phác thảo trên giấy về bố cục (layout) của

template.
Giả sử chúng ta có giao diện với layout như sau:

Bước 5.2: Viết mã HTML để tạo layout nói trên.

Trước đây người ta hay sử dụng kỹ thuật dàn trang bằng bảng (dùng thẻ <table>). Việc
dàn trang bằng bảng có ưu điểm là dễ làm nhưng lại có nhược điểm là tốc độ nạp trang
chậm và không tối ưu cho các máy tìm kiếm. Do vậy ngày nay chúng ta sử dụng kỹ thuật
dàn trang bằng thẻ <div>.

Mở file "index.php" của template "vinaora_template" và gõ vào nội dung sau:

Hoặc copy đoạn mã sau:

<html>
<head>
<title>WELCOME TO VINAORA.COM</title>
</head>
<body>
<div id="top">|-TOP-|</div>
<hr />

<div id="user3-user4">
<div id="user3" style="float:left; width:350px;">|-USER3-|
</div>
<div id="user4">|-USER4-|</div>
</div>
<hr />

<div id="main">
<div id="left" style="float:left; width:150px;">|-LEFT-|
</div>
<div id="component" style="float:left; width:400px;">|-
COMPONENT-|</div>
<div id="right">|-RIGHT-|</div>
</div>
<hr />

<div id="footer">|-FOOTER-|</div>
</body>
</html>

Bước 5.3: Kiểm tra lại layout

Mở trang web và xem template vừa được tạo.

Keyword:
 • joomla, template, layout, div, module, modules, component, user, head, jdoc,
include
• thiết kế, thẻ, phần tử, giao diện, dàn trang

Phần 6: Nhúng mã của Joomla!

Joomla! xây dựng một loại thẻ riêng cho việc thiết kế Template, đó là thẻ <jdoc>. Thẻ
<jdoc> được dùng để nạp các phần tử riêng biệt của Joomla, chẳng hạn như: Nạp
"Head", nạp "Module", nạp "Component".

Thẻ này được khai báo như sau:

<jdoc:include type="[head|module|component]" />

Bây giờ hãy mở file "index.php" của template và nhúng vào các đoạn mã của Joomla!

Bước 6.1: Nhúng đoạn mã nạp phần HEAD:

<head>
<jdoc:include type="head">
</head>

Bước 6.2: Nhúng các đoạn mã để nạp MODULE và

COMPONENT:
Thay |-TOP-|, |-USER3-|, |-USER4-|...

bằng các đoạn mã giống như hình dưới:

Hoặc copy đoạn mã đầy đủ sau:

<html>
<head>
<jdoc:include type="head">
</head>
<body>
<div id="top"><jdoc:include type="modules" name="top" /></div>
<hr />
<div id="user3-user4">
<div id="user3" style="float:left; width:350px;">
<jdoc:include type="modules" name="user3" />
</div>
<div id="user4"><jdoc:include type="modules"
name="user4" /></div>
</div>
<hr />
<div id="main">
<div id="left" style="float:left; width:150px;">
<jdoc:include type="modules" name="left" />
</div>
<div id="component" style="float:left; width:250px;">
<jdoc:include type="component" />
</div>
<div id="right"><jdoc:include type="modules"
name="right" /></div>
</div>
<div style="clear:both;"></div>
<hr />
<div id="footer"><jdoc:include type="modules" name="footer"
/></div>
</body>
</html>

Bước 6.3: Kiểm tra kết quả

Mở Website của bạn và kiểm tra kết quả. VD: http://vinaora.com/joomla

Keyword:
• joomla, template, layout, div, module, modules, component, user, head, jdoc,
include
• thiết kế, thẻ, phần tử