โดยปกติแล้ว Template ของ Joomla จะใช้ CSS Framwork ของ Bootstrap ซึ่งการแบ่งส่วนการแสดงผลในหน้าเว็บจะเรียกว่า Grid เราสามารถแบ่งเนื้อหาในหน้าเว็บเป็นคอลัมน์ เช่น เมนูฝั่งซ้าย เมนูฝั่งขวา และเนื้อหาตรงกลาง โดยขนาดของ Grid จะแบ่งเป็น 12 คอลัมน์ เราสามารถกำหนดความกว้างของคอลัมน์เป็นตัวเลข 1-12 ในตัวอย่างนี้จะแนะนำการแบ่งเนื้อหาเป็นสามส่วน โดยใช้คลาส col-md-3 สำหรับการแสดงผลฝั่งซ้ายและขวา ใช้คลาส col-md-6 สำหรับการแสดงผลเนื้อหาตรงกลาง ซึ่งถ้ากำหนดเนื้อหาครบทั้งสามคอลัมน์ การแสดงผลจะไม่มีปัญหา แต่หากปิดการแสดงผลในฝั่งซ้ายหรือขวาออกไป บริเวณนั้นจะเป็นช่องว่าง บทความนี้จึงแนะนำการปรับการแสดงผลของเนื้อหาให้มีขนาดพอดีกับหน้าเว็บไซต์

 

1.ในโปรแกรม Netbeans เปิดไฟล์ index.php จากนั้นกำหนดเงื่อนไขโดยนำคำสั่ง countModules ไปคลุมส่วนแสดงผลของข้อมูลฝั่งซ้าย

<?php if ($this->countModules('main-left')) : ?>
        <div class="col-md-3">
             <jdoc:include type="modules" name="main-left" style="xhtml" />
        </div>
<?php endif; ?>

 

2.กำหนดเงื่อนไขสำหรับการแสดงผลของเนื้อหาหลัก ซึ่งความกว้างของเนื้อหาหลักจะเปลี่ยนไปตามการแสดงผลของข้อมูลฝั่งซ้ายและขวา

$mainclass = 'col-md-12';
if ($this->countModules('main-left') && $this->countModules('main-right')) {
    $mainclass = 'col-md-6';
} else if ($this->countModules('main-left') || $this->countModules('main-right')) {
    $mainclass = 'col-md-9';
}

 

3.ตรวจสอบการแสดงผลในหน้าเว็บ

หน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล
แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

 

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

แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา
แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
รับทำโฆษณา Google ให้ติดหน้าแรกและมีประสิทธิภาพสูง
โดย @Foretoday จ 05 ก.พ. 2024 11:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
270
จ 05 ก.พ. 2024 11:31 am โดย @Foretoday View Topic รับทำโฆษณา Google ให้ติดหน้าแรกและมีประสิทธิภาพสูง
Cloud Backup มีความสำคัญอย่างไร ต่อการจัดเก็บข้อมูลของธุรกิจ
โดย Athapol Panngern ศ 02 ก.พ. 2024 10:18 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
406
ศ 02 ก.พ. 2024 10:18 am โดย Athapol Panngern View Topic Cloud Backup มีความสำคัญอย่างไร ต่อการจัดเก็บข้อมูลของธุรกิจ
ประเมิณราคาเปลี่ยนจอ อะไหล่ เปลี่ยนจอ samsung s10e
โดย mindphp พฤ 01 ก.พ. 2024 7:49 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
620
ส 03 ก.พ. 2024 12:32 am โดย mindphp View Topic ประเมิณราคาเปลี่ยนจอ อะไหล่ เปลี่ยนจอ samsung s10e
จะเข้า Line แต่ใช้มือถือ Scan QRCode ไม่ได้ ต้องทำยังไงดี
โดย Narisara พ 31 ม.ค. 2024 12:41 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
455
พ 31 ม.ค. 2024 12:44 pm โดย Narisara View Topic จะเข้า Line แต่ใช้มือถือ Scan QRCode ไม่ได้ ต้องทำยังไงดี
อัปเดต Joomla เวอร์ชัน 5.0.2 และ 4.4.2 แก้ไขปัญหาปัญหาระบบต่าง ๆ
โดย Thanapoom1514 อ 28 ม.ค. 2024 2:37 pm บอร์ด MindPHP News & Feedback
1
544
อ 30 ม.ค. 2024 11:53 am โดย mrfurniture View Topic อัปเดต Joomla เวอร์ชัน 5.0.2 และ 4.4.2 แก้ไขปัญหาปัญหาระบบต่าง ๆ
10 คำถาม เกี่ยวกับคอมพิวเตอร์ Q&A
โดย Best1677 พฤ 25 ม.ค. 2024 11:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
542
พฤ 25 ม.ค. 2024 11:29 am โดย Best1677 View Topic 10 คำถาม เกี่ยวกับคอมพิวเตอร์  Q&A
หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
โดย admeadme พฤ 25 ม.ค. 2024 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
554
พฤ 25 ม.ค. 2024 9:23 am โดย admeadme View Topic หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
โดย Thanavat_n พ 24 ม.ค. 2024 4:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
342
พ 24 ม.ค. 2024 4:29 pm โดย Thanavat_n View Topic ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง