Tự thiết kế Template Joomla 2.5, 3.0 - Phần 2

Tự thiết kế Template Joomla 2.5, 3.0 - Phần 2

0 Comment , , Edit
How to create Joomla Template 2.5.
Qua bài viết hôm trước có lẽ các bạn cũng hiểu được phần nào công việc cần làm để tạo ra một template cho Joomla rồi đúng không nào. Hôm nay s cùng các bạn sẽ tìm hiểu chi tiết cách để tạo ra một file templateDetails.xml. Đây là file mà chúng ta phải tuân thủ nghiêm ngặc cấu trúc của nó.

Đầu tiên tại folder gốc, chúng ta tạo ra một tập tin xml với tên templateDetails. Copy đoạn script sau để khai báo với Joomla.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="2.5" type="template" method="upgrade">
 
</extension>
#bl2 Tiếp theo, ta sẽ mô tả về template của mình, phần này sẽ chỉ hiển thị trong giao diện Admin của Joomla. Hãy đặt đoạn script sau bên trong tag <extension> </extension>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="2.5" type="template" method="upgrade">
        <name>Template Name</name>
 <creationDate>2012-10-23</creationDate>
 <author>Salipro Pham</author>
 <copyright>Copyright © 2012 www.blogit.info</copyright>
 <authorEmail>your.name@www.blogit.info</authorEmail>
 <authorUrl>http://www.blogit.info</authorUrl>
 <version>1.0.0</version>
 <description><![CDATA[ 
  <b> This is demo template.
  <p>Created by <a href="http://www.example.com" target="_blank">www.blogit.info</a></p>
 ]]></description>
</extension>
#bl2 Bây giờ là phần quan trong nhé. Chúng ta phải khai báo toàn bộ những file và folder (cùng cấp với file này) trong cặp thẻ <files></files> để chúng có thể hoạt động. Lưu ý, file chúng ta sẽ khai báo trong tag <filename>, còn folder là tag <folder> nhé 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="2.5" type="template" method="upgrade">
        <name>Template Name</name>
 <creationDate>2012-10-23</creationDate>
 <author>Salipro Pham</author>
 <copyright>Copyright © 2012 www.blogit.info</copyright>
 <authorEmail>your.name@www.blogit.info</authorEmail>
 <authorUrl>http://www.blogit.info</authorUrl>
 <version>1.0.0</version>
 <description><![CDATA[ 
  <b> This is demo template.
  <p>Created by <a href="http://www.example.com" target="_blank">www.blogit.info</a></p>
 ]]></description>

  <files>
  <folder>css</folder>
  <folder>html</folder>
  <folder>images</folder>
  <folder>js</folder>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>favicon.ico</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
 </files>
</extension>
#bl2 Tiếp theo chúng ta sẽ định nghĩa file chứa ngôn ngữ cho template (chỉ dùng trong giao diện admin). Đây là một ví dụ mà file ngôn ngữ dc sử dụng
Nhưng trước tiên bạn phải tạo một file theo đúng pattent sau và đặt nó trong một folder với tên tùy ý (vì nó sẽ dc khai báo, nhưng khuyến cáo "language")
MaNgonNgu.tpl_TenTemplate.ini (vi-VN.tpl_myTemplate.ini)
- Bạn hãy thế phần chữ đen cho phù hợp với nhu cầu của bạn. Sau đây là một số MaNgonNgu thông dụng en-GB, en-US, vi-VN ... xem thêm #bllink. Lưu ý tag="MaNgonNgu" nữa nhé.

<languages folder="language">
       <language tag="vi-VN">vi-VN.tpl_templatename.ini</language>
 </languages>

; This is my language file.
TPL_TEMPLATENAME_FIELD_XXX_LABEL="Width of element"
TPL_TEMPLATENAME_FIELD_XXX_DESC="This is width of your element ^^"
+ Đây là một file language ví dụ. Chuỗi in hoa được xem là biến đại diện cho chuỗi kí tự bên cạnh. Mỗi file ngôn ngữ khác nhau chỉ thay đổi phần chuỗi kí tự bên cạnh mà thôi. Khi cài đặt template, đôi khi file ngôn ngữ của template sẽ được Joomla sao chép vào thư mục language mặc định. Lưu ý cách đặt tên biến in hoa nhé...
#bl2 Bây giờ, chúng ta hãy khai báo những vị trí ta cần xây dựng trong template. Chúng được đặt trong cặp tag <positions></positions> 
<positions>
  <position>header</position>
  <position>menu</position>
  <position>footer</position>
  <position>debug</position>
</positions>
#bl2 Cuối cùng, nếu chúng ta muốn có một template động (webmaster có thể truyền giá trị vào template) hãy xây dựng các field để lấy các giá trị đó. Trước kia, công việc này được viết trong một file định nghĩa khác. Nhưng từ phiên bản này nó đã được gom chung vào một file. Giả sử ta sẽ tạo ra một field để lấy giá trị width.
<config>
  <fields name="params">
   <fieldset name="advanced">
    <field name="width"  class="text-input" type="text" default="50"
     label="TPL_TEMPLATENAME_FIELD_XXX_LABEL"
     description="TPL_TEMPLATENAME_FIELD_XXX_DESC"
     filter="integer" />
   </fieldset>
  </fields>
</config>
#bl0 Lưu ý thuộc tính "name" để sau này get giá trị của nó. Ở đây ta thấy thuộc tính "label" và "decscription" được khai báo bằng một chuỗi kí tự HOA. Đó được xem như một biến hiển thị giá trị mà ta đã khai báo trong file language. Nếu không muốn ta có thể gõ vào một đoạn text cố định (label="Width of element") nhưng không khuyến cáo.

#bl0 Cuối cùng đây là file hoàn chỉnh mà ta có
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="2.5" type="template" method="upgrade">
        <name>Template Name</name>
 <creationDate>2012-10-23</creationDate>
 <author>Salipro Pham</author>
 <copyright>Copyright © 2012 www.blogit.info</copyright>
 <authorEmail>your.name@www.blogit.info</authorEmail>
 <authorUrl>http://www.blogit.info</authorUrl>
 <version>1.0.0</version>
 <description><![CDATA[ 
  <b> This is demo template.
  <p>Created by <a href="http://www.example.com" target="_blank">www.blogit.info</a></p>
 ]]></description>

  <files>
  <folder>css</folder>
  <folder>html</folder>
  <folder>images</folder>
  <folder>js</folder>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>favicon.ico</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
 </files>
 
   <languages folder="language">
       <language tag="vi-VN">vi-VN.tpl_templatename.ini</language>
 </languages>
 
 <positions>
  <position>header</position>
  <position>menu</position>
  <position>footer</position>
  <position>debug</position>
</positions>

<config>
  <fields name="params">
   <fieldset name="advanced">
    <field name="width"  class="text-input" type="text" default="50"
     label="TPL_TEMPLATENAME_FIELD_XXX_LABEL"
     description="TPL_TEMPLATENAME_FIELD_XXX_DESC"
     filter="integer" />
   </fieldset>
  </fields>
</config>

</extension>
Cùng wWw.blogit.info chia sẻ Thế giới công nghệ 4.5 sao
SHARE
    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )