ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

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

1.เปิดไฟล์ templateDetails.xml เพื่อสร้างตำแหน่งสำหรับแสดงข้อมูลฝั่งซ้ายและฝั่งขวาของเนื้อหาหลัก

<position>main-left</position>
<position>main-right</position>

 

2.เปิดไฟล์ index.php ในโปรแกรม Netbaens จากนั้นสร้างโครง html สำหรับแสดงเนื้อหาหลักของเว็บ แบ่งเป็นเมนูฝั่งซ้าย-ขวา และตรงกลางสำหรับแสดงเนื้อหา

<div id="main" class="container">
        <div class="col-md-3">
             <jdoc:include type="modules" name="main-left" style="xhtml" />
        </div>
        <div class="col-md-6">
            <jdoc:include type="message" />
            <jdoc:include type="component" />
        </div>
        <div class="col-md-3">
           <jdoc:include type="modules" name="main-right" style="xhtml" />
        </div>     
</div>

 

3.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Modules

เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Modules
เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Modules

 

4.คลิก New 

คลิก New
คลิก New

 

5.เลือก Menu

เลือก Menu
เลือก Menu

 

6.ตั้งชื่อโมดูลในช่อง Title , เลือกเมนูในช่อง Select Menu , Show Title คลิกปุ่ม Hide เพื่อซ่อนชื่อของโมดูลในหน้าเว็บ , Position คลิกเลือก main-left เป็นการเลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published จากนั้นคลิก Save & Close

ตั้งชื่อโมดูลในช่อง Title , เลือกเมนูในช่อง Select Menu , Show Title คลิกปุ่ม Hide เพื่อซ่อนชื่อของโมดูลในหน้าเว็บ , Position คลิกเลือก main-left เป็นการเลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published จากนั้นคลิก Save & Close
ตั้งชื่อโมดูล , เลือกเมนูในช่อง Select Menu , Show Title คลิกปุ่ม Hide , เลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published 

 

7.ตรวจสอบการแสดงผลที่หน้าเว็บ

แสดงผลในหน้าเว็บ
แสดงผลในหน้าเว็บ

 

เนื้อหาเพิ่มเติม