ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

วิธีกำหนด 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 

การเข้าใช้เมนู Style เพื่อเข้าไปปรับ Layout ด้วย Helix
การเข้าใช้เมนู Style
หน้าแสดงรายการ Template ที่ใช้ในโปรเจค
หน้าแสดงรายการ Template

     2. ไปที่แท๊บ Layout จะแสดง Template ตัว Default เอาไว้ ซึ่งเราสามารถเพิ่มหรือลบ layout หรือ Section ได้ การปรับแต่งสามารถทำได้ดังนี้

แท๊บ Layout จะแสดง Template ตัว Default เอาไว้
หน้าการปรับแต่ง Layout ด้วย Helix

2.1 ส่วนที่สามารถเลื่อนปรับลำดับของ Layout หรือ Section ได้

ส่วนที่สามารถเลื่อนปรับลำดับของ Layout หรือ Section ได้
ส่วนการทำงานใน Section 

2.2 เมนูสำหรับจัดการช่องพื้นที่การทำงานของ Section นั้นๆ โดยที่

เมนูสำหรับจัดการช่องพื้นที่การทำงานของ Section นั้นๆ
ส่วนการปรับแสดงผลใน 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 ของคอลัมม์นั้น

กำหนด Position ในแต่ละคอลัมม์ โดยการคลิ๊กเข้าไปคอลัมม์นั้น สามารถกำหนด Position
ส่วนปรับแต่การแสดงใน position

    4. กด Save เพื่อบันทึกการตั้งค่าของ Template

    5. หลังจากนั้นเราจะสร้าง Module ไปแสดง Position ให้เข้าไปที่เมนู Extension > Module

Module ที่สามารถใช้แสดง content หรือความสามารถตาม extension แล้วแสดงตาม position ที่เรากำหนด
เมนู Module

    6. กด New เพื่อสร้าง Module เลือกประเภทของ Module ในที่นี้เราจะแสดงภาพและข้อความ จะเลือกเป็น Custom

กด New เพื่อสร้าง Module เลือกประเภทของ Module ในที่นี้เราจะแสดงภาพและข้อความ
ประเภท Module 

    7. ใส่เนื้อหาและเลือก Position ที่จะไปแสดงบนหน้าจอหลังจากนั้นกด Save ก็เป็นอันเสร็จ จากตัวอย่างจะเป็นการใส่คำว่า Helloworld ที่ Position : Title

ใส่เนื้อหาและเลือก Position ที่จะไปแสดงบนหน้าจอหลังจากนั้นกด Save ก็เป็นอันเสร็จ
หน้าเพิ่ม Module

ผลลัพท์ที่ได้ : 

หลังจากที่เราสร้าง Module และกำหนด Position ที่แสดงบนหน้าเว็บ
ผลลัพท์ที่แสดงบนหน้าเว็บ

ใน Module ของเราสามารถกำหนดการแสดงบนแต่ละ Menu  ได้ที่แท็บ Menu Assignment ตรงช่อง Module Assignment จะมีอยู่กัน 4 Option คือ

  • On all pages (แสดงเหมือนกันทุกหน้า)
  • No pages (ไม่แสดง)
  • Only on the pages selected (แสดงเฉพาะหน้าที่เลือก)
  • On all pages except those selected (ไม่แสดงในหน้าที่เลือก)

 

เป็นการกำหนดว่า Module จะแสดงที่เมนูไหน
Menu Assignment 

            จะเห็นได้ว่าการปรับ 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
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มาพร้อมสงกรานต์!!! Joomla เวอร์ชั่น 3.9.26 แก้ไขข้อผิดพลาดและปรับปรุงระบบให้ดีขึ้น
โดย tsukasaz ศ 16 เม.ย. 2021 10:44 am บอร์ด MindPHP News & Feedback
0
18
ศ 16 เม.ย. 2021 10:44 am โดย tsukasaz
R - สามารถลงทะเบียนผ่าน Facebook และ Google Account ได้ ( มีตัวอย่างแนบให้ )
โดย eange08 ศ 16 เม.ย. 2021 9:26 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:26 am โดย eange08
R - ขออนุญาตเพิ่มเติม ในส่วน การ ลงทะเบียน / เข้าสู่ระบบ
โดย eange08 ศ 16 เม.ย. 2021 9:26 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:26 am โดย eange08
R - ยังไม่มีแบบฟอร์มการติดต่อ
โดย eange08 ศ 16 เม.ย. 2021 9:25 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:25 am โดย eange08
R - ยังไม่มี ลิงค์เชื่อมต่อ Google map
โดย eange08 ศ 16 เม.ย. 2021 9:25 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:25 am โดย eange08
B - ยังไม่สามารถเลื่อนลงมาดู ข้อมูลการติดต่อ ( เบอร์โทร ไลน์ เฟซบุ๊ค ) ได้
โดย eange08 ศ 16 เม.ย. 2021 9:24 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:24 am โดย eange08
B - แผนที่ข้อความการจัดวางสัดส่วนไม่ตรงตามตัวอย่างที่แนบไป
โดย eange08 ศ 16 เม.ย. 2021 9:24 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:24 am โดย eange08
R - เนื้อข่าว วิธีการป้องกัน รับมือ "ไวรัส COVID- 19" Link อ้างอิงเว็บไซต์โรงพยาบาล ต้องกดเข้าไปได้ค่ะ
โดย eange08 ศ 16 เม.ย. 2021 9:23 am บอร์ด เว็บไซต์ Rnyard - Tester
0
1
ศ 16 เม.ย. 2021 9:23 am โดย eange08