CONVERT HTML TO JOOMLA

• GIỚI THIỆU Khái niệm về template Joomla:
  - 1 trang web Joomla có thể có nhiều template Joomla khác nhau, mỗi template là 1 folder trong www/ Joomla_bestforrent /templates/
  - Template trong Joomla có thể chia sẽ giữa các trang web khác nhau, ví dụ sau khi bạn thiết kế xong template cho trang web của bạn, những trang web khác có thể sử dụng template bạn vừa làm và ngược lại.
  - 1 template Joomla có thể có nhiều file, tùy tính năng, nhưng tối thiểu phải có các file sau:
  

index.php: đây là file quan trọng nhất, có nhiệm vụ định dạng cho trang web của bạn.
templateDetails.xml: file này cấu hình thông tin về template của bạn như: thông tin về tác giả template, các vị trí (position), các tham số (params).
template_thumbnail.png: file hình mô tả template của ban (Hình này sẽ hiện ra khi bạn vào Template Manager).

1. CHUẨN BỊ

ü  Source html giao diện tĩnh
ü  Cài Appserv 2.5.9
ü  Cài Joomla 2.5, ở đây tôi dùng version mới nhất tại thời điểm này là 2.5.14 Download tại địa chỉ: http://www.joomla.org/download.html

ü  Máy bạn phải cài đặt Dreamweaver

1. 3.      THIẾT KẾ

Dùng source html của bạn:
ü  Mở file index.html và lưu lại thêm 1 file index.php (Ctrl + Shift + S).
ü  Tạo thêm 1 file templateDetails.xml.
ü  Chụp hình giao diện template và lưu với tên template_thumbnail.png.
Bước 1: Mở file index.php cấu hình như sau:
1/ Cấu hình cho phần head
 
2/ Cấu hình position cho module

 

Bước 2: Mở file templateDetails.xlm cấu hình như sau:
 
Dòng 5->13: Thông tin về template.
Dòng 15->21: Cấu hình các file có trong template.
Dòng 25->28: Cấu hình các position trong template.
Bước 3: Mở file css/style.css cấu hình như sau:
 

1. 4.      CÀI ĐẶT JOOMLA

Bước 1: Giải nén file cài đặt joomla và đổi lại tên folder cho project của bạn.
 
Bước 2: Gõ vào thanh địa chỉ đường dẫn đến project của bạn.
VD: http://localhost/Joomla_bestforrent. Nhấn enter để vào trang cài đặt joomla. Sau nó chọn ngôn ngữ rồi nhấn next.
 
Tiếp tục nhấn next
 

Bước 3: Nhập thông tin vào ô username, password, database name sau đó nhấn next.
 
Tiếp tục nhấn next
 
Bước 4: Nhập đầy đủ thông tin như bên dưới rồi nhấn next.
 

Bước 5: Nhấn vào nút Remove installation folder để xóa bỏ thư mục folder trong project của bạn. Nhấn vào nút administrator để vào trang quản trị admin.

 
Quá trình cài đặt đã thành công. Nhấn vào View site để vào xem template mặc định của joomla.

Giao diện template mặc định của joomla
 

Bước 6: Vào Extension/ Extension Manager

Nhấp vào Browse chọn file zip template html và nhấn Upload & Install để upload và cài đặt template.

Sau khi cài đặt thành công

Bước 7: Vào Extension/ Template Manager. Nhấp vào nút default của template mình vừa cài đặt.
 
Bước 8: Chọn Options bên góc phải giao diện.

Tiếp đến chọn Enabled  sau đó chọn Save & Close cho hiển thị vị trí của module
 
Bước 9: Vào lại trang chủ gõ thêm dòng lệnh /?tp=-1.
Vd ở đây là http://localhost/Joomla_bestforrent/?tp=-1 để hiển thị vị trí cần đặt các module.
 
Vậy là quá trình convert template html sang template joomla đã hoàn tất. Ở các position chúng ta chèn module cho phù hợp.
Xem thêm tại :  hocweb.com.vn/category/hocweb/cms/joomla/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!