ก่อนที่ท่านจะทำการปรับแต่ง Template ของเรานั้น ท่านต้องทราบในส่วนของโครงสร้างของเทมเพลตที่เราทำก่อน โดยในแต่ละส่วนจะมีหน้าที่ต่างกัน โดยตัวเทมเพลตจะถูกเก็บไว้ในโฟรเดอร์ Templates ของ Joomla แยกตามชื่อของเทมเพลตนั้นๆ ในที่นี้เราจะใช้เทมเพลตที่ชื่อ ton-num ซึ่งในเทมเพลตจะมีโฟรเดอร์และไฟล์เบื้องต้น ดังนี้

5 1

โฟรเดอร์และไฟล์เบื้องต้น ในเทมเพลต

 

รายละเอียดโฟรเดอร์และไฟล์ดังนี้

  • โฟรเดอร์ 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