III.1. Tiến hành Việt hóa Joomla
Joomla! 1.5 ra đời đánh dấu sự nhảy vọt cả về cách trình bày, giao diện, tính năng, kiến trúc và "...hỗ trợ tất cả các ngôn ngữ có tập ký tự đ ược biểu diễn bằng
bảng mã UTF-8..." (trích dẫn từhttp://vi.wikipedia.org/wiki/Joomla). VớiJoomla! 1.5
việc bản địa hóa đã trở nên dễ dàng hơn, toàn diện hơn (sử dụng bảng mã Unicode và cho phép bản địa hóa cả phần front-end, back-end). Bài viết này sẽ giúp các bạn nhanh
chóng Việt hóa Joomla! (Việt hóa cả phần front-end và back-end) chỉ sau vài bước đơn giản
Việt hóa phần tiền sảnh front-end (phía người sử dụng)
Các gói ngôn ngữ phần tiền sảnh của Joomla! 1.5 được lưu trong thư mục
"\language". Gói ngôn ngữ tiếng Anh sẽ được lưu trong thư mục "\language\en-GB". Trongthư mục này lại có các file sau:
index.html: Để tránh các hacker liệt k ê các file và thư mục.
en-GB.xml: Mô tả các thông tin liên quan tới gói ngôn ngữ.
en-GB.ignore.php: Danh sách các ký tự bỏ qua khi tìm kiếm.
en-GB.ini: File ngôn ngữ chính của Joomla!
en-GB.com_xxx.ini: File ngôn ngữ cho component có tên là com_xxx.
en-GB.mod_xxx.ini: File ngôn ngữ cho module có tên là mod_xxx.
Để tạo gói ngôn ngữ tiếng Việt. Chúng ta l àm như sau:
Bước 1. Tạo thư mục chứa gói ngôn ngữ tiếng Việt: "\language\vi-VN"
Bước 2. Copy toàn bộ các file trong thư mục "\language\en-GB" tới thư mục
"\language\vi-VN"
Bước 3. Thay phần tiền tố của tên các file tiếng Anh (en-GB) bằng tiền tố của
file tiếng Việt (vi-VN). Nghĩa là ta có cấu trúc thư mục chứa gói ngôn ngữ tiếng Việt như sau: \language\vi-VN\ ---\index.html ---\vi-VN.xml ---\vi-VN.ignore.php ---\vi-VN.ini ---\vi-VN.com_xxx.ini ---\vi-VN.mod_xxx.ini ---\vi-VN.plg_xxx.ini
Bước 4. Thay file "vi-VN.xml", "vi-VN.ignore.php" bằng 2 file download từ
liên kết sau:
http://vinaora.com/joomla/d ownload/Joomla_Vietnamese_Language_Pack_1_5.zip
Bước 5. Mở các file*.ini bằng trình soạn thảoNotepad++ (khuyến cáo).
Bước 6. Chọn định dạng (mở menu Format) khi l ưu các file này: "UTF-8 without BOM" (lưu các ký tự tiếng Việt nhưng không chèn thêm ký tự đánh dấu
UTF-8ở đầu file).
Bước 7. Tiến hành Việt hóa. Thay các từ/cụm từ tiếng Anh bằng từ/cụm từ tiếng
Việt tương đương.
Gói ngôn ngữ tiếng Anh của phần hậu sảnh Joomla! được lưu trong thư mục
"administrator\language\en-GB".
Việc Việt hóa được tiến hành tương tự như phần tiền sảnh front-end của Joomla!. (adsbygoogle = window.adsbygoogle || []).push({});
Chú ý:
Tất cả các file nếu nội dung có chứa tiếng Việt thì đều phải lưu với lựa chọn
"UTF-8 without BOM".
Keyword: Việt, Việt hóa, tiếng Việt, ngôn ngữ, gói ngôn ngữ,
tiếng Anh, bản địa hóa, UTF-8, front-end, back-end.
III.2. Cài đặt gói ngôn ngữ cho Joomla
o Tải gói ngôn ngữ (language package):
o http://extensions.joomla.org/component/option,com_mtree/task,listcats/cat _id,1837/Itemid,35/ hoặchttp://joomlaviet.org/
o Mở menu"Installers" --> "Languages"
o Nhấn vào nút [Browser...] để chọn gói ngôn ngữ (đ ược đóng gói trong
một file nén *.zip)
o Nhấn vào nút [Upload File & Install] để tiến hành cài đặt
o Nhấn vào link 'Continue...' để kết thúc quá trình cài đặt. Joomla! sẽ
chuyển hướng đến trang quản lý các ngôn ngữ.
o Từ danh sách các gói ngôn ngữ, chọn ngôn ngữ mới c ài đặt (ngôn ngữ
Việt Nam), sau đó nhấn vào nút [Publish]
o Vào menu Global Configuration -> Site -> Locale, chọn ngôn ngữ Việt
Nam và nhấn nút [Default] để thiết lập tiếng Việt thành ngôn ngữ mặc định
III.3. Sử dụng JoomFish để xây dựng Website đa ngôn ngữ
Chúng ta sẽ tiến hành xây dựng Website sử dụng 3 ngôn ngữ: tiếng Anh, tiếng Việt, và tiếng Pháp.
Bước 1: Cài đặt JoomFish
Truy cập vào Back-end, mục Installers/Components, duyệt tới file Component JoomFish và nhấn Upload File & Install.
Hình 20 : Cài đặt JoomFish
Khi cài đặt thành công, chúng ta sẽ thấy màn hình chào mừng của JoomFish:
Hình 21 : Màn hình JoomFish
Bước 2: Cài đặtvà tinh chỉnh các file ngôn ngữ
Vào mục Installers/Languages để cài thêm 2 ngôn ngữ tiếng Việt và tiếng Pháp,
Hình 22 : Cài đặt ngôn ngữ
Sau khi cài xong, chúng ta vào mục Site/Language Manager/Site Languages để
kiểm tra. (adsbygoogle = window.adsbygoogle || []).push({});
Hình 23 : Kiểm tra ngôn ngữ
Hình 24 : Danh mục ngôn ngữ
Chúng ta thấy rằng, tên ngôn ngữ tiếng Pháp bị lỗi, chúng ta cần sữa lại vì tên ngôn ngữ sẽ hiển thị trên Website để khách viếng thăm lựa chọn.
Hình 25 : Quản lý ngôn ngữ
Joom!Fish đã nhận được 3 gói ngôn ngữ
Hình 26 : Quản lý ngôn ngữ
Mở chương trình Word, chọn Insert Symbol
Bôi đen chữ ç và copy vào clipboard (Ctrl+C) , quay lại Joomla, dán chữ ç vào vị trí
dấu ? trong tên file Fran?ais (dùng Ctrl+V), và sửa luôn chữ Vietnam thành Tiếng Việt
(sử dụng Unicode).
Hình 27 : Kích hoạt ngôn ngữ
Cho Active các ngôn ngữ và điền thêm các thông số cho ngôn ngữ tiếng Việt và tiếng Pháp như hình dưới đây
Hình 28 : Kích hoạt ngôn ngữ
Chọn thứ tự cho các ngôn ngữ sẽ hiển thị trên Front-end: Tiếng Việt 0, tiếng Anh 1,
tiếng Pháp 2.
Hình 29 : Thứ tự ngôn ngữ
Tiếp đó nhấn Save để lưu lại
Hình 30 : Lưu ngôn ngữ
Sau khi đã càiđặt và điều chỉnh các gói ngôn ngữ nh ư trên, để site hoạt động tốt, ít
xảy ra lỗi, chúng ta cần điều chỉnh các file ngôn ngữ sang UTF-8.
Dùng Dreamweaver mở các file sau (trong th ư mục language) và điều chỉnh các
charset từ ISO-8859-1 sang UTF-8. english.php
english.xml french.php french.xml
Sửa dòng DEFINE(‘_ISO’,’charset=iso-8859-1’); thành
DEFINE(‘_ISO’,’charset=utf-8’);
Vẫn trong Dreamweaver, chọn menu Modify/Page Properties
Trong phần Page Properties, mục Title/Encoding, mục Encoding chọn
Đối với file *.xml
Trong Dreamweaver, thay dòng enco ding từ iso-8859-1 thành utf-8 rồi lưu lại giống
phía trên. (adsbygoogle = window.adsbygoogle || []).push({});
Hình 31 : Điều chỉnh chuẩn ngôn ngữ
Quay lại Joomla, vào mục Modules/Site Modules
Tìm tới mục JoomFish language selection
Chọn vị trí xuất hiện của module lựa chọn ngôn ngữ. Ví dụ ở đây chúng ta chọn
Position: top, chọn Published: yes và lưu lại (Save)
Hình 32 : Chọn hiển thị module chọn ngôn ngữ
Bây giờ hãy mở cửa sổ trình duyệt và test thử site ngoài Front-end, nếu có xuất hiện
module lựa chọn và khi lựa chọn từng ngôn ngữ thì các dòng chữ trên Joomla thay đổi
theo là bạn đã thành công.
Bước 4: Dịch các bài viết và các thành phần trong site thành nhiều ngôn ngữ
Lưuý các menu bên góc phải
Hình 33 : Dịch bài viết và thành phần trong Joomla
Mục Content elements là các thành phần trong Joomla mà bạn có thể dịch ra ngôn
ngữ khác nhau. Mục Languages d ùng để lựa chọn ngôn ngữ dịch.
Lưuý: Theo mặc định trong Joom!Fish, khi có một mục bạn không dịch (No
translation) thì mục này sẽ được để với ngôn ngữ mặc định của site (Ngôn ngữ mặc định được thiết lập trong Site/Global configuration).
Bạn có thể thay đổi mặc định này bằng cách vào Components/Joom!Fish/Configuration
Hình 34 : Mặc định trong JoomFish IV. Thiết kế Template
IV.1. 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.
Hình 35 : Vị trí module và component mà joomla 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ị. 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
Hình 36 : Danh sách vị trí module và component (adsbygoogle = window.adsbygoogle || []).push({});
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:
Hình 37 : Vị trí module và component
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:
Hình 38 : Đoạn mã tạo vị trí module và component
Chú ý: Tất cả cácmodule 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="...." />
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="...." />
IV.2. Cấu trúc Template
Hệ thống Joomla Template là một trong những thứ dễ học nhất của Content
Management System. Cấu trúc của một Joomla Template nh ư sau:
/templates /basic_template /css template_css.css /images index.php template_thumbnail.png templateDetails.xml
Hình 39 : Tập các file của template IV.3. templateDetails.xml
templateDetails.xml phải chứa tên của tất cả các file của template. Nó cũng bao gôm các thông tin như tác gi ả, bản quyền, một số thông tin chỉ đ ược hiển thị trong
phần the admin backend trong Template Manager.
Ví dụ một filetemplateDetails.xml có nội dung như sau:
<mosinstall type="template" version="1.0.x"> <name>mytemplate</name>
<creationDate>July 08</creationDate> <author>Tran Van Ve</author> <copyright>GNU/GPL</copyright>
<authorEmail>tranvanve84@gmail.com</authorEmail> <authorUrl>www.tranvanve.com</authorUrl>
<version>1.0</version>
<description> Day la template cua toi</description> <files>
<filename>index.php</filename> <filename>js/ie.js</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/header.png</filename> <filename>images/background.png</filename> <filename>template_thumbnail.png</file name> </images> <css> <filename>css/base.css</filename> <filename>css/norightcol.css</filename> <filename>css/template_css.css</filename> </css> </mosinstall>
Ý nghĩa của các thẻ được sử dụng như sau:
+ mosinstall nội dung của tài liệu xml được sử dụng để chỉ dẫn cho công việc cài đặt. Tùy chọn type="template" thông báo cho trình cài đặt là chúng ta đang cài đặt template.
+ name định nghĩa tên cho template, tên đư ợc điền ở đây sẽ được sử dụng để
tạo thư mục trong thư mục template . Bởi vậy tênở đây không được chứa các kí tự mà hệ thống khó nắm bắt ví dụ nh ư kí tự cách.
+ create date ngày template được tạo ra, nó là một dạng mẫu tự do có thể là: May 2005, 08-June-1978, 01/01/2004 ….
+ author tên của người thiết kế ra template này.
+ copyright bất kì thông tin bản quyền nào bên trong thành phần này. (adsbygoogle = window.adsbygoogle || []).push({});
+ authorEmail hòm thư điện tử của tác giả.
+ version phiên bản của template này.
+ files tất cả các mục file chứa tất cả các file chung nh ư mã nguồn PHP hay hình thu nhỏ của template. Mỗi một danh sách file đ ược đặt trong cặp thẻ <filename>
</filename> .
+ images tất cả các hình ảnh được sử dụng trong template, và mỗi danh sách
cũng được đặt trong cặp thẻ <filename> </filename>.
+ css liệt kê các stylesheet được sử dụng trong template.
IV.4. index.php
index.php là sự kết hợp giữa (x)html v à php để xác định các cách trình bày và hình thức của trang web. Bạn không cần phải là một chuyên gia PHP mới viết được
template, tất cả những gì bạn cần là học nơi nào đặt các khóa móc (key “hooks”) vào
cổ máy template Joomla. Trong khung HTML bạn đặt các “cửa sổ” nhìn vào bên trong
cơ sở dữ liệu đằng sau website của bạn, có nhiều cửa sổ nhỏ điển hìnhđược gọi là các
module và thông thường một cái mở rộng h ơn cho một component.
Bạn nên viết các template bằng XHTML mặc dù có tranh luận liệu XHTML có là lối đi của tương lai hay không, nó v ẫn còn là một định dạng XML chuẩn rất tốt, trong
khi HTML là một chuẩn rời rạc. Các phiên bản tương lai của Joomla sẽ dựa ngày càng nhiều vào XML vìđó là lối đi kế tục kiểu mẫu trong thời điểm hiện tại.
Chúng ta sẽ quan sát phần quyết định để đạt đ ược một template hợp lệ, phần đầu
của file index.php.
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<!--http://www.bluerobot.com/web/css/fouc.asp -->
<link href="templates/<?php echo $cu r_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not
allowed.' ); ?> Đoạn mã này ngăn cản việc truy nhập trực tiếp vào file index.php.
<?php if ($my->id) { initEditor(); } ?> đây là một biến kịch bản mà giá trị
của nó sẽ khác không khi ng ười sử dụng đăng nhập v ào website. Khi người dùng đăng (adsbygoogle = window.adsbygoogle || []).push({});
nhập vào hệ thống trình soạn thảo WYSIWYG sẽ đ ược chỉ định được tải xuống trước,
nếu bạn là người quản trị thì bạn luôn muốn trình soạn thảo sẽ được tải xuống trước nhưng đối với người dùng thông thường thì họ lại thường không thêm nội dung mới
cho trang web. Script này sẽ giúp trình duyệt của bạn tải trang web một cách bình
thường.
<?php mosShowHead(); ?> mục header là nơi chứa các cấu hình toàn cục cho
trang web, nó bao gồm các nhãn sau:
<title>A Complete Guide to Creating a Joomla Template </title>
<meta name="description" content="Installing Joomla, doctype and the blank joomla template" />
<meta name="keywords" content="installing joomla, joomla doctype, blank joomla tempate" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" /> <link rel="shortcut icon" xhref="images/favicon.ico" />
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
Đoạn mã này sẽ liên kết tới file CSS của template, đoạn mã php <?php echo $cur_template; ?> sẽ trả lại tên của template hiện thời. Khi tạo một template mới bạn
chỉ cần sao chép đoạn mã này mà không cần phải quan tâm đến việc sửa đoạn mã này. Khi thiết kế template người thiết kế phải tạo cho trang web một khung để hiển thị thông tin, sau đó đặt các thành phần của Joomla vào nơi bạn muốn. Các thành phần
của Joom la thường được sử dụng như sau:
<?php echo $mosConfig_sitename;?> hiển thị tên của trang web.
<?php mospathway()?> đư ờng dẫn các mục khi ng ười sử dụng duyệt trang web.
<?php mosLoadModules('top');?> hiển thị phần menu phía trên của trang web.
<?php mosLoadModules('left');?> hiển thị phần menu phía trái của trang web.
<?php mosMainBody();?>hiển thị phần nội dung chính của trang web.
<?php mosLoadModules('right');?> hiển thị phần nội dungbên trái của trang web.
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?> hiển thị
phần nội dung cuối của trang web.
Mục đích của chúng ta l à đặt các thẻ này vào nơi hợp lý trên khung html của file
index.php.
IV.5. template_css.css
Đây là file xác định cách thức hiển thị nội dung tr ên trang web như font ch ữ, cỡ
chữ, màu sắc …Sau đây là một số thành phần CSS mặc định của Joomla, khi thết kế
template công việc của bạn là thay đổi các thông tin của file n ày để có một template
Hình 40 : Thành phần CSS mặc định của Joomla (adsbygoogle = window.adsbygoogle || []).push({});
A. xác định cách thức hiển thị tên của trang web, sau đây là ví dụ: .site_name {
padding-top: 5px; padding-left: 5px; }
B. xác định cách thức hiển thị phần đ ường dẫn của trang web, sau đây là ví dụ: .pathway {
color: #255B86;
}
a.pathway, a.pathway:visited {
a.pathway:hover {
color: #98A258;