Thiết kế template joomla: dựng giao diện với file index.php

Bài trước chúng ta đã khai báo các file cơ bản trong template joomla bây giờ chúng ta sẽ đưng giao diện và đổ dữ liệu lên template joomla.

Trước hết bạn cần phải xem lại CSS cơ bản nếu cần để dựng giao diện joomla.

Chúng ta sẽ dựng lên một template với 3 cột. Gồm các thành phần cơ bản: header, left, content, right và footer. Ngoài ra còn nhiều thành phần khác nữa tuy nhiên chúng ta chỉ dựng bấy nhiêu thôi.

Template joomla design

Template joomla design

File index.php trong joomla

Bạn mở file index.php gõ các dòng design giao diện HTML cho template của mình sau đó style như mẫu trên.

<!--
<html>
<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/bcdonline/css/template.css" type="text/css" />
</head>
<body id="page_bg">
	<div id="wrapper">
		<div id="header">
		</div>// #header

		<div id="main">
			<div id="leftcolumn">
			</div>// #leftcolumn

			<div id="midcolumn">
			</div>// #midcolumn

			<div id="rightcolumn">
			</div>// #rightcolumn
		</div><!-- #main -->

		<div id="footer">
			Design by: <a href="http://bcdonline.net">bcdOnline.net</a>
                </div>// #footer -->
	</div>// #wrapper -->
</body>
</html>

-->
  • system.css Đây là style xuất báo cáo của hệ thống.
  • general.css Đây là style tổng quát mà Joomla cung cấp, nó giống như css reset.
  • $this->baseurl: Đây là truy vấn lấy ra được địa chỉ thư mục gốc của site bạn.

Tiếp đến ta style cho giao diện trên, bạn style tùy ý đây mình chỉ là demo thôi cũng xấu quá 😀

<!--
@charset "utf-8";
body {
	text-align: center;

}
#wrapper {
	text-align: left;
	width: 940px;
	border: 2px solid #CCCCCC;
	margin: auto;
}
#main{
	margin:5px 0;
}
#header {
	height: 100px;
	background-image: url(../images/bcdonline_baner_2.jpg);
}
#leftcolumn {
	background-color: #FFFFCC;
	float: left;
	width: 200px;
}
#midcolumn {
	background-color: #FFCCFF;
	float: left;
	width: 530px;
	margin-left:5px;
}
#rightcolumn {
	background-color: #FFFFCC;
	float: left;
	width: 200px;
	margin-left:5px;
}
#footer {
	background-color: #000000;
	clear: both;
	height: 70px;
	color: #FFFFFF;
	line-height:70px;
	text-align:center;
}
-->

Lúc này bạn ra ngoài test thử.

Đổ dữ liệu lên template

Joomla cung cấp cho bạn các cấu trúc như sau:

<!--

<jdoc:include type="head" />
//Bạn để vào trong thể HEAD
//Hiển thị phần HEAD bao gồm các thẻ meta, script, thư viện joomla sử dụng.

<jdoc:include type="modules" name="left" style="xhtml" />
// Bạn include vào trong cột trái của template
// Lấy tất cả các dữ liệu là module ở cột trái.

<jdoc:include type="modules" name="right" style="xhtml" />
// Bạn include vào trong cột phải của template
// Lấy tất cả các dữ liệu là module ở cột phải.

<jdoc:include type="component" />
// Bạn include vào trong cột giữa (content) của template
// Hiển thị Component
-->

mane là các vị trí mà bạn khai báo trong file XML trước đó. Vậy khi trong administrator chọn module nào hiển thị bên vị trí bào thì sẽ hiển thị đúng ra giao diện.

Có một lưu ý đáng quan tâm là mỗi thư mục của joomla template đều khai báo index.html để tránh truy cập trực tiếp vào thư mục này xem danh sách các file.

Ngoài ra còn các thành phần cũng cần thiết khi thiết kế template joomla:

<!--
defined( '_JEXEC' ) or die( 'Restricted access' );
//Dùng này đặt trên đầu file index.php để ngăn chặn truy cập trực tiếp vào file này.

<?php echo $mainframe->getCfg('sitename');?>
// Tên template đang sử dụng

<?php echo $mainframe->getCfg('mailfrom');?>
// Địa chỉ Email của Administrator

<?php echo $this->template?>
// Thư mục chứa template

<?php echo JURI::base();?>
// Địa chỉ thư mục gốc website

-->

Sau khi đặt các thành phần vào giao diện bạn sẽ được kết quả như sau:

Thiết kế template joomla demo

Thiết kế template joomla demo

Kết luận:

Vậy là bước đầu thiết kế ra được template joomla, tuy hơi cùi nhưng không sao chúng ta sẽ tùy biến nó sau nha các bạn. 😀 phần sau mình sẽ tìm hiểu thêm tiện ích cho người dùng sử dụng template.

VN:F [1.9.22_1171]
Rating: 9.3/10 (8 votes cast)
Thiết kế template joomla: dựng giao diện với file index.php, 9.3 out of 10 based on 8 ratings
Share This