Accessibility Tools

สอนเพิ่มตำแหน่งโมดูลในเทมเพลต จูมล่า

how-to-add-joomla-module-position

บางครั้ง เทมเพลตที่โหลดมา ตำแหน่งอาจมีน้อยเกินไป แต่ อย่าลืมว่า  1 ตำแหน่ง สามารถนำโมดูลมาแสดงได้หลายตัว  แต่บางเทมเพลตก็น้อยมากจริงๆ เหมือนเทมเพลต ของ SiteGround ชื่อ Chameleon ตัวอย่าง http://www.siteground.com/template-preview/joomla25/siteground-j16-27 ซึ่งจะมี ตำแหน่ง เพียง สี่ ตำแหน่ง คือ เมนู ช่องค้นหา ซ้าย และขวา ตามรูป



Joomla Templates SiteGround  siteground-j16-27 1

 

จะเห็นว่าตรงกลางไม่มี ตำแหน่งเลย ไปโหลดเทมเพลตมาติดตั้ง http://www.siteground.com/joomla-templates.htm  ชื่อ Chameleon

หลังจากติดตั้งเทมเพลตแล้ว เข้าไปแก้ไข เทมเพลตของ joomlaตามนี้ 

 

Joomla Templates SiteGround  siteground-j16-27 2

 

  1. โฟลเดอร์ ที่ใช้เก็บเทมเพลตหลังจากติดตั้งแล้ว
  2. ชื่อโฟลเดอร์ของเทมเพลต โดยเทมเพลต ชื่อ Chameleon จะมีโฟลเดอร์ชื่อ siteground-j16-27
  3. ไฟล์ที่เราจะแก้ ชื่อ index.php

ต่อมา เปิด ไฟล์ index.php ด้วยโปรแกรม แก้ไข code ผมชอบใช้ Sublime Text http://www.sublimetext.com/ โหลดได้ฟรี

เมื่อเปิดมาให้ลองดู จะเห็นมีชื่อ ตำแหน่ง 

Joomla Templates SiteGround  siteground-j16-27 3

  1. เป็น  code แสดงตำแหน่ง position 7
  2. เป็น  code แสดงตำแหน่ง คอมโพเน้น
  3. เป็น  code แสดงตำแหน่ง position 4

ทีนี้เราต้องการเพิ่ม ตำแหน่ง ก่อน แสดงคอมโพเน้นท์ หรือบนเนื้อหา ให้แทรก

Joomla Templates SiteGround  siteground-j16-27 4

								<div class="topcontent">
									<jdoc:include type="modules" name="position-top-content" style="rounded"/>
								</div>
							

จาก code ใส่  div class topcontent  เพื่อเอาไว้ใช้กำหนด การแสดงรูปแบบ ด้วย  css

ต่อมา jdoc:include type="modules" name="position-top-content" style="rounded" หมายถึง ให้แสดงโมดูล ที่ใช้ตำแหน่งที่ชื่อ position-top-content มาแสดง

จากรูปด้านล่าง จะเห็นตำแหน่ง position-top-content อยู่เหนือ คำว่า Home

Joomla Templates SiteGround  siteground-j16-27 5

 

มาเพิ่มอีกนิด

 

		<?php if( $this->countModules('position-top-content') ) : ?>
								<div class="topcontent">
									<jdoc:include type="modules" name="position-top-content" style="rounded"/>
								</div>
							<?php endif; ?>

ผมเพิ่ม คำสั่ง php if เข้าไป โดย หมายถึง ให้แสดง เมื่อมี โมดูลมาแสดง ในตำแหน่ง position-top-content เท่านั้น

เพิ่มชื่อตำแหน่ง ลงไปใน templateDetails.xml

Joomla Templates SiteGround  siteground-j16-27 7

เปิดไฟล์ templateDetails.xml มา

Joomla Templates SiteGround  siteground-j16-27 8

เพิ่ม ชื่อตำแหน่ง position-top-content ลงไป

<position>position-top-content</position>

 

เพียงเท่านี้เราก็จะมีตำแหน่งเพิ่มมาแล้ว