sua nha|may tinh bang bipad 9x|diet moi|dich vu diet moi|dong ho|sua chua dien nuoc tai ha noi|sua chua dien nuoc

Thiết Kế Template Cho Joomla 1.5

Thiết Kế Template Cho Joomla 1.5

Email In PDF.

Web Design Joomla Template Patched

Thiết Kế Template Cho Joomla 1.5

Biên soạn: TuanVA

Mục địch bài viết: Phân tích cấu trúc template của Joomla để mọi người có thể tiếp cận và chỉnh sửa nó, cũng như tự viết 1 template cho Joomla, giúp bạn hiểu được những gì cần thiết cho 1 template

Bài viết này dành cho: Những bạn đã biết cơ bản về CMS Joomla, sử dụng thành thạo các ngôn ngữ thiết kế template (như: CSS, HTML), có kiến thức cơ bản về OOP PHP, và muốn tìm hiểu nâng cao thêm về template Joomla.

Giới thiệu: Chào các bạn, sau 1 thời gian miệt mài nghiên cứu, hôm nay mình sẽ cho ra mắt Tutorial về template của Joomla. Nhằm mục đích lưu trữ kiến thức và chia sẻ cho mọi người.


Có lẽ những bạn đã biết đến CMS Joomla thì cũng biết sức mạnh phổ biến và được nhiều người dùng nó đến thế nào. Khi đã tin cậy sử dụng 1 CMS cho việc xây dựng 1 website, hẳn là các bạn đã hài lòng về các tính năng nó đem lại hay được nhiều người dùng hỗ trợ..v…v….

 


Và vấn đề còn lại chỉ là giao diện của website, quả thật Template luôn là vấn đề được quan tâm thứ 2 khi sử dụng 1 CMS để xây dưng website, template luôn là bộ mặt thể hiện cho Website để thu hút người dùng. Và có lẽ ko ai là không muốn tự mình thiết kế riêng 1 template (không đụng hàng), nhất là nếu làm cho khách hàng nữa, để sử dụng cho CMS. Ngoài ra thành thạo thiết kế 1 template của 1 CMS còn giúp ta có ích trong rất nhiều việc, điển hình nhất ở việt nam mình thấy đó là việc che giấu bản quyền của CMS để coi nó như là 1 bộ source do mình viết, haha (Nhưng mình không khuyến khích mọi người làm cái này nhé).

Cấu trúc Template Joomla thật ra có rất nhiều vấn đề phức tạp mà chúng ta cần phải tìm hiểu. Thế nên mình sẽ chia bài ra thành các phần và chương để tiện cho việc tham khảo của mọi người.

I-Lý Thuyết

Chương 1: Cấu trúc Template
Chương 2: Cú pháp câu lệnh Joomla

II-Thực Hành

Chương 3: Thiết kế 1 template Joomla với các tính năng cơ bản.
Chương 4: Kỹ thuật nâng cao trong thiết kế Template

 

-------------------------------------------------------------------------------------------------------------

I-Lý Thuyết


Chương 1: Cấu trúc Template

Hầu hết các template được cài đặt trên 1 trang Joomla sẽ được lưu trong thư mục \templates, thư mục này được đặt tại thư mục root của mã nguồn Joomla. Trong thư mục \templates sẽ chứa các thư mục tương ứng cho mỗi template được cài đặt trên hệ thống, tên của thư mục này phải chính xác phù hợp với tên của template, và hệ thống template sẽ được thiết lập tự động để nhận dạng chúng. Ví dụ, nội dung template rhuk_milkyway phải được chứa trong các thư mục \rhuk_milkyway.

Nếu các bạn đã từng vọc template của Joomla chắc hẳn cũng thấy template của Joomla bao gồm các file: index.php, templateDetails.,xml, params.ini, template_thumbnail.png..v..v… và các thư mục: css, images, html..v.v… Nói chung có bao nhiêu thì còn do nhu cầu người dùng tạo ra. Trước mắt, chúng ta chỉ cần quan tâm đến các thành phần chính tạo ra 1 template đó là:

index.php — File này là trung tâm xử lý của template, bao gồm cả việc hiển thị các module và component. Ngoài ra, mọi client-side JavaScript cũng được khai báo tại đây..
templateDetails.xml — File này bao gồm các thẻ meta khai báo thông tin về template, được sử dụng bởi giao diện quản trị của joomla nhằm mục đích khai báo thông tin cho việc cài đặt và bảo trì. Những thiết lập được lưu trong file bao gồm một danh sách của mọi file tạo ra template, tác giả và thông tin công bố, và các thông số sẵn có cho người sử dụng sửa đổi thông qua admincp.
template_thumbnail.png — Ảnh thumbnail demo của template, ảnh này thường có độ rộng là 140px và chiều cao là 90px, và được hệ thống joomla sử dụng làm ảnh demo cho template trong admincp.
\css — Nơi lưu trữ các file CSS được sử dụng bởi template. Thông thường, file template.css đặt ở đây.
\images — Nơi lưu trữ hầu hết các file hình ảnh được sử dụng bởi template.

_Ngoài ra có thể bao gồm thêm 2 thư mục nữa đó là html và javascript, tuy nhiện tạm thời chúng ta chưa cần đề cập đến chúng.

Bộ não của template: File Index.php
File index.php là file template chủ đạo, và là tập tin cần thiết nhất cho việc sử dụng template bởi CMS Joomla . File index.php là 1 tập tin bao gồm cả mã HTML và PHP.
_Các đoạn mã HTML thông thường cung cấp các phần tử văn bản(các thẻ div) có tổ chức liên kết chặt chẽ các stylesheets riêng lẻ (thuộc tính của từng thẻ div, thường được viết trong file css) cho việc định dạnh trình bày template của website.
_Còn lại, các đoạn mã PHP sẽ đảm đương phần khai báo hiển thị nội dung như các module, component của website.
Một ví dụ đơn giản về file index.php sẽ trông giống như sau







Hello World!




Tuy nhiên, đoạn mã HTML này khó mà tuân thủ theo chuẩn của hiệp hội World Wide Web (W3C) được. Nó sẽ thực thi và hiển thị Hello World! thông qua hệ thống Joomla. Chú ý là ví dụ trên trên thì rất là đơn giản, sẽ không có nhiều nội dung được hiển thị. Từ từ rồi chúng ta sẽ học cách để tạo ra 1 template phức tạp hơn, hiển thị bao gồm cả các module và component.

_Trước khi đi vào làm 1 template hoàn chỉnh hơn, ta nên nên tìm hiểu qua 1 chút về câu lệnh thực thi load nội dung của module và component từ hệ thống của Joomla.

Joomla là 1 CMS hoạt động trực tiếp với các ngôn ngữ PHP và hiển nhiên ứng dụng Joomla cũng sẽ xây 1 thư viên các class PHP để sử dụng nhằm mục đích tối giản độ rối rắm của code và bảo mật. Vì vậy, để tiện cho việc thiết kế template chúng ta cũng nên tìm hiểu qua về cú pháp php joomla sử dụng trong template. Chúng ta cùng qua chương 2.
tuanva
06-10-2009, 05:10 PM
Chương 2: Cú Pháp Câu Lệnh Joomla

Câu lệnh jdoc
Bằng cách sử dụng một số các đối tượng do chính mình định nghĩa như JDocument và JDocumentHTML, Joomla có thể load các nội dung của các module và component từ database mà chẳng hề phải sử dụng nhiều mã lệnh PHP lằng ngoằng trong file template, chúng ta thấy việc này đem lại rất nhiều thuận lợi cho các designer.

Bạn đã nhìn thấy phương thức include được sử dụng trong ví dụ Hello World trên chương 1. Nó được thực hiện với 1 câu lệnh jdoc giống như sau:


Câu lệnh này được thực thi bởi phương thức include trong đối tượng jdoc để trả về tất cả thông tin của header cho trang Joomla hiện tại. Bạn cũng có thể sử dụng 1 include để gọi đến yêu cầu các tin nhắn hệ thống hiển thị. Đoạn mã để hiển thị tin nhắn hệ thống sẽ trông như thế này:


Cuối cùng là cách phổ biến nhất để sử dụng include chèn vào các đoạn mã HTML cho 1 Joomla module. Ví dụ, để đưa ra thông tin của phần module top (thường là module có chức năng hiển thị các banner), bạn sử dụng 1 cú pháp như sau:



Trên đây là 1 vài ví dụ cơ bản. Để tìm hiểu thêm về jdoc statement, bạn có thể vào địa chỉ sau: http://docs.joomla.org/Jdoc_statements . Tiện đây mình cũng giới thiệu luôn địa chỉ: http://docs.joomla.org cho ai chưa biết luôn, đây là 1 thư viện tra cứu các hàm cũng như câu lệnh của Joomla, nó hỗ trợ chúng ta rất tốt, nếu bạn muốn nghiên cứu chuyên sâu Joomla thì đừng bỏ qua nó nhé.


Biến $this
Ngoài ra trong JDocumentHTML còn có rất nhiều thuộc tính và phương thức đã được định nghĩa sẵn và bạn có thể tham chiếu đến nó bằng câu lệnh $this->. Câu lệnh $this được sử dụng để tham chiếu đến các thuộc tính và phương thức bên trong của đối tượng JDocumentHTML. Khi sử dụng các thuộc tính và phương thức của đối tượng JDocumentHTML, nó sẽ giúp ích cho bạn trong việc coding ko phải dài dòng, vì các đối tượng này đều được Joomla định nghĩa sẵn, chỉ việc gọi ra và sử dụng. Ví dụ, để hiển thị ngôn ngữ được chọn lựa cho template, thuộc tính language có thể được trích xuất như thế này:

language;?>

Sau đây là các thuộc tính khác của đối tượng JDocumentHTML có thể được truy xuất thông qua sự tham chiếu của biến $this này:

direction — Đọc đường dẫn từ trái qua phải (ltr), phải sang trái (rtl).v.v.
template — hiển thị tên thư mục template.
title — hiển thị tiêu đề của website.
description — Chứa các miêu tả tài liệu (từ các metadata HTML).
link — Chứa các đường dẫn (URL) của tài liệu.
language — bao gồm các thiết lập ngôn ngữ của website.

Và JDocumentHTML cũng cung cấp 1 số phương thức hữu ích có thể được gọi ra thông qua việc sử dụng biến $this này. Ví dụ, phương thức countModules() sẽ giúp bạn kiểm tra sự tồn tại của các module tại vị trí được phương thức countModules() tham chiếu đến. Cấu trúc của nó như sau:

$this->countModules('vị trí được thiết lập của module');
Ví dụ, dể kiểm tra số lượng các module tồn ở 1 vị trí riêng lẻ, bạn có thể thực thi 1 hàm như sau:

$this->countModules('user1');
Bạn có thể sử dụng hàm để kiểm tra các trường hợp có nhiều hơn 1 vị trí như thế này:

$this->countModules('user1 + user2');
Thậm chí bạn có thể sử dụng toán tử Boolean logic khi thực thi phương thức, như sau:

$this->countModules('user1 and user2');
$this->countModules('user1 or user2');
Ví dụ dưới đây là đoạn mã để kiểm tra tại vị trí top, có module nào tồn tại hay không và nếu không sẽ hiển thị tấm ảnh ’placeholder.gif’ thay thế:

countModules('top')) : ?>





Thông thường, khi thiết kế template cho Joomla, chúng ta sẽ dùng phương thức countModules() để kiểm tra xem tại vị trí đó có tồn tại module nào được gọi ra không, nếu không thì chúng ta sẽ ẩn vị trí đó đi (ẩn các thẻ div). Ví dụ điển hình nhất là 1 template có 3 cột, có những lúc chúng ta chỉ sử dụng 2 cột, và lẽ dĩ nhiên chúng ta sẽ ẩn 1 cột đi để template hiển thị ko bị lỗi, thú vị quá phải không nào :D. Chúng ta sẽ hiểu rõ về nó thông qua việc thiết kế template cho Joomla trong chương 3.
------------------------------------------------------------------------------------------------------------
II-Thực Hành


Chương 3: Tạo 1 template Joomla với các tính năng cơ bản.
Thông qua chương này, mình nghĩ đây sẽ là 1 ví dụ cơ bản điển hình nhât cho các bạn nắm rõ về template Joomla. Chúng ta cùng bắt đầu nhé :D.
Mình sẽ chia quá trình làm việc ra làm 3 bước.

Bước 1: Thiết kế template mẫu.
Bước 2: Ráp template vào Joomla.
Bước 3: Tinh chỉnh lại các stylesheet cho phù hợp


Bước 1: Thiết kế template mẫu
Đầu tiên, trước hết, chúng ta khoan hẵng đụng đến Joomla, công việc đầu tiên là thiết kế 1 template mẫu. Chúng ta sẽ tạo 1 template 3 cột

Tạo 1 thư mục có tên là template_demo, trong thư mục này bạn tạo các fie:

index.html
css/template.css
images/

File index.html mình viết như sau:














LEFT COLUMN



RIGHT COLUMN


CONTENT







Tiếp theo mình định nghĩa cho các thẻ div trong file css như sau:

/* Copyright (C) 2009 TuanVA */

*{
margin:0;
padding:0;
}

body{
font-family: Tahoma, Arial, sans-serif;
color: #484848;
font-size:12px;
}

#tva-container{
margin:0 auto;
width:960px;
}

#tva-header{
background:#000000;
height:100px;
border:1px solid black;
margin-bottom:1px;
}

#tva-header img{
float:left;
}

#tva-content{ }

#tva-left_nav{
float:left;
width:150px;
background:#e8f6bf;
}

#tva-right_nav{
background:#e8f6bf;
float: right;
width: 150px;
}

#tva-info{

}

#tva-footer{
line-height:20px;
color:#FFFFFF;
background:#000000;
text-align:center;
clear:both;
}

a img {
border:medium none;
}

Trong thư mục \images, mình tạo ra các tấm hình sau: bullet-list.gif, logo.png, pathway-bg.gif, seperator.gif. Các bạn có thể download image trong file đính kèm ở cuối bài tutorial.
Xong xuôi, chúng ta mở ra xem thử template demo. Rồi qua bước 2.
--------------------------------------------------------------------------------------------------------------------
Bước 2: Ráp template vào joomla

Bây giờ ta copy thự mục template_demo vào thư mục templates trong mã nguồn joomla, đồng thời tạo thêm 1 file có tên là: templateDetails.xml để khai báo các thông tin về template. Hãy nhớ kỹ là file này ảnh hưởng trực tiếp đến việc cài đặt template của chúng ta.
_Sau đó đổi tên file index.html thành index.php

Tiếp tục chúng ta mở file templateDetails.xml ra và khai báo như sau:




Template Demo
06/08/09
TuanVA
Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.
http://www.chuaco.com
TuanVA
GNU/GPL
1.0.0
Demo template for a three column display.

index.php
templateDetails.xml
template_thumbnail.png
params.ini
images/bullet-list.gif
images/logo.png
images/pathway-bg.gif
images/seperator.gif
css/index.html
css/template.css


left
right
user4
breadcrumbs


Các bạn nhớ là mỗi khi tạo thêm 1 file mới nào, hay sử dụng 1 position nào, bạn lại mở file này và khai báo thêm vào nhé. Không khai báo cũng ko ảnh hưởng gì nhiều, nhưng chúng ta cứ nên làm đúng thủ tục.
Sau khi khai báo xong, chúng ta vào admincp, phần Template Manager, chúng ta sẽ thấy 1 template có tên là Template Demo, do chúng ta vừa khai báo trong file templateDetails.xml. Hãy thử thiết lập nó là mặc định và ra trang joomla coi thử, các bạn sẽ thấy template mà không hề có nội dung gì của hệ thống Joomla cả, bi giờ chúng ta sẽ thêm nội dung vào file index.php bằng cách sử dụng các câu lệnh của Joomla chúng ta đã tìm hiểu trong chương 2.

_Khi thêm nội dung vào file index.php, các bạn nhớ gọi cả các 2 file file css của template hệ thống Joomla vào, chúng có tên là general.css và system.css và nằm trong \templates\system\css. Mình viết lại index.php như sau: