HƯỚNG DẪN TẠO TEMPLATE VÀ MENU NGANG TRONG JOOMLA 2.5 Phần 1

•Tạo menu ngang dùng thẻ:

  • -Đế tạo menu ngang ta sẽ dùng css để điều chỉnh cho các phần tử trong tag<li>dàn trên một hàng ngang.
  • •Code trong thẻ body:
    source_body
  • Code CSS để định dạng menu ngang:

source_css_dindang_menu

  • Giải thích định dạng menu :
    • List-style-type : none dùng để bỏ đi các dấu chấm tròn tròn trong tag li(mặc định)
    • ở đây ta ko dùng thuộc tính inline để các tag li hiện trên một hàng ngang mà ta dùng thuộc tính là float : left vì như vậy sẽ không làm ảnh hưởng đến thuộc tính display : block trong tag a của link

-Sau khi định dạng sẽ có hình như sau :

hinh_menu_dinhdanh

  • Tạo Template và ứng dụng menu ngang vào template trong Joomla:

-Cài đặt Joomla có dữ liệu mẫu.

-Trong Joomla để template được đặt trong thư mục mặc định là Template.Cấu trúc của template gồm những thành phần như sau :

  • Index.php : đây là file quan trọng và để hiển thị ra trang web của joomla.
  • templateDetails.xml : dùng để định nghĩa các position,các folder cũng như các params cho người dùng nhập liệu và tương tác trong file index.php
  • folder css : dùng để chứa các file css
  • folder javascript : dùng để chứa các file javascript cũng như file jquery
  • images : dùng để chứa hình ảnh.

-Tạo một thư mục đặt trong thư mục template của joomla đặt tên tùy ý bao gồm những thư mục và file như trên :

Ví dụ: Ở đây tôi tạo một thư mục đặt tên là ptgroup và có cấu trúc như hình vẽ sau :

ptgroup_folder

-Sau khi tạo cây thư mục như trên ta sẽ định nghĩa các thông số trong file templateDetails.xml và cài đặt vào trong Joomla.Xem một file .xml mẫu trong template mặc định của Joomla là beez20 như hình dưới đây:

  • Phần 1 : Khai báo các thông số ban đầu

xml_mau1

-Giải thích các thông số :

    • <name></name>:Dùng để định nghĩa tên của Template
    • <author></author>:Tên tác giả
    • <version></version>: Thông số phiên bản Joomla đang sử dụng
    • <description></description>: Mô tả file .xml
  • Phần 2 : Khai báo thông số folder và file dùng trong template :

xml_mau2

  • Phần 3 : Định nghĩa các vị trí để load dữ liệu đưa lên front-end

xml_mau3

Đây là ba phần cơ bản phải định nghĩa trong file .xml trước khi cài đặt template vào trong Joomla,còn nhiều thông số sẽ được bàn tiếp vào chương sau.Dưới đây là file .xml tôi định nghĩa cho template :

<?xml version=”1.0″ encoding=”utf-8″?>

<!DOCTYPE install PUBLIC “-//Joomla! 1.6//DTD template 1.0//EN” “http://www.joomla.org/xml/dtd/1.6/template-install.dtd”&gt;

<extension version=”1.6″ type=”template” client=”site”>

<name>PTGroup</name>

<version>2.5.0</version>

<creationDate>21/01/2012</creationDate>

<author>PTGroup</author>

<authorEmail>admin@ptgroup.com</authorEmail>

<authorUrl>http://www.ptgroup.com</authorUrl&gt;

<copyright>Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.</copyright>

<license>GNU General Public License version 2 or later; see LICENSE.txt</license>

<description>Blank Template PT Group</description>

<files>

<folder>css</folder>

<folder>javascript</folder>

<folder>images</folder>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<filename>favicon.ico</filename>

</files>

<positions>

<position>left</position>

<position>right</position>

<position>top</position>

<position>bottom</position>

<position>header</position>

<position>footer</position>

<position>banner</position>

<position>breadcrumb</position>

<position>debug</position>

<position>inset</position>

<position>legals</position>

<position>newsflash</position>

<position>pathway</position>

<position>syndicate</position>

<position>advert1</position>

<position>advert2</position>

<position>advert3</position>

<position>user1</position>

<position>user2</position>

<position>user3</position>

<position>user4</position>

<position>user5</position>

<position>user6</position>

<position>user7</position>

<position>user8</position>

<position>user9</position>

</positions>

<config>

<fields name=”params”>

<fieldset name=”advanced”>

<field name=”fieldname” type=”list” default=”default” label=”TPL_FIELD_NAME_LABEL” description=”TPL_FIELD_NAME_DESCRIPTION” filter=”word”>

<option value=”default”>TPL_OPTION_DEFAULT_CONTENT</option>

<option value=”alternative”>TPL_OPTION_ALTERNATIVE_CONTENT</option>

</field>

</fieldset>

</fields>

</config>

</extension>

-Sau khi tạo xong file .xml bạn nén lại thành file .zip và bắt đầu cài đặt trong Joomla.Sau khi cài đặt xong bạn vào thư mục template/ptgroup mở file  index.php và bắt đầu định nghĩa template.

-Tạo một layout như hình vẽ sau.Ta sẽ đặt menu vào div top trên cùng

layout_mau

-Do Menu trong joomla dùng các tag<li> nên ta định dạng trong file .css như sau:

dinhdang_menu

-Sau khi xong bước định dạng cho Menu ta vào trong Administrator để xem Menu của Joomla được load ở vị trí nào.Ở đây menu của tôi được load ra ở vị trí position-1.Quay lại file index.php ta sẽ viết code để hiển thị menu như sau:

file_index_mau

-Ta thay chữ TOP  bằng đoạn mã sau:

<jdoc:include type=”modules” name=”position-1” style=”none”/>

-Sau đó thực thi kết quả sẽ được hình vẽ như sau:

layout_hoanthien

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s