หน่วยท่ี 3 ปรับเปลี่ยนหน้าเวบ็ไซต์ด้วยเทมเพลต (template)

ท าความรู้จักกับเทมเพลต

เทมเพลต (template) เปรียบเสมือนหน้ากากของเว็บไซต์ หรือรูปแบบเว็บไซต์ส าร็จรูปที่ยังไม่มีการ

ใส่เนื้อหาเข้าไป โดยแต่ละเทมเพลตจะประกอบไปด้วยรูปแบบการแสดงเนื้อหาตัวอักษร และการจัดวาง

ต าแหน่งโมดูลที่แตกต่างกันออกไป ซึ่งง่ายต่อการปรับแต่ง หรือเลือกใช้งานหรือม็ได้ ทั้งนี้การใช้เทมเพลตควร

เลือกใช้ให้เหมาะสมกับเนื้อหาของเว็บไซต์ เช่น เว็บไซต์เกี่ยวกับเทคโนโลยีควรเลือกใช้เทมเพลตที่เก่ียวกับ

เทคโนโลยีคอมพิวเตอร์ เป็นต้น เพ่ือสื่อถึงเนื้อหาที่น าเสนอในเว็บไซต์

ตัวอย่างเทมเพลตปรเภทต่างๆ

การเข้าถึงหน้าเพจส าหรับจัดการเทมเพลต

การเข้าถึงหน้าเพจส าหรับการจัดการเทมเพลต สามารถท าได้ 2 วิธีด้วยกันคือ

- วิธีที่ 1 คลิกเมนู Extensions > Template Manager

- วิธีที่ 2 คลิกไอคอน template Manager ที่แผงควบคุมหลัก

จากนั้นจะเข้าสู่หน้าเพจส าหรับจัดการเทมเพลต ดังรูป

ส าหรับรายละเอียดของแถบเครื่องมือในหน้าเพจการจัดการเทมเพลต มีดังนี้

การเปลี่ยนเทมเพลต

ตามปกติ Joomla! จะมีเทมเพลตติดตั้งมาให้จ านวนหนึ่งเมื่อติดตั้ง Joomla! แล้ว หากต้องการใช้เทม

เพลตดังกล่าว สามารถท าได้ดังนี้

1. คลิกเมนู Extensions > Template Manager

2. จากนั้นจะแสดงรายชื่อเทมเพลตที่ได้ติดตั้งไว้แล้วทั้งหมด ให้คลิกรูปดาว ในคอลัมน์

Default ของบรรทัดเทมเพลตที่ต้องการเปลี่ยน (หรือเลือกเทมเพลตแล้วคลิกปุ่ม Make

Default บนแถบเครื่องมือ)

เมื่อเปิดเว็บไซต์อีกครั้ง จะพบว่าเทมเพลตเปลี่ยนไปตามที่ได้เลือกแล้ว ดังภาพ

ติดตั้งและเลอืกใช้เทมเพลตที่ดาวน์โหลด

ส าหรับเทมเพลตใน Joomla! นั้นมีทั้งแบบให้ดาวน์โหลดฟรีและแบบที่ต้องเสียเงินซื้อ แต่สิ่งที่ส าคัญก็

คือจะต้องเลือกเทมเพลตที่ตรงกับเวอร์ชั่น Joomla! ที่เราใช้งานอยู่

ตัวอย่างเว็บไซต์ที่ให้บริการดาวน์โหลดเทมเพลตส าหรับ Joomla! ฟรี เช่น

- www.joomlart.com/joomla/template/showcase

- www.joomla24.com

- www.siteground.com/joomla-hosting/joomla15-templates.htm

- www.themesbase.com/Joomla-Template/

- http://joomlatp.com

การติดตั้งเทมเพลตทีด่าวน์โหลดมา

เทมเพลตที่ดาวน์โหลดมาแล้ว สามารถท าการติดตั้งได้ดังนี้

1. คลิกเมนู Extensions > Extension Manager

2. คลิกแท็บ Install

3. คลิกปุ่ม Choose File หรือ เลือกไฟล์ ในส่วน Upload Package File แล้วเลือกไฟล์เทมเพลตที่

ดาวน์โหลดมา

4. คลิกปุ่ม Upload & Install

การเลือกใช้เทมเพลตทีด่าวน์โหลดมา

เราสามารถเลือกใช้เทมเพลตที่ดาวน์โหลดมาได้เช่นเดียวกับการเปลี่ยนเทมเพลตในหัวข้อที่

ผ่านมา โดยมีขั้นตอนดังนี้

1. คลิกเมนู Extensions > Template Manager

2. เลือกเทมเพลตที่ต้องการใช้

3. คลิกปุ่ม Make Default บนแถบเครื่องมือ (หรือคลิกรูปดาว ในคอลัมน์ Default ของบรรทัด

นั้น)

เมื่อลองเปิดเว็บไซต์ จะพบว่าหน้าตาเว็บไซต์เปลี่ยนไปตามเทมเพลตที่เลือกใช้ ดังรูป

ลบเทมเพลตที่ไม่ใช้แลว้

เทมเพลตที่ไม่ได้ใช้งานแล้วเราควรลบออกจาก Joomla! เพ่ือประหยัดพื้นที่จัดเก็บข้อมูลและไม่ให้

เสียมากในการอัพโหลดข้อมูลเมื่อใช้งานจริง ซึ่งเทมเพลตที่ต้องการลบจะต้องไม่ใช่เทมเพลตที่ก าลังใช้งานอยู่

ดังนั้น หากต้องการลบเทมเพลตที่ก าลังใช้งานอยู่จะต้องเปลี่ยนใช้งานเทมเพลตอื่นเสีย่อน แล้วจึงท าตาม

ขั้นตอนดังนี้

1. คลิกเมนู Extensions >

Extension Manager

2. คลิกแท็บ Manager

3. เลือกรายการ Template

เพ่ือกรองให้แสดงเฉพาะ

Templeat เท่านั้น

4. เลือกเทมเพลตที่ต้องการ

ลบออก

5. คลิกปุ่ม Uninstall

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

การดตูัวอย่างเทมเพลต (preview)

หากต้องการดูตัวอย่างเทมเพลตที่ได้ติดตั้งแล้วใน Joomla! สามารถท าได้ดังนี้

1. คลิกเมนู Extensions > Template Manager

2. คลิกปุ่ม Options บนแถบเครื่องมือ

3. คลิกแท็บ Template

4. เลือก Enabled ที่ preview Module Positions เพ่ือแสดงหน้าตาเทมเพลตพร้อมต าแหน่งโมดูล

5. คลิกปุ่ม Save & Close บนแถบเครื่องมือ

6. คลิกแท็บ templates

7. จากนั้นเลือกเทมเพลตที่ต้องการอแล้วคลิกลิงค์ Preview

จากนั้นจะแสดงตัวอย่างหน้าตาเทมเพลตพร้อมต าแหน่งโมดูล ดังรูป

ก็อปป้ีเทมเพลต

ในกรณีที่ต้องการสร้างหรือจัดต าแหน่งวางโมดูลในเทมเพลตที่เลือกใช้ใหม่โดยไม่ต้องารให้เทมเพลต

ต้นฉบับที่ติดตั้งนั้นเปลี่ยนแปลงปด้วย หากต าแหน่งโมดูลหรือเกิดมีอะไรผิดพลาดจะได้เรียกใช้เทมเพลต

ต้นฉบับได้ซ่งเราสามารถก็อปปี้เทมเพลตนั้นให้เป็นเทมเพลตที่สร้างใหม่โดยเราก่อนได้โดยมีขั้นตอนดังนี้

1. คลิกเมนู Extensions > Template Manager

2. คลิกแท็บ Template

3. คลิกท่ีชื่อเทมเพลตที่ต้องการก็อปปี้

4. ที่ช่อง New Template Name ให้ก าหนดชื่อเทมเพลตใหม่ตามต้องการ

5. คลิกปุ่ม Copy Template

6. เมื่อก็อปปี้เทมเพลตเสร็จจะแสดงรายการเทมเพลตในแท็บ Styles จากนั้นให้คลิกเลือกใช้เทมเพลต

นั้น

ปรับแต่งเทมเพลตเบ้ืองต้น

เทมเพลตที่เลือกใช้งาน เราสามารถปรับแต่งรายละเอียดต่างๆ เช่น รูปภาพ โลโก้ ได้

วิธีการปรับแต่งเทมเพลต สามารถท าได้ 2 แบบ คือ ปรับแต่งที่ Options หรือปรับแต่งด้วยโค้ด ทั้งนี้

ขึ้นอยู่กับเทมเพลตที่ใช้งาน เนื่องจาบางเทมเพลตสามารถปรับแต่งที่ Options ได้โดยตรง แต่บางเทมเพลตไม่

สามารถแก้ไขได้โดยตรงจึงต้องแก้ไขด้วยโค้ด

รูปแบบที่ 1 ปรับแต่งที่ Options

บางเทมเพลตเราสามารถปรับแต่ง

รายละเอียดต่างๆได้โยตรง ท าให้สะดวก

ต่อผู้ใช้อย่างมาก โดยมีขั้นตอนดังนี้

1. คลิกเมนู Extensions > Template

Manager

2. คลิกแท็บ Styles

3. คลิกชื่อเทมเพลตที่ต้องการปรับแต่ง

(หรือเลือกเทมเพลต แล้วคลิกปุ่ม

Edit บนแถบเครื่องมือ)

4. ปรับแต่งรายละเอียดตามต้องการในส่วน Basic Options

5. เมื่อปรับแต่งเสร็จแล้วให้คลิกปุ่ม Save&Close บนแถบเครื่องมือ

รูปแบบที่ 2 ปรับแต่งดว้ยโค้ด

บางเทมเพลตอาจปรับแต่งรายละเอียดอาจจะยุ่งยากส าหรับผู้เริ่มต้นใช้งาน เนื่องจากไม่สามารถ

ปรับแต่งได้โดยใช้ปุ่ม Options ดังนั้น เราจะต้องปรับแต่งท่ีโค้ดแทน ซึ่งรูปแบบนี้ผู้ใช้ควรจะมีความรู้เรื่องภาษ

HTML,PHP พอสมควร โดยมีขั้นตอนหลักๆ ดังนี้

1. คลิกเมนู Extensions > Template Manager

2. คลิกแท็บ Templates

3. คลิกชื่อเทมเพลตที่ต้องารปรับแต่ง

4. จากนั้นจะแสดงส่วนประกอบ

ของไฟล์เทมเพลต ซึ่งจะประกอบ

ด้วย 2 ส่วนคือ ส่วนหน้าเว็บ

เทมเพลต และส่วนควบคุมการ

แสดงผลตัวอักษร โดยแต่ละเทมเพลต

จะมีรายารส่วนประกอบต่างกัน

ออกไป

5. หาโค้ดท่ีต้องการปรับแต่ง แล้วท าการแก้ไขตามต้องการ

6. เมื่อสร็จแล้ว ให้คลิกปุ่ม Save&Close บนแถบเครื่องมือ

ตัวอย่างการปรับแต่งเทมเพลตด้วยโค้ด

ตัวอย่างท่ี 1 เปลี่ยน Footer ในเทมเพลต

Footer หรือข้อความส่วนท้ายเว็บเพจ ก็คือ ข้อความที่ใช้แสดงสิทธิ์ ลิขสิทธิ์ ของเว็บไซต์นั้นๆ เช่น

Copyright by เป็นต้น สามารถท าได้โดยไขโค้ดในส่วนหน้าเว็บเทมเพลต (Template Master Files) แล้วท า

ตามข้ันตอนดังนี้

1. หาข้อความส่วนท้ายของเว็บเพจในโค้ดท่ีเป็น footer

2. แก้ไขข้อความส่วนท้ายตามต้องการ

3. คลิกปุ่ม Save&Close บนแถบเครื่องมือ

จากนั้นเว็บเพจจะแสดงข้อความส่วนท้ายตามที่เปลี่ยน ดังภาพ

ตัวอย่างท่ี 2 เปลี่ยน Logo ในเทมเพลต

หากต้องการเปลี่ยน logo ในเทมเพลต สามารถท าได้ 2 รูปแบบ คือ เปลี่ยนโดยใช้ชื่อเดิม หรือเปลี่ยน

โดยใช้ชื่อใหม่ ส าหรับตัวอย่างนี้จะใช้วิธีเปลี่ยนโดยใช้ชื่อเดิม สามารถท าได้ง่ายๆ ดังนี้

1. อันดับแรกให้เปลี่ยนชื่อโลโก้

เดิมเป็นชื่ออ่ืนก่อน เพ่ือไม่

ให้ชื่อซ้ ากัน โดยเข้าไปที่

โฟลเดอร์ images ของ

เทมเพลตที่เลือกใช้งาน

2. สร้าง logo ใหม่ด้วยขนาดที่เหมาะสม แล้วบันทึก

ไว้ในโฟลเดอร์ images ของเทมเพลตที่เลือกใช้งาน

ด้วยชื่อไฟล์เดิม

จากนั้นเว็บเพจจะแสดงโลโก้ตามที่เปลี่ยน ดังภาพ

ในกรณีที่ต้องการเปลี่ยนขนาด Logo หรือระยะการจัดวาง logo สามารถท าได้ดังนี้

1. เข้าไปแก้ไขเทมเพลต โดยคลิกท่ี Edit css/template.css ในส่วน Stylesheets

2. ค้นหาไฟล์ภาพ Logo จานั้นให้ไขขนาดของ Logo หรือระยะการัดวาง logo ตามต้องการ

Left ระยะห่างจากขอบด้านซ้ายของหน้าเว็บเพจ

Top ระยะห่างจากขอบด้สนบนของหน้าเว็บเพจ

Width ความกว้างของ Logo

Height ความสูงของ Logo

3. เมื่อแก้ไขเสร็จเรียบร้อยแล้ว ให้คลิกปุ่ม Save&Close บนแถบเครื่องมือ

ตัวอย่างท่ี 3 เปลี่ยนภาพราฟิก Header ในเทมเพลต

หากต้องการเปลี่ยน Header หรือป้ายกราฟิกที่แสดงในส่วนหัวของหน้าเว็บเพจ สามารถท าได้ 2

รูปแบบ เช่นกัน ส าหรับตัวอย่างนี้จะใช้วิธีเปลี่ยนโดยใช้ชื่อใหม่ สามารถท าได้ดังนี้

1. สร้าง Header ใหม่ด้วยขนาดที่

เหมาะสม แล้วบันทึกด้วยชื่อใหม่ไว้

ในโฟลเดอร์ images ของเทมเพลต

ที่เลือกใช้งาน

2. เข้าไปแก้ไขเทมเพลตที่ใช้งาน โดยคลิกที่ Edit css/template.css ในส่วน stylesheets

3. ค้นหาไฟล์ภาพ Header จากนั้นให้แก้ไขขนาดของ Header และชื่อภาพ Header ตามต้องการ

4. เมื่อแก้ไขเสร็จเรียบร้อยแล้ว ให้คลิปุ่ม Save&Close บนแถบเครื่องมือ

จากนั้นเว็บเพจจะแสดงภาพกราฟิก Header ตามท่ีเปลี่ยน ดังภาพ

ตัวอย่างท่ี 4 เปลี่ยน Header แบบ Flash ในเทมเพลต

ในกรณีที่ต้องการเปลี่ยน Header แบบภาพกราฟิกเป็นไฟล์ Flash สามารถท าได้เช่นกันดังขั้นตอน

ต่อไปนี้

1. สร้างไฟล์ Flash Header ด้วยขนาดที่เหมาะสม จากนั้นให้บันทึกและ Export ไฟล์ Flash เป็น

นามสกุล .SWF ไว้ในโฟลเดอร์ images ของเทมเพลตที่เลือใช้งาน

2. เข้าไปแก้ไขเทมเพลตที่ใช้งาน โดย

คลิกท่ี Edit main page template

ในส่วน Template Master Files

3. ค้นหาโค้ดคลาสแสดงภาพหราฟิก

JPEG โดยมักมีค าว่า header ซึ่งอยู่

ภายในแท็ก<div>…</div>จากนั้น

ให้แทรกแท็ก <!— ด้านหน้าค าสั่ง

และแท็ก -- > ด้านหลังค าสั่ง เพ่ือสั่ง

ไม่ให้ประมวลผลค าสั่งนี้

4. แทรกโค้ด Flash โดนระบุไฟล์ Flash

และไดเร็คทอรีที่เก็บไฟล์ Flash

ให้ถูกต้อง

5. เมื่อเสร็จเรียบร้อยแล้วให้คลิกปุ่ม Save&Close บนแถบเครื่องมือ

จากนั้นเว็บเพจจะแสดง Header แบบ Flash ตามท่ีเปลี่ยน ดังภาพ

Note

นอกจากนี้ยังสามารถใช้แท็ก <embed src>…</embed> ซึ่งเป็นต าสั่งสั้นๆ ได้อีกด้วย

ดังตัวอย่าง <embed src=”higkt” width=”1000” height=”376” wmode=”transparent”/>

โดยแอตตริบิวต์ wmode=”transparent” เป็นการก าหนดให้แสดงวัตถุท่ีอยู่ด้านล่างไฟล์ Flash หากต้องการ

ให้แสดงเฉพาะไฟล์ Flash ให้แอตตริบิวต์ wmode=”transparent” ออก

บทเรียนที่ 4 การใช้งานระบบจัดการไฟล์มีเดีย (Media Manager)

การใช้งาน Media Manager

ส าหรับการใช้งานระบบจัดการไฟล์มีเดีย จะเหมือนกับการใช้งานหน้าต่างวินโดว์ เมื่อเปิดใช้งานไฟล์

มีเดียทั้งหมดจะอยู่ภายใต้โฟลเดอร์ images ของ Joomla! ซึ่งการใช้งาน Media Manager สามารถท าได้ 2

วิธีด้วยกันคือ

- วิธีที่ 1 คลิกเมนู Content > Media Manager

- วิธีที่ 2 คลิกไอคอน Meia Manager ที่แผงควบคุมหลัก

จากนั้นจะเข้าสู่หน้าเว็บเพจ Media Manager ซึ่งประกอบด้วยส่วนต่างๆ ดังนี้

การสร้างโฟลเดอร์ใหม่

ในแต่ละเว็บ ไซตจ์ะประกอบด้วยไฟล์มีเดียมากมายท่ีใช้ประกอบเนื้อหาหรือบทความ

ดังนั้นผู้ดูแลเว็บไซต์จะต้องสร้างโฟลเดอร์ใหม่ขึ้นมาเพื่อแยกจัดเบไฟล์มีเดียเหล่านี้ให้เป็นหมวดหมู่

ไม่ปะปนัน ซึ่งจะท าให้ง่ายและสะดวกต่อการจัดการ เช่น โฟลเดอร์ pic_products ส าหรับจดเก็บ

รูปภาพสินค้า,โฟลเดอร์ pic_articles ส าหรับจัดเก็บรูปภาพประกอบบทความ เป็นต้น

ส าหรับวิธีการสร้างโฟลเดอร์ใหม่ ท าได้ดังนี้

1. ใส่ชื่อโฟลเดอร์ใหม่ ท าได้ดังนี้

2. คลิกปุ่ม Create Folder

การอัพโหลดไฟล์

การอัพโหลดไฟล์ต่างๆ ไม่ว่าจะเป็น ไฟล์รูปภาพ ไฟล์แฟลช ไฟล์เอกสาร word,pdf หรือไฟล์ซิป

(Zip)เราสามารถอัพโหลดผ่านหน้าต่างการจัดการไฟล์ได้ ซึ่งไฟล์ที่อัพโหลดจะมีขนาดไม่เกิน 10 เมกะไบต์ แต่

มีข้อจัดคือสามารถอัพโหลดไฟล์ได้ครั้งละไฟล์เท่านั้น ดังนั้นหากต้องการอัพโหลดครั้งละหลายไฟล์ควรใช้

โปรแกรม FTP อัพโหลดไฟล์จะสะดวกและรวดเร็วกว่า

ส าหรับวีการอัพโหลดไฟล์ผ่านหน้าต่างการจัดการไฟล์ ท าได้ดังนี้

1. คลิกปุ่ม เลือไฟล์ หรือ

Browse ในส่วน Upload

Files เพ่ือเลือกโฟลเดอร์ที่

เก็บไฟล์

2. เลือกโฟลเดอร์และไฟล์ที่ต้องการอัพโหลด

3. คลิกปุ่ม Open

4. คลิกปุ่ม Start Upload

การลบไฟล์หรือโฟลเดอร์

การลบไฟล์หรือโฟลเดอร์ในหน้าต่างการจัดการไฟล์นั้น สามารถท าได้ 2 วิธีด้วยกัน ดังนี้

การลบคร้ังละไฟล์หรือครั้งละโฟลเดอร์

สามารถท าได้โดยคลิกไอคอนลบ บนไฟล์หรือโฟลเดอร์ที่ต้องการลบได้เลย

การลบหลายไฟล์หรือหลายโฟลเดอร ์

สามารถท าได้ดังนี้ Note

1. เลือกไฟล์หรือโฟลเดอร์ที่ต้องการลบ ในกรณีที่ต้องการลบโฟลเดอร์ อันดับแรกจะต้อง

2. คลิกปุ่ม Delete บนแถบเครื่องมือ ลบไฟล์ในโฟลเดอร์นั้นให้หมดก่อนจึงจะลบโฟลเดอร์ได้