Tự thiết kế template Joomla "made in tự tui"

Thảo luận trong 'Templates Joomla! 1.5.x' bắt đầu bởi Lê Xuân Thành, 21/3/12.

  1. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    Biết tự thiết kế template Joomla cũng từ lâu rồi, không hoàn thiện lắm, nhưng cũng xin chia sẽ đến mọi người một số kinh nghiệm của bản thân cũng như đưa ra vấn đề này để mọi người cùng đóng góp ý kiến xây dựng việc tự làm cho mỗi người 1 (hoặc nhiều) template Joomla theo đúng nghĩa "made in tự tui".

    Bài viết không dành cho phụ nữ có thai và các bạn dị ứng với ngôn ngữ lập trình web PHP, Joomla. Nói vậy thôi chứ bạn không cần phải biết gì nhiều về PHP cả, thậm chí không biết cũng không sao cả, vẫn có thể làm được 1 template Joomla theo ý thích của mình.

    Bạn cần chuẩn bị những gì khi thiết kế template Joomla?
    1. Kiến thức cơ bản về cấu trúc template Joomla
    2. Căn bản về html
    3. Sử dụng thành thạo css
    4. Biết đóng mở cấu trúc PHP
    Chúng ta phải bắt đầu từ đâu?

    Có 2 hướng cho bạn để bắt đầu

    Làm ngay template Joomla từ html + css có sẳn
    Tự thiết kế layout bằng photoshop sau đó ghép html + css sau đó mới chuyển thành template Joomla
    (2 phần này sẽ được nói chi tiết trong các bài viết tiếp theo)

    Cấu trúc template Joomla thế nào?

    Có thể câu hỏi này ai cũng trả lời được nhỉ, nhưng mình cũng nêu ra đây để mọi người dễ hình dung luôn:
    Trong 1 template Joomla sẽ gồm những thứ sau:
    1. Thư mục images: Chứa các hình ảnh sử dụng cho template
    2. Thư mục css: Chứa các file css để định dạng cho template
    3. Thư mục html: Chứa các cấu trúc điều khiển được sửa đổi sẳn để phù hợp với template Joomla khi cài đặt mà không cần can thiệp quá sâu vào cốt lỏi Joomla
    4. Thư mục js: Chứa các file JavaScript, Jquery và các file js khác
    File index.html: File trắng nhằm bảo vệ folder cho template
    File index.php: File giao diện chính của template
    File
    favicon.ico: File icon cho trang web
    File params.ini: định dạng cấu trúc điều chỉnh cho template
    File template_thumbnail.png: Là hình ảnh thu nhỏ của template
    File templateDetails.xml : Chứa các thông tin về template, cấu trúc template​
    ......

    Nhưng trên thực tế tùy nhu cầu mỗi chúng ta mà cần dùng đến những file bên trong template, nhưng phải đảm bảo có các file và folder sau: (images, css, index.php,
    templateDetails.xml)


    Còn tiếp....
    dtsecurity, quangle18, ngtranthanhtoan8 others thích bài này.
  2. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    Chuyển đổi 1 template html +css thành template Joomla

    Phần 1 đổi 1 template html +css thành template Joomla

    Chuẩn bị: 1 bộ html + css, Joomla! 1.5.25

    Tiến hành:

    Mở file index.html của bạn lên thay đoạn trên thẻ <body> bằng đoạn sau:

    PHP:
    <?php

    // no direct access
    defined'_JEXEC' ) or die( 'Restricted access' );
    ?>
    <!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" xml:lang="<?php echo $this->language?>" lang="<?php echo $this->language?>" >
    <head>
    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css" type="text/css" />

    </head>
    Giải thích:
    defined( '_JEXEC' ) or die( 'Restricted access' );
    đoạn này có chức năng cấm truy cập trực tiếp file này
    <jdoc:include type="head" />
    dùng để thể hiện phần header của Joomla bao gồm: title, meta,...
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

    2 dòng này thì bạn không phải thay đổi gì cả, vì nó lấy css từ template hệ thống ra thôi


    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css" type="text/css" />

    Đây là dòng quan trọng: bạn sẽ sửa đôi lại 1 số phần cho phù hợp với site của bạn như: tên template, tên đường dẫn chứa css, tên file css.
    Chú ý:
    nếu có nhiều file css thì bạn có thể copy ra thành nhiều dòng, mỗi dòng là 1 file css
    nếu trong site bạn có file js thì cú pháp cũng tương tự



    Tiếp theo đến phần body:

    Tùy theo nhu cầu của bạn mà template của bạn có nhiều hay ít position
    Cách chèn position như sau:
    Chèn đoạn sau vào ngay bên trong thẻ div cân hiển thị position đó:
    PHP:
    <jdoc:include type="modules" name="top" />
    name="top" đó chính là tên position của bạn

    Chú ý: đồi với các vị trí có nhiều module thể hiện như: left, right.... ta phải thêm đoạn đầy đủ sau:
    PHP:
    <?php if ($this->countModules('position')) : ?>
    <div>
    <jdoc:include type="modules" name="position" style="xhtml" />
    </div>
    <?php endif; ?>

    Đối với nội dung chi tiết và thông báo các bạn chèn
    PHP:
    <jdoc:include type="component" />

    <
    jdoc:include type="message" />
    Vào div chính của site, nơi hiển thị component
    Sau khi hoàn tất bạn lưu file index.html thành index.php ngang hàng với index.html

    Phần cuối: file xml

    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
    <install version="1.5" type="template">
    <name>Tên template</name>
    <creationDate>Ngày tháng</creationDate>
    <author>Tác giả</author>
    <authorEmail>Email</authorEmail>
    <authorUrl>website</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description>Giới thiệu</description>
    <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>http://forum.joomlaviet.info/images/arrow.png</filename>
    <filename>http://forum.joomlaviet.info/images/logo.png</filename>
    <filename>css/template.css</filename>
    </files>
    <positions>
    <position>position</position>
    </positions>
    </install>
    Ở thư mục image có bao nhiêu ảnh thì bạn liệt kê hết vào đây
    Template của bạn có những position nào thì bạn thêm vào trong cặp thẻ <position></position>


    Sau kết thúc các công việc trên bạn nén toàn bộ file và thư mục trong template của bạn thành 1 file nén dạng zip.

    Bạn cài đặt Joomla 1.5, sau đó vào trang quản trị cài đặt template mới, rồi cho template mới đó là mặc định, mở trang chính bạn sẽ thấy được template mới làm.


    Chú ý:
    • Lần 1, lần 2... chắc chắn sẽ có sai sót ---> đừng nghĩ rằng không làm được, cố gắng sửa đổi 1 số lổi chúng ta sẽ thành công
    • Khi bạn cài đặt template mới làm nếu có báo lổi --> kiểm tra xem lổi là gì. Mình đã làm và rút ra 1 số điều thế này: lổi khi cài là do thiếu file chưa khai báo ở templateDetails.xml, hoặc chưa tạo index.html trắng ở 1 số folder
    • Khi cài xong không hiển thị như ưng ý ---> lý do: hình ảnh chưa đúng đường dẫn, file css chưa được thêm vào....

    Tham khảo thêm:
    1. http://forum.joomlaviet.info/joomla...mot-vi-tri-module-moi-vao-trong-template.html
    2. 5 Easy Steps Converting HTML Template to Joomla Template | Tobacamp Development
    dtsecurity, quangle18, ittp12 others thích bài này.
  3. guitargocphong

    guitargocphong Thành viên mới

    Bài viết rất hay. Các bạn cũng có thể tạo template cho Joomla bằng phần mềm Artisteer. Rất nhanh và giúp bạn vô số trong việc sáng tạo
  4. Miso

    Miso Well-Known Member

    Tối qua tìm cái bài này mãi mà ko thấy. Cuối cùng ngủ mất.
  5. smart

    smart Thành viên mới

    Cứ thế phát huy nhé ! 4rum sẽ càng phát triển !
    Miso thích bài này.
  6. vietvinhqn1992

    vietvinhqn1992 Thành viên mới

    Hay. Thank chủ topic.
  7. duyduc87

    duyduc87 Active Member

    mong bác viết tiếp cách làm cho joomla 1.7 or 2.5
  8. bibi1

    bibi1 Active Member

    Phần mềm này free hay có phí vậy?
  9. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    phần mềm này là thương mại đó bạn
  10. bibi1

    bibi1 Active Member

    Ô ồ.Được rồi

Chia sẻ trang này