Joomla - การสร้างเทมเพลต

ในบทนี้เราจะศึกษาวิธีการ create a template ใน Joomla

การสร้างเทมเพลต

ต่อไปนี้เป็นขั้นตอนง่ายๆในการสร้างเทมเพลตใน Joomla -

Step 1 - สร้างโฟลเดอร์ชื่อ MyFirstTemplate ภายในไฟล์ Joomla → Templatesโฟลเดอร์ ข้างในMyFirstTemplateสร้างโฟลเดอร์เพิ่มอีก 2 โฟลเดอร์ชื่อรูปภาพและ CSS เพื่อบันทึกรูปภาพและไฟล์ CSS ทั้งหมด

Step 2 - ภายใน MyFirstTemplate สร้างไฟล์ชื่อ as templateDetails.xmlหากไม่มีไฟล์นี้เทมเพลตจะไม่แสดงใน 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>

รายละเอียดของรหัส

<files> - มีไฟล์และโฟลเดอร์ที่มีอยู่ใน MyFirstTemplate โฟลเดอร์
<folder> - ใช้โฟลเดอร์ทั้งหมดที่มีอยู่ในรูปแบบ MyFirstTemplate โฟลเดอร์

Step 3 - สร้างไฟล์ชื่อ index.php. สิ่งนี้ช่วยในการเรียกใช้งานหน้า 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>

?>

รายละเอียดของรหัส

<?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; ?>" >

รหัสนี้ใช้เพื่อบอกเบราว์เซอร์ว่ากำลังใช้เพจ html ประเภทใดและเริ่มต้นเอกสาร HTML โดยอธิบายภาษาที่ใช้ในเว็บไซต์

<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>

เส้นเหล่านี้ใช้เพื่อเชื่อมโยงสไตล์ชีตต่างๆสำหรับเทมเพลตใน Joomla

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

ที่นี่ในส่วนของร่างกายไฟล์ jdocใช้เพื่อรวมเอาท์พุทใน Joomla จากบางส่วนของระบบ Joomla name = "top" ใช้เพื่อตั้งค่าเมนูที่ด้านบน

Step 4 - หลังจากสร้างทั้งสองไฟล์แล้วให้เข้าสู่ระบบ Joomla และคลิกที่ Extension → Extension Manager และหน้าต่อไปนี้จะปรากฏขึ้น

Step 5 - ในหน้าด้านบนคลิกที่ Discover หน้าต่อไปนี้จะปรากฏขึ้น

Step 6 - จากนั้นคลิกที่ไฟล์ Discover เพื่อค้นหาเทมเพลตที่สร้างขึ้นใหม่ดังที่แสดงด้านล่าง

Step 7 - คลิกที่ช่องทำเครื่องหมายเพื่อเลือกเทมเพลตและคลิกที่ Install ปุ่มเพื่อติดตั้งเทมเพลตใน Joomla

Step 8 - หลังจากติดตั้งเทมเพลตแล้วคุณสามารถดูเทมเพลตที่สร้างขึ้นใหม่ได้โดยคลิกที่ Extension → Template Manager. คุณจะเห็นเทมเพลตที่สร้างใหม่ของคุณแสดงอยู่ดังที่แสดงด้านล่าง

แถบเครื่องมือ

ต่อไปนี้เป็นตัวเลือกแถบเครื่องมือในตัวจัดการเทมเพลต -

Default - เลือกเทมเพลตเริ่มต้น
Edit - เลือกเทมเพลตสำหรับแก้ไข
Duplicate - ทำสำเนาของเทมเพลตที่เลือก
Delete - ลบเทมเพลตสำหรับ Joomla