CONVERT HTML TO JOOMLA

1
158
  • 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:

P2W-file template
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).

Ta bắt đầu CONVERT HTML TO JOOMLA

  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

P2W-joomla 

ü  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

 P2W-head

2/ Cấu hình position cho module

 P2W-position

Bước 2: Mở file templateDetails.xlm cấu hình như sau:

 P2W-XML

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:

 P2W-CSS

  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.

 P2W-doiten

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.

 P2W-caidat1

Tiếp tục nhấn next

 P2W-caidat2

 

 

Bước 3: Nhập thông tin vào ô username, password, database name sau đó nhấn next.

 P2W-caidat3

Tiếp tục nhấn next

 P2W-caidat3

Bước 4: Nhập đầy đủ thông tin như bên dưới rồi nhấn next.

 P2W-caidat4

 

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.

 

 P2W-caidat4

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.

P2W-caidat5

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

 P2W-giaodiendefault

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.

P2W-extensions 

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

P2W-extensionfn 

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.

 P2W-caidatext

Bước 8: Chọn Options bên góc phải giao diện.

P2W-option

Tiếp đến chọn Enabled  sau đó chọn Save & Close cho hiển thị vị trí của module

 P2W-closesaveext

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.

 P2W-giaodienfinal

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.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

LEAVE A REPLY

Please enter your comment!
Please enter your name here

*