พัฒนาเว็บไซต์ · WDC-01-19

Joomla Template Development

หลักสูตร Joomla Template Development เป็นการอบรมการปรับแต่งและสร้าง Template บน Joomla 6 ตั้งแต่ปรับ Cassiopeia ด้วย Child Template และ Override จนถึงแปลง HTML และ CSS เป็น Template ของตนเอง เหมาะกับผู้ดูแลเว็บไซต์ Joomla และนักพัฒนาเว็บ จบแล้วได้ Template ของตนเองที่ติดตั้งได้จริง

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 5,310 บาท / ท่าน 5,900 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Joomla ยังเป็น CMS โอเพนซอร์สที่หน่วยงาน สถานศึกษา และองค์กรจำนวนมากใช้ทำเว็บไซต์ หน้าตาของเว็บทั้งหมดขึ้นกับ Template แต่เว็บจำนวนไม่น้อยยังใช้ Template รุ่นเก่าที่ย้ายรุ่นไม่ได้ หรือแก้ไฟล์ของ Template หลักโดยตรงจนการอัปเดตทับงานที่แก้ไว้ ผู้ดูแลเว็บจึงต้องเข้าใจโครงสร้าง Template ของ Joomla รุ่นปัจจุบัน ทั้งการปรับแต่งอย่างปลอดภัยและการสร้าง Template ของตนเอง

หลักสูตรนี้ฝึกบน Joomla 6 เริ่มจากเข้าใจระบบ Template และปรับแต่ง Cassiopeia ซึ่งเป็น Template มาตรฐาน ผ่าน Template Style, user.css, Child Template และ Override จากนั้นสร้าง Template ของตนเองจากหน้า HTML และ CSS สมัยใหม่ เขียน templateDetails.xml จัดการไฟล์ CSS และ JavaScript ด้วย Web Asset Manager เพิ่ม Template Parameter และ Module Chrome ก่อนจัดสไตล์ส่วนประกอบมาตรฐาน ตรวจ Accessibility และความเร็ว แพ็กเกจเป็นไฟล์ ZIP และปิดท้ายด้วย Workshop สร้าง Template ที่มีเอกลักษณ์ของตนเอง (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เข้าใจโครงสร้าง Template, Template Style และตำแหน่ง Module ของ Joomla 6
ปรับแต่ง Cassiopeia อย่างปลอดภัยด้วย user.css, Child Template และ Override
แปลงหน้า HTML และ CSS เป็น Template ของ Joomla ที่ติดตั้งได้จริง
จัดการไฟล์ CSS และ JavaScript ด้วย Web Asset Manager และเพิ่ม Template Parameter ได้
จัดสไตล์เมนูและส่วนประกอบมาตรฐานให้รองรับมือถือและผ่านหลัก Accessibility
แพ็กเกจ ติดตั้ง และดูแล Template ให้ใช้ได้ทั้งบน Joomla 6 และ Joomla 5

หลักสูตรนี้เหมาะสำหรับ

ผู้ดูแลเว็บไซต์ที่พัฒนาด้วย Joomla ในหน่วยงาน สถานศึกษา และองค์กร
นักพัฒนาเว็บที่ต้องการสร้าง Template ของ Joomla ให้ลูกค้าหรือองค์กร
ผู้เริ่มต้นใช้ Joomla ที่อยากปรับหน้าตาเว็บให้มีเอกลักษณ์
ผู้ที่ต้องย้ายเว็บ Joomla รุ่นเก่าและต้องทำ Template ใหม่

พื้นฐานของผู้เข้าอบรม

เข้าใจ HTML และ CSS เบื้องต้น หากยังไม่คล่องจะมีการทบทวนให้
เคยใช้หรือเห็นหน้าผู้ดูแลระบบของ Joomla มาบ้างจะเรียนได้เร็วขึ้น
ไม่จำเป็นต้องเขียน PHP เป็น เพราะใช้เฉพาะคำสั่งที่ Template ต้องใช้
ติดตั้งและถอนโปรแกรมบน Windows หรือ macOS ได้

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Joomla Template สร้างและปรับแต่งเทมเพลต เนื้อหาเขียนใหม่ทั้งหมดให้ตรงกับ Joomla 6 และ Template มาตรฐาน Cassiopeia อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ทุกหัวข้อ ระดับ Beginner วันแรกเข้าใจระบบ Template และปรับแต่ง Cassiopeia อย่างปลอดภัยด้วย Template Style, user.css, Child Template และ Override วันที่สองสร้าง Template ของตนเองจากหน้า

HTML และ CSS พร้อม templateDetails.xml, Web Asset Manager, Template Parameter และ Module Chrome วันที่สามจัดสไตล์ส่วนประกอบมาตรฐาน ตรวจ Accessibility และความเร็ว แพ็กเกจเป็นไฟล์ ZIP และทำ Workshop สร้าง Template ของตนเอง โครงสร้าง Template เดียวกันใช้ได้กับ Joomla 5 ซึ่งได้รับเฉพาะการแก้ไขด้านความปลอดภัยตั้งแต่เดือนตุลาคม 2026 วิทยากรจะชี้จุดที่ต้องตรวจ ผู้เรียนจะได้ไฟล์ตั้งต้นและ Template เฉลยครบทุก Lab กลับไปใช้งานต่อ

Day 1 ระบบ Template และการปรับแต่ง Cassiopeia

Section 1: Lab: เตรียมเครื่องมือและติดตั้ง Joomla 6

รุ่นของ Joomla ในปัจจุบัน: Joomla 6 และเว็บที่ยังใช้ Joomla 5
ติดตั้ง Joomla 6 บน Docker หรือ Laragon หรือ XAMPP พร้อม PHP 8.3
ตั้งค่า VS Code และ DevTools ของเบราว์เซอร์สำหรับงาน Template
สร้างเนื้อหาและเมนูตัวอย่างสำหรับทดสอบ Template
Lab: ติดตั้งเว็บ Joomla 6 ให้พร้อมใช้ตลอดหลักสูตร

Section 2: ทำความเข้าใจระบบ Template ของ Joomla

Site Template กับ Administrator Template: Cassiopeia และ Atum
Template กับ Template Style ต่างกันอย่างไร
ไฟล์หลัก: index.php, templateDetails.xml, error.php, offline.php และ component.php
โฟลเดอร์ templates และ media สำหรับไฟล์ CSS, JavaScript และรูปภาพ
ตำแหน่ง Module และคำสั่ง jdoc:include

Section 3: Lab: ปรับแต่ง Cassiopeia ผ่าน Template Style

ตั้งค่าโลโก้ ชื่อเว็บ สี ฟอนต์ และความกว้างของเลย์เอาต์
เพิ่ม CSS และ JavaScript ของตนเองด้วย user.css และ user.js
ใช้ CSS Custom Properties ปรับสีทั้งเว็บจากจุดเดียว
แก้ไฟล์ผ่าน Template Manager หรือ VS Code อย่างปลอดภัย
Lab: ปรับ Cassiopeia ให้เป็นสีและฟอนต์ขององค์กร

Section 4: Lab: Child Template

Child Template คืออะไร และทำไมการอัปเดต Joomla จึงไม่ทับงานที่แก้
สร้าง Child Template จาก Cassiopeia
Override เฉพาะไฟล์ที่ต้องการ และรับไฟล์ที่เหลือจาก Parent
Lab: สร้าง Child Template ที่เปลี่ยนส่วนหัวและส่วนท้ายของเว็บ

Section 5: Lab: Template Override และ Layout Override

สร้าง Override ของ Component และ Module จาก Template Manager
โครงสร้างโฟลเดอร์ html และการแก้หน้าบทความกับหน้า Category Blog
Alternative Layout สำหรับเลือกหน้าตาเป็นรายเมนูหรือรายโมดูล
Layout Override ใน html/layouts และการตรวจ Override หลังอัปเดต
Lab: ปรับหน้าบทความให้แสดงผู้เขียน วันที่ และรูปภาพแบบใหม่

Day 2 สร้าง Template ของตนเองจาก HTML

Section 6: Lab: ออกแบบเลย์เอาต์ด้วย HTML และ CSS สมัยใหม่

โครงหน้าแบบ Semantic HTML: header, nav, main, aside และ footer
จัดเลย์เอาต์ด้วย CSS Grid และ Flexbox
Responsive แบบ Mobile-first และ Media Query
ตรวจและแก้ CSS ด้วย DevTools ของเบราว์เซอร์
Lab: สร้างหน้า HTML ตั้งต้นแบบหลายคอลัมน์

Section 7: Lab: แปลง HTML เป็น Template ของ Joomla

เปลี่ยน index.html เป็น index.php และส่วนหัวของไฟล์ที่ Joomla ต้องการ
แทรก metas, styles, scripts, message และ component ด้วย jdoc:include
วางตำแหน่ง Module และซ่อนคอลัมน์ที่ไม่มีโมดูลด้วย countModules
ใส่ Favicon และภาษาของหน้าเว็บ
Lab: แสดงเนื้อหาจริงของ Joomla ใน Template ใหม่

Section 8: Lab: templateDetails.xml และ Web Asset Manager

เขียน templateDetails.xml: ข้อมูล Template, files, media และ positions
ลงทะเบียน CSS และ JavaScript ใน joomla.asset.json
เรียกใช้ Asset และ Dependency จาก index.php
ใช้ Bootstrap 5 ที่มากับ Joomla เฉพาะส่วนที่ต้องการ
Lab: ติดตั้ง Template จากโฟลเดอร์และตั้งเป็นค่าเริ่มต้น

Section 9: Lab: Template Parameter

เพิ่มช่องตั้งค่าใน templateDetails.xml เช่น โลโก้ สี และรูปแบบเลย์เอาต์
อ่านค่า Parameter ใน index.php แล้วเปลี่ยนหน้าตาตามที่ตั้ง
ไฟล์ภาษาสำหรับชื่อและคำอธิบายของช่องตั้งค่า
Lab: ให้ผู้ดูแลเว็บเปลี่ยนสีหลักและโลโก้ได้เองจากหลังบ้าน

Section 10: Lab: Module Chrome และการจัดวางโมดูล

Module Style ที่มีมาในตัวและการเลือกจากหน้าตั้งค่าโมดูล
สร้าง Module Chrome ของตนเองใน html/layouts/chromes
Module Class และ Header Class สำหรับจัดสไตล์รายโมดูล
แสดงโมดูลภายในเนื้อหาและกำหนดให้แสดงเฉพาะบางหน้า
Lab: ทำกล่องโมดูลแบบการ์ดและแบบแถบไฮไลต์

Day 3 จัดสไตล์ ตรวจคุณภาพ และส่งมอบ Template

Section 11: Lab: จัดสไตล์เมนูและส่วนประกอบมาตรฐาน

เมนูหลักแบบ Dropdown และเมนูมือถือ
Breadcrumbs, Pagination และข้อความแจ้งเตือนของระบบ
หน้า Category List, Blog และบทความ
แบบฟอร์ม Contact, Login และ Search
Lab: จัดสไตล์ทุกหน้าหลักของเว็บตัวอย่างให้เป็นชุดเดียวกัน

Section 12: Lab: Template Style หลายแบบตามหน้าเมนู

สร้าง Template Style หลายชุดจาก Template เดียว
กำหนดหน้าแรกให้ใช้เลย์เอาต์ต่างจากหน้าอื่นตามหน้าเมนู
ออกแบบหน้า error.php สำหรับหน้า 404 และหน้า offline.php
Lab: ทำหน้าแรกแบบ Landing Page และหน้าภายในแบบมี Sidebar

Section 13: คุณภาพของ Template: Accessibility และความเร็ว

Accessibility เบื้องต้น: สีตัดกัน ลำดับหัวข้อ และการใช้คีย์บอร์ด
Dark Mode ด้วย prefers-color-scheme
ลดขนาดรูปและไฟล์ CSS และโหลดสคริปต์แบบ defer
ตรวจด้วย Lighthouse และแก้จุดที่ได้คะแนนต่ำ
โครงสร้างหัวข้อและ HTML ที่ช่วยเรื่อง SEO

Section 14: Lab: แพ็กเกจ ติดตั้ง และดูแล Template

จัดไฟล์และบีบอัดเป็น ZIP Package พร้อมรุ่นของ Template
ติดตั้งบนเว็บใหม่และแก้ปัญหาที่พบบ่อยจากการติดตั้ง
อัปเดต Template โดยไม่ทับการตั้งค่าของผู้ใช้
ตรวจ Template บนเว็บ Joomla 5 ที่ยังใช้งานอยู่และเตรียมย้ายเว็บขึ้น Joomla 6
Lab: ติดตั้ง Template ของตนเองบนเว็บที่ติดตั้งใหม่

Section 15: Workshop: สร้าง Template ที่มีเอกลักษณ์ของตนเอง

เลือกโจทย์เว็บหน่วยงาน ร้านค้า หรือโรงเรียน แล้วร่างเลย์เอาต์
สร้าง Template พร้อม Parameter, Module Chrome และ Override
ตรวจบนมือถือ ตรวจ Accessibility และแพ็กเกจเป็นไฟล์ ZIP
นำเสนอผลงานและรับคำแนะนำจากวิทยากร

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Template ของ Joomla ประกอบด้วยไฟล์อะไรบ้าง

Template ของ Joomla 6 มีไฟล์หลักคือ index.php ซึ่งเป็นโครงหน้าที่กำหนดตำแหน่งวาง Module และ Component, templateDetails.xml ที่บอกชื่อ รุ่น รายชื่อไฟล์ ตำแหน่ง Module และช่องตั้งค่าของ Template และ joomla.asset.json ที่ลงทะเบียนไฟล์ CSS และ JavaScript ให้ Web Asset Manager โหลด นอกจากนี้อาจมี error.php, offline.php, โฟลเดอร์ html สำหรับ Override และไฟล์ CSS รูปภาพ และ JavaScript ในโฟลเดอร์ media เมื่อรวมเป็นไฟล์ ZIP ก็ติดตั้งผ่านหน้าผู้ดูแลระบบได้

แปลงหน้าเว็บ HTML เป็น Template ของ Joomla มีขั้นตอนอย่างไร

เริ่มจากออกแบบหน้าเว็บเป็น HTML และ CSS ให้เสร็จ จากนั้นเปลี่ยน index.html เป็น index.php แล้วแทนส่วนที่เปลี่ยนตามหน้าด้วย jdoc:include สำหรับ Component, Module, ข้อความระบบ และไฟล์ CSS กับ JavaScript เขียน templateDetails.xml ระบุไฟล์และตำแหน่ง Module ลงทะเบียน CSS และ JavaScript ใน joomla.asset.json แล้วบีบอัดเป็นไฟล์ ZIP และติดตั้งผ่านหน้าผู้ดูแลระบบ หลักสูตรนี้ฝึกครบทุกขั้นตอนจนติดตั้งและปรับแต่งได้จริง

ควรแก้ Template มาตรฐานอย่าง Cassiopeia โดยตรงหรือไม่

ไม่ควร เพราะเมื่ออัปเดต Joomla ไฟล์ของ Cassiopeia จะถูกเขียนทับและงานที่แก้ไว้จะหายไป ทางที่ปลอดภัยคือปรับผ่านหน้าตั้งค่าของ Template Style เพิ่ม CSS และ JavaScript ใน user.css และ user.js สร้าง Child Template เมื่อต้องเปลี่ยนไฟล์ของ Template และใช้ Template Override เมื่อต้องเปลี่ยนหน้าตาของบทความหรือโมดูล หลักสูตรนี้ฝึกทั้งสามวิธีพร้อมบอกว่าเมื่อไรควรใช้แบบไหน

หลักสูตร Joomla Template Development เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ดูแลเว็บไซต์ที่พัฒนาด้วย Joomla นักพัฒนาเว็บที่ต้องทำ Template ให้ลูกค้าหรือองค์กร และผู้เริ่มต้นใช้ Joomla ที่อยากให้เว็บมีหน้าตาเป็นของตนเอง ควรเข้าใจ HTML และ CSS เบื้องต้น ซึ่งจะมีการทบทวนให้ ไม่จำเป็นต้องเขียน PHP เป็น เพราะใช้เฉพาะคำสั่งที่ Template ต้องใช้

เรียนจบหลักสูตร Joomla Template Development แล้วทำอะไรได้บ้าง

ปรับแต่ง Cassiopeia อย่างปลอดภัยด้วย user.css, Child Template และ Override แปลงหน้า HTML และ CSS เป็น Template ของ Joomla 6 เพิ่ม Template Parameter และ Module Chrome จัดสไตล์ส่วนประกอบมาตรฐานให้รองรับมือถือ แพ็กเกจ Template เป็นไฟล์ ZIP และติดตั้งบนเว็บจริง พร้อมกลับไปพร้อม Template ของตนเองหนึ่งชุด ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Joomla Template Development ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ใช้ดีไซน์และเว็บไซต์ Joomla ขององค์กรเป็นโจทย์ในการสร้าง Template ขอข้อเสนอการจัดอบรมได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449