พื้นฐาน Joomla

รู้จัก Global Check-in
เคยไหมครับที่เวลาเราต้องการเขียนบทความ , จัดการโมดูล แล้วมันไม่สามารถคลิกเข้าไปเพื่อแก้ไขได้ นั...

เทคนิค Joomla

การใช้ Related Articles
Related Articles คือโมดูลที่มากับ Joomla อยู่ตั้งแต่แรก หน้าที่ของมันคือแสดงลิ้งค์ของบทความที่...

แนะนำ Extension

Drag n Drop Admin
ปลั๊กอินตัวนี้ เด็ดมากครับ เก็บไว้เกือบ 2 เดือนเพื่อเอาไว้เป็นของขวัญคริสมาสต์ เพราะมันสามารถทำ...
( 11 Votes )
Template Managerการจัดการเทมเพลต หรือ Template Manager ก็จัดได้ว่าเป็นส่วนหนึ่งของ Extension แต่เทมเพลตเองเป็นส่วนสำคัญที่จะทำให้หน้าเว็บไซต์ของเราดูสวยงาม แปลกตา หรือ มีตำแหน่งในการจัดวาง Module ต่าง ๆ ได้มากหรือไม่ ก็ขึ้นอยู่กับการออกแบบเทมเพลต แต่บทความนี้ไม่ได้สอนการสร้างเทมเพลต แต่จะสอนให้ทราบเกี่ยวกับการจัดการ และการแก้ไขเทมเพลตเบื้องต้น

เทมเพลตนั้นสามารถติดตั้งได้ทาง Extensions > Install/Uninstall ได้เหมือนกับ Extension ทั่วไป โดยเมื่อติดตั้งเสร็จแล้วจะสามารถจัดการผ่านได้ทางเมนู Extensions > Template Manager

Template Manager

เมื่อเข้ามาแล้วหากมีเทมเพลตหลายแบบ วิธีสังเกตว่าเทมเพลตใดถูกเลือกใช้งานอยู่ให้ดูที่คอลัมน์ Default ที่มีสัญลักษณ์ดาวสีเหลืองกำกับอยู่ นั่นแสดงว่าเทมเพลตนี้ถูกตั้งค่าให้ใช้งาน หากต้องการเปลี่ยนการใช้งานเป็นเทมเพลตอื่น ก็ให้เลือก Radio Box ข้างหน้าชื่อเทมเพลตแล้วกดปุ่ม Default เราก็จะสามารถเปลี่ยนการใช้งานเทมเพลตได้อย่างง่าย ๆ

Template Manager

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

Template Manager

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

Template Manager

จะเป็นการ Preview เทมเพลตในมุมมอง Layout ซึ่งจะมองเห็นตำแหน่ง Position ของ Module ให้เห็นเป็นเส้นกรอบสีแดงจาง ๆ ว่าเทมเพลตนี้ เราสามารถวางตำแหน่งโมดูลได้ตรงไหนบ้าง ซึ่งแต่ละเทมเพลตก็จะมีจำนวน Position Module ไม่เท่ากัน ขึ้นอยู่กับการออกแบบ ซึ่งจุดนี้เราสามารถแก้ไข ปรับแต่งเองก็ได้นะ

ลองมาดูที่เมนู Edit HTML กันบ้าง

Template Manager

เมนูนี้สำหรับการแก้ไขไฟล์ index.php ซึ่งจะอยู่ในตำแหน่งไดเร็คทอรี่ /templates/ชื่อเทมเพลต/index.php เหมือนกันหมดทุกเทมเพลต เหมาะสำหรับผู้ที่มีความรู้ด้านการแก้ไข Source Code เท่านั้น เพราะหากเกิดความผิดพลาด การแสดงผลหน้าเว็บไซต์ของเราก็จะผิดเพี้ยนตามไปด้วย

เมนู Edit CSS สำหรับแก้ไขไฟล์ควบคุมสไตล์การแสดงผลต่าง ๆ ไม่ว่าจะเป็นขนาดตัวอักษร สีตัวอักษร สีเส้น ระยะห่าง การวาง Layout การแทรกรูปภาพพื้นหลัง สีพื้นหลัง ฯลฯ ซึ่งเหล่านี้ล้วนเรียกว่า Style Sheet ซึ่งจะเป็นไฟล์นามสกุล .CSS โดยต้องใช้ความรู้ในการเขียน CSS และภาษา HTML เช่นเดียวกัน จึงจะสามารถแก้ไขได้

สมมติว่า ผมต้องการจะแก้ไขไฟล์ภาพโลโก้ของ Joomla ในเทมเพลตเดิม

Template Manager

ด้วยประสบการณ์ ผมก็จะทราบว่า ผมจะต้องไปค้นหาตำแหน่งที่ไฟล์ template.css ซึ่งอยู่ในไดเร็คทอรี่ /template/rhuk_milkyway/css/

Template Manager

ผมก็จะพบกับ Path ของไฟล์รูปภาพโลโก้ของ Joomla ซึ่งก็จะสามารถแก้ไขรูปภาพได้ตามต้องการ

เทมเพลตนั้นไม่ใช่ว่าจะกำหนดให้ใช้ได้เพียงครั้งละ 1 เทมเพลตเท่านั้น รู้บ้างไหมครับ เราสามารถกำหนดการใช้งานเทมเพลตของเว็บไซต์เราได้หลายเทมเพลตในครั้งเดียวด้วยนะ ประมาณว่าคลิกลิ้งค์นี้ ก็ให้แสดงเทมเพลตรูปแบบ A หรือคลิกอีกลิ้งค์นึง ก็ให้แสดงเทมเพลตรูปแบบ B เป็นต้น ลองไปดูกันครับว่าทำอย่างไร

Template Manager

จากภาพจะเห็นว่า มีเทมเพลตใหม่ที่ได้ติดตั้งลงไป ชื่อว่า siteground-j15-148 ผมจะคลิกเข้าไปที่เทมเพลตนี้

Template Manager

จะพบกับ Menu Assignment ซึ่งเป็นการระบุว่า จะให้เทมเพลตนี้ แสดงในเมนูลิ้งค์ใด ตอนนี้ผมกำหนดว่า ถ้าคลิกที่เมนู “ลิ้งค์ 1” และ “ลิ้งค์ 2” ให้แสดงเทมเพลต siteground-j15-148 ออกมา ส่วนลิ้งค์อื่น ๆ ก็ให้แสดงเทมเพลตแบบเดิม

Template Manager

เทมเพลตยังเป็นรูปแบบเดิมอยู่ ผมจะคลิก “ลิ้งค์ 1” เพื่อให้เทมเพลตเปลี่ยนไป

Template Manager

เทมพลตเปลี่ยนไปเมื่อคลิก “ลิ้งค์ 1” หรือ “ลิ้งค์ 2” ตามที่ได้กำหนดไว้ใน Menu Assignment

Template Manager

จะพบว่า มีเครื่องหมาย “ถูก” สีเขียวกำกับอยู่ในคอลัมน์ Assigned

ซึ่งเราสามารถใช้วิธีนี้ในการแสดงผลรูปแบบแต่ละหน้าที่เปลี่ยนไปได้ไม่ซ้ำกัน แต่อย่าลืมว่า ต้องคำนึงถึงตำแหน่ง Position Module ด้วยนะครับ เพราะเมื่อมีการเปลี่ยนเทมเพลตไปแล้ว โมดูลของเราก็อาจจะอยู่ผิดที่ผิดตำแหน่งไป ซึ่งจะทำให้การแสดงผลไม่สวยงามเหมือนที่เราได้กำหนดไว้

Template Manager

เนื้อหาที่เกี่ยวข้อง