สร้าง Template ใน Joomla

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: สร้าง Template ใน Joomla

สร้าง Template ใน Joomla

โดย bankjittapol » 20/11/2019 8:05 pm

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

เว็บไซต์ที่ต้องการทำเป็น template https://getbootstrap.com/2.3.2/examples/carousel.html
https://getbootstrap.com/2.3.2/examples/carousel.html
https://getbootstrap.com/2.3.2/examples/carousel.html
11.png (97.25 KiB) Viewed 1975 times
กำการ คัดลอก folder template แล้วเปลี่ยนชื่อ เป็น example
รูปภาพ

แก้ไขชื่อ ให้ตรงกับ ชื่อ template
รูปภาพ

กำหนด position module ที่ต้องการ ซึ่งในที่นี้ใช้เพียง menu slide top-content footer และ debug
รูปภาพ

เปลี่ยนตัวแปรภาษาให้เป็นชื่อ template
รูปภาพ

กลับไปที่เว็บไซต์ต้นแบบ view source คัดลอก ส่วนของคำสั่งใน body tag ยกเว้น คำสั่งส่วนของ javascipt วางใน body ไฟล์ index

รูปภาพ

ใส่คำสั่ง ในตำแหน่งที่ต้องการ ของ position module
รูปภาพ
คำสั่งที่ใช้กำหนด ตำแหน่ง position module ต่างๆ คือ

โค้ด: เลือกทั้งหมด

	
	<jdoc:include type="modules" name="menu" style="none" />
	<jdoc:include type="modules" name="slide" style="none" />
	<jdoc:include type="modules" name="top-content" style="none" />
	<jdoc:include type="modules" name="footer" style="none" />
	<jdoc:include type="modules" name="debug" style="none" />
	
	

คำสั่งเรียกใช้ ไฟล์ css ซึ่งใน code ของตัวอย่าง จะมี css อยู่ ซึ่งต้องทำการสร้างไฟล์ .css ขึ้นมาแล้วเรียกใช้ไฟล์ index และในคำสั่ง คือ ไฟล์ชื่อ example.css

โค้ด: เลือกทั้งหมด

$document = Joomla\CMS\Factory::getDocument();
$document->addStyleSheet(JUri::root() . 'templates/example/css/example.css');
เข้าสู่หน้า admin เลือก Extensions ไปที่ manage แล้วเลือก Discover จากนั้นจะเจอ template ที่เราสร้าง ให้เลือก template แล้วกด install
รูปภาพ

หน้าแสดงผล จะได้
รูปภาพ
ซึ่งเราสามารถแก้ไขเพิ่มเติมลงไปได้ นั่นเอง

ข้างบน