วิธีกำหนด Layout ด้วย Helix3 และการใช้ร่วม module ของ Joomla
ส่วนของ Template นั้นเราสามารถกำหนด Layout และ Position ของตัวหน้าเว็บไซต์ เพื่อให้ Component, Module และ Plug-in แสดงได้ โดยในบทความนี้จะแนะนำวิธีการใช้เครื่องในการจัด Layout ของ Template อย่าง Helix3 Framework และนำ Module มาแสดง เบื้องต้นต้องทำความเข้าใจเบื้องต้นก่อนว่า Joomla Template จะมีการกำหนดชื่อ Position ในสิ่งที่จะแสดงใน Layout นั้นออกมา หลังจากนั้นเราจะสร้าง Module แล้วกำหนดชี้ตำแหน่งเข้าไปที่ Position แสดงบนหน้าเว็บออกมา
ถ้าดูจากรูปส่วนที่ 1 Layout คือ การแบ่งพื้นที่การแสดงผลแบบ Bootstrap และส่วนที่ 2 Position คือ ตำแหน่งที่เราจะกำหนดให้ Module ไปแสดง ซึ่งมีวิธีทำดังนี้
1. เริ่มกำหนด Layout ก่อน ให้เข้าด้วยโหมด Administrator หลังบ้านของเรา หลังจากนั้นไปที่เมนู Extension > Template > Style > แล้วเลือก Style (ชื่อ Template ที่เราจะทำ) จะเข้ามาเจอหน้าปรับแต่งของ Helix3
2. ไปที่แท๊บ Layout จะแสดง Template ตัว Default เอาไว้ ซึ่งเราสามารถเพิ่มหรือลบ layout หรือ Section ได้ การปรับแต่งสามารถทำได้ดังนี้
2.1 ส่วนที่สามารถเลื่อนปรับลำดับของ Layout หรือ Section ได้
2.2 เมนูสำหรับจัดการช่องพื้นที่การทำงานของ Section นั้นๆ โดยที่
- Add Columns เป็นการกำหนด Columns ในแถวว่าจะแบ่งออกเป็นเท่าไร ซึ่งจะมีกำหนดแบบพื้นฐานเบื้องต้นมาให้
แต่ถ้าเราอยากกำหนดเองก็สามารถกดที่ Custom Layout เช่นต้องการให้มี 3 Column แบ่งเป็น 6,3,3
- Add Row เป็นการเพิ่มแถว (Section) ใหม่
- Setting เป็นการตั้งค่าของ Section นั้นอาทิเช่น ชื่อ Section, พื้นหลัง, ตัวอักษร, การแสดงบน Tablet, Mobile, Desktop รวมไปถึงใส่ CSS ในส่วนของ Section นั้นเองได้ เป็นต้น
- Remove ลบแถวนั้นออกจาก Layout ของเรา
3. กำหนด Position ในแต่ละคอลัมม์ โดยการคลิ๊กเข้าไปคอลัมม์นั้น สามารถกำหนด Position, ซ่อนการแสดงบนอุปกรณ์, กำหนดคอลัมม์บนเทปเล็ทและมือถือ, CSS ของคอลัมม์นั้น
4. กด Save เพื่อบันทึกการตั้งค่าของ Template
5. หลังจากนั้นเราจะสร้าง Module ไปแสดง Position ให้เข้าไปที่เมนู Extension > Module
6. กด New เพื่อสร้าง Module เลือกประเภทของ Module ในที่นี้เราจะแสดงภาพและข้อความ จะเลือกเป็น Custom
7. ใส่เนื้อหาและเลือก Position ที่จะไปแสดงบนหน้าจอหลังจากนั้นกด Save ก็เป็นอันเสร็จ จากตัวอย่างจะเป็นการใส่คำว่า Helloworld ที่ Position : Title
ผลลัพท์ที่ได้ :
ใน Module ของเราสามารถกำหนดการแสดงบนแต่ละ Menu ได้ที่แท็บ Menu Assignment ตรงช่อง Module Assignment จะมีอยู่กัน 4 Option คือ
- On all pages (แสดงเหมือนกันทุกหน้า)
- No pages (ไม่แสดง)
- Only on the pages selected (แสดงเฉพาะหน้าที่เลือก)
- On all pages except those selected (ไม่แสดงในหน้าที่เลือก)
จะเห็นได้ว่าการปรับ Template ด้วย Helix3 Framework นั้นสามารถทำได้โดยที่ไม่ต้องแก้ไขที่โค้ดหลักของตัว Template เราสามารถโยกย้าย กำหนดคอลัมม์ในการแสดงแต่ละแถว การปรับแต่ง CSS ได้เอง รวมไปถึงระบุ Position ที่จะให้ Module เข้าไปแสดงได้จากบนหน้าจอของ Helix3 Framework ทั้งนี้ยังสามารถใช้ Helix3 ในการช่วยทำ Content ในเมนู Articles ได้ ซึ่งจะเป็นเรื่องเราจะกล่าวในคราวถัดไป
อ้างอิง
- วิธีการใช้งานทำ Template ด้วย Helix3 Framework, [ออนไลน์], เข้าถึง https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-joomla-extension/8057-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%97%E0%B8%B3-template-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-helix3-framework.html
- สอนใช้งาน Joomla แนะนำ Custom html วางเนื้อหาตามตำแหน่ง, [ออนไลน์], เข้าถึง https://www.mindphp.com/vdo-tutorial-joomla-basic/4059-joomla-custom-html.html
- สอนใช้งาน สร้าง Module โมดูใหม่ ใน Joomla, [ออนไลน์], เข้าถึง https://www.mindphp.com/vdo-tutorial-joomla-basic/5225-new-module-joomla.html
