Joomla - Tạo mẫu

Trong chương này, chúng ta sẽ nghiên cứu cách create a template trong Joomla.

Tạo mẫu

Sau đây là các bước đơn giản để tạo mẫu trong Joomla:

Step 1 - Tạo một thư mục có tên MyFirstTemplate bên trong của bạn Joomla → Templatesthư mục. Phía trongMyFirstTemplate, tạo thêm 2 thư mục tên là image và CSS để lưu tất cả các hình ảnh và file CSS.

Step 2 - Bên trong MyFirstTemplate thư mục, tạo một tệp có tên là templateDetails.xml, nếu không có tệp này, mẫu sẽ không được hiển thị trong Joomla.

templateDetails.xml

<?xml version = "1.0" encoding = "utf-8"?>

<extension version = "3.0" type = "template">
   <name>Tutorials Point</name>
   <creationDate>2015-06-13</creationDate>
   <author>Tutorials Point</author>
   <authorEmail>[email protected]</authorEmail>
   <authorUrl>http://www.example.com </authorUrl>
   <copyright>Jack 2015</copyright>
   <license>GNU/GPL</license>
   <version>1.0.2</version>
   <description>My First Template</description>
	
   <files>
      <filename>index.php</filename>
      <filename>templateDetails.xml</filename>
      <folder>images</folder>
      <folder>css</folder>
   </files>
	
   <positions>
      <position>breadcrumb</position>
      <position>left</position>
      <position>right</position>
      <position>top</position>
      <position>user1</position>
      <position>user2</position>
      <position>user3</position>
     <position>user4</position>
     <position>footer</position>
   </positions>
	
</extension>

Chi tiết về mã

<files> - Nó chứa các tệp và thư mục có sẵn trong MyFirstTemplate thư mục.
<folder> - Nó đưa toàn bộ các thư mục có sẵn vào MyFirstTemplate thư mục.

Step 3 - Tạo một tệp được gọi là index.php. Điều này giúp thực thi tất cả các trang Joomla.

index.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

   <head>                                         //head section
      <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/<?php echo $this->template; ?>/css/template.css" type="text/css" />
   </head>

   <body>                                          //body section
      <jdoc:include type = "modules" name = "top" />
      <jdoc:include type = "component" />
      <jdoc:include type = "modules" name = "bottom" />
   </body>
	
</html>

?>

Chi tiết về mã

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

Mã này được sử dụng để cho trình duyệt biết loại trang html nào đang được sử dụng và bắt đầu tài liệu HTML bằng cách mô tả ngôn ngữ được sử dụng trong trang web.

<head>                                         //head section
   <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/<?php echo $this->template; ?>/css/template.css" type = "text/css" />
</head>

Những dòng này được sử dụng để liên kết các bảng định kiểu khác nhau cho mẫu trong Joomla.

<body>                                          //body section
   <jdoc:include type = "modules" name = "top" />
   <jdoc:include type = "component" />
   <jdoc:include type = "modules" name = "bottom" />
</body>

Ở đây trong phần nội dung, jdocđược sử dụng để bao gồm đầu ra trong Joomla từ một số phần của hệ thống Joomla. Cácname = "top" được sử dụng để đặt menu ở trên cùng.

Step 4 - Sau khi tạo xong hai tệp này, đăng nhập vào Joomla và nhấp vào Extension → Extension Manager và trang sau sẽ được hiển thị.

Step 5 - Trong trang trên, nhấp vào Discover liên kết, trang sau được hiển thị.

Step 6 - Tiếp theo, nhấp vào Discover để khám phá mẫu mới được tạo như hình dưới đây.

Step 7 - Nhấp vào hộp kiểm để chọn mẫu và nhấp vào Install để cài đặt mẫu trong Joomla.

Step 8 - Sau khi cài đặt mẫu, bạn có thể xem mẫu mới tạo của mình bằng cách nhấp vào Extension → Template Manager. Bạn sẽ thấy mẫu mới tạo của mình được liệt kê như hình bên dưới.

Thanh công cụ

Sau đây là các tùy chọn thanh công cụ trong Trình quản lý Mẫu -

Default - Chọn mẫu mặc định.
Edit - Chọn mẫu để chỉnh sửa.
Duplicate - Nhân bản bản sao của mẫu đã chọn.
Delete - Xóa mẫu cho Joomla.