Việt hóa Joomla

Một phần của tài liệu Tìm hiểu cms joomla ứng dụng xây dựng siêu thị sách trực tuyến (Trang 57)

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!.

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.

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.

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 modulecomponent 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

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.

+ 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

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

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;

Một phần của tài liệu Tìm hiểu cms joomla ứng dụng xây dựng siêu thị sách trực tuyến (Trang 57)

Tải bản đầy đủ (PDF)

(111 trang)