ก่อนที่ท่านจะทำการปรับแต่ง Template ของเรานั้น ท่านต้องทราบในส่วนของโครงสร้างของเทมเพลตที่เราทำก่อน โดยในแต่ละส่วนจะมีหน้าที่ต่างกัน โดยตัวเทมเพลตจะถูกเก็บไว้ในโฟรเดอร์ Templates ของ Joomla แยกตามชื่อของเทมเพลตนั้นๆ ในที่นี้เราจะใช้เทมเพลตที่ชื่อ ton-num ซึ่งในเทมเพลตจะมีโฟรเดอร์และไฟล์เบื้องต้น ดังนี้
โฟรเดอร์และไฟล์เบื้องต้น ในเทมเพลต
รายละเอียดโฟรเดอร์และไฟล์ดังนี้
- โฟรเดอร์ CSS ไว้เก็บไฟล์ CSS ของเทมเพลต โดยหลักจะมี 3 ไฟล์คือ ไฟล์ CSS หลักชองเทมเพลต , ไฟล์ CSS สำหรับ Mobile , ไฟล์ CSS ของ Bootstrap
- โฟรเดอร์ Fonts เป็นโฟรเดอร์ที่เก็บ fonts ในกรณีที่เราทำการ @font-face ก็จะนำฟอนต์มาเก็บในนี้
- โฟรเดอร์ HTML เป็นที่เก็บรูปแบบเฉพาะของ Extensions ในการทำ Overrides ใน Template
- โฟรเดอร์ Images เป็นที่เก็บรูปภาพที่ใช้กับ template รวมถึง Icons บาง Extensions
- โฟรเดอร์ JS เป็นโฟรเดอร์ที่เก็บไฟล์ Script ต่างๆ ของ Template
- ไฟล์ Component.php เป็นตัวโหลดในส่วน Components
- ไฟล์ Favicon.ico เป็นไอค่อนรูปสัญลักษณ์ที่ติดอยู่แท็บบนสุดซ้ายมือของเว็บไซต์ ในเบราเซอร์
- ไฟล์ Index.php เป็นไฟล์หลักในการรูปแบบโครงสร้างของเทมเพลต รวมถึงการโหลด Script ต่างๆ
- รูป template_preview.png เป็นรูปเทมเพลต
- รูป template_thumbnail.png เป็นรูปเทมเพลตแบบย่อ
- ไฟล์ templateDetails.xml เป็นไฟล์กำหนดค่าหลักของเทมเพลต
ไฟล์หลัก ที่เราต้องทราบและใช้งานในการปรับแต่งเทมเพลตจะมีอยู่ด้วยกัน 3 ไฟล์หลัก
- ไฟล์ Index.php ใช้ในการปรับแต่งโครงสร้างของเทมเพลต รวมถึงการวาง Code หรือ Script ต่างๆ เพิ่มเติม อาทิเช่น Code จาก Google , Facebook pixel เป็นต้น
- ไฟล์ ชื่อเทมเพลต.css (tonnum.css) เป็นไฟล์หลักในการกำหนดรูปแบบ css ของเทมเพลต เราสามารถแก้ไข หรือเพิ่มเติม css จากไฟล์นี้ได้ รวมถึงการทำ Overrides Css Ext.
- ไฟล์ ชื่อเทมเพลต-m.css (tonnum-m.css) เป็นไฟล์หลักในการกำหนดการปรับรูปแบบในการแสดงผลในมือถือและแท็บเล็ต โดยมีการแยกออกเป็นตามขนาด mobile device
