การสร้าง Joomla Template โดยใช้ไฟล์ HTML และการดูตำแหน่งโมดูล

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การสร้าง Joomla Template โดยใช้ไฟล์ HTML และการดูตำแหน่งโมดูล

โพสต์โดย abdkode » 26/02/2019 4:43 pm

การสร้าง template โดยใช้ไฟล์ HTML

Template ของ joomla มีความแตกต่างจากtemplate อื่นๆ คือ ในjoomla จะจุดที่สามารถจัดวาง position ต่างๆ ได้ ซึ่งในการจัดวาง position ต่างๆ ปกติแล้วเราจะจัดวางโดยการกำหนดผ่านโมดูล คือเมื่อสร้างโมดูลโมดูลหนึ่งใน joomla จะมีตัวเลือกซึ่งเป็น dropdown เพื่อให้เราเลือกว่าต้องการวางโมดูลนี้ที่ตำแหน่งไหน ซึ่งแต่และ template ที่เราติดตั้งนั้น จะมีposition ที่ถูกกำหนดมาไว้อยู่แล้ว เช่น top,right,title,position1, position2,footer เป็นต้น เราสามารถดูว่าแต่ละtemplate นั้นมี position อะไรบ้างอยู่ที่ตำแหน่งไหนบ้างโดยการกดที่ลูกตา(preview)ก็จะเห็น position ซึ่งปกติจะเป็นตัวอักษรสีแดง หรือโดยเปิดหน้าเว็บและตามด้วยเพิม ulr ?tp=1 แต่ทั้งนี้ต้องไปเปิด view module position ให้เป็น enable ก่อน
preview template.png
ตัวอย่างการดู Position ของ template
preview template.png (165.02 KiB) เปิดดู 1748 ครั้ง

ในส่วนของการสร้าง template ของ joomla นั้น เราต้องเตรียมไฟล์ HTML ของเราก่อน ไม่ว่าจะมีทั้งโฟลเดอร์ js,css,font,image รวมถึงไฟล์ index.htmlที่เป็นไฟล์เริ่มต้น เราสามารถสร้างเองได้หรือไปดาวน์โหลดตามอินเตอร์เน็ต ซึ่งขั้นตอนแรกให้เราคัดลอก โฟลเดอร์ template ที่มีอยู่ก่อน จะเป็น template เริ่มต้นของ joomla ก็ได้ ซึ่งจะอยู่ folder Template ของ joomla เมื่อคัดลอกเสร็จแล้วให้เราทำการเปลี่ยนชื่อโฟลเดอร์รวมทั้งชื่อในไฟล์ XML ด้วยให้เป็นชื่อtemplateตามที่เราต้องการ จากนั้นก็ zip โฟลเดอร์ เสร็จให้ทำการติดตั้ง template ที่เราzipมา ซึ่งแน่นอนเมื่อติดตั้งtemplateเสร็จแล้วหน้าตาของเว็บก็จะเหมือนเดิมเพราะว่าคัดลอกเท็มเพล็ตที่มีอยู่แล้ว ยังไม่ได้ปรับเปลี่ยนอะไร
template stucture.png
โครงาร้างของ Template ใน Joomla
template stucture.png (150.69 KiB) เปิดดู 1748 ครั้ง

วิธีการปรับเปลี่ยนให้เท็มเพล็ตมีหน้าตาเป็นไปตามไฟล์ HTMLตามที่เราเตรียมไว้นั้น มีวิธีดังนี้ ลบโฟลเดอร์ในเทมเพลตที่มีอยู่และเกี่ยวข้องกับการออกแบบเว็บไซต์ เช่น โฟลเดอร์ css,js,imge,font เป็นต้น และ นำของเราที่เตรียมไว้ไปใส่แทนที่ จากนั้น ในไฟล์ Index.php ที่อยู่ในเทมเพลตนั้นให้เราปรับเปลี่ยนโครงสร้างบางส่วนให้มีหน้าตามที่เราต้องการหรือที่เตรียมไว้ โดยการปรับเปลี่ยนนั้นถ้าเราดูในส่วนหัวของไฟล์ index.php นั้น จะเป็นการทำงานเพื่อร่วม joomla ซึ่งเราจะไม่ปรับอะไรตรงนี้ ต่อมาในส่วนของ doc ->addScript() นั้น ซึ่งตรงนี้จะเป็นการนำเข้าไฟล์ที่เกี่ยวข้องกับjavaScriptต่างๆ ให้เราทำการปรับเปลี่ยนเป็นชื่อไฟล์ที่อยู่ในโฟลเดอร์ js ของเรามีกี่ก็ใส่ให้หมด เช่นเดียวกับ doc ->addStyleSheet() ให้ปรับให้เป็นการนำเข้าไฟล์css ของเราซึ่งจะอยู่ในโฟลเดอร์ CSS ต่อมาในส่วนของ HTML ในไฟล์ index.php ที่มีอยู่ให้เราลบทิ้ง และมาใส่ HTML ของเราเตรียมไว้ตามไฟล์ Index.html สามารถคัดลอกวางได้เลย และส่วนที่เป็น Head ให้แทนไปเป็น Head ของตัวเดิมที่มีอยู่ใน Index.php เพื่อทำการเรียกที่เรา addScript และ addStyleSheed ไว้ และทำการทดสอบเพื่อผลลัพธ์ที่หน้าเว็บว่าเปลี่ยนไปตามที่เราต้องการไหม
add script & styleSheet.png
ตัวอย่างการ addScript และ addStyleSheet
add script & styleSheet.png (147.34 KiB) เปิดดู 1748 ครั้ง

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

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

<jdoc:include type="module" name=" ชื่อposition " style="none"/>
ตัวอย่างเช่น

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

<jdoc:include type="module" name="footer" style="none"/> 
หรือ
<jdoc:include type="module" name="position-1" style="none"/>
แต่ทั้งในการกำหนดชื่อposition นั้นเราต้องดูในไฟล XML ว่ามีการกำหนดชื่ออะไรบ้างชื่อต้องตรงกัน หรือเราสามารถกำหนดชื่อเองได้แต่ต้องไปกำหนดในไฟล์ XML ก่อนโดยการเพิ่ม

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

<position>ชื่อpositionที่เราต้องการ</position>
จากเราไปกำหนดในโมดูลว่าเราต้องการให้โมดูลไหนแสดงที่ position นี้ วิธีตั้งค่าการแสดงผลโมดูลบนหน้าเว็บไซต์ใน Joomla จะเห็นไม่ยากเท่าสักเท่าไร หรือหรือถ้าหากบทความนี้อาจจะมึนงงไม่เข้าใจสามารถศึกษาในรูปแบบวิดีโอได้จากลิงค์นี้ https://www.youtube.com/watch?v=ZGlTkym3Hsg ไม่เข้าใจตรงไหนสามารถคอมเม้นถามได้ครับ หวังว่าบทความนี้จะเป็นประโยชน์ต่อผู้อ่านน่ะครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Joomla
-คู่มือการใช้งาน Joomla Extension By Mindphp
-สอบถามเกี่ยวกับ Joomla
-ศึกษาข้อมูลเกี่ยวกับ Joomla
-ศึกษาความรู้เกี่ยวกับ PHP
-ถามตอบเกี่ยวกับ PHP

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน