ไฟร์ index.php บน Template Joomla ทำอย่างไร

จากครั้งที่แล้ว เราได้เรียนรู้ วิธีการ เตรียมความพร้อมสำหรับ การทำ Template Joomla ไปเป็นที่เรียบร้อยแล้ว ใครจำไม่ได้ ไปดู ที่นี่ ครับ มาวันนี้เราจะมาเรียนรู้ เรื่องการเขียนไฟร์ index.php ซึ่งเป็นหัวใจ รองจาก ไฟร์ css ที่ใช้ควบคุม การแสดงผลของ joomla เรามาลองเริ่มต้นเขียนไฟร์ index.php กัน

เปิด Editor ที่ใช้เขียน Code ที่ชื่นชอบครับ

โดยส่วนตัวผมใช้ Quanta Plus ไม่ต้องเหมือนผมก็ได้นะครับ พอดีผม ชอบ OpenSource ครับ ระบบปฎิบัติการ ubuntu ส่วน Editor ที่ใช้เขียนเว็บ ส่วนใหญ่ผมจะใช้ Quanta Plus ครับ ขอโปรโมทหน่อย เปิดไฟร์ใหม่มาเลยครับ

 

 

 

เขียนไฟร์ตามนี้เลยครับ แล้ว Save เป็น index.php เลยครับ

สิ่งที่ต้องมีใน <head></head>

 

ส่วนนี่ใน <body></body>

 

โดย จะใช้ div ที่มี class คือ containner และ showgrid มีความหมายว่า จะ โชว์กริชให้เราเห็น ทั้ง 24 กริช ในตอนออกแบบ ผมจะให้ โชว์กริชก่อน เสร็จแล้วค่อยเอา showgrid ออกก็จะไม่ โชว์กริช

มีการแสดง เมนู เต็ม 24 กริช ผมตั่งชื่อ โมดูบในตำแหน่งนี้ว่า menu

ส่วนสุดท้าย ส่วนของ content ขนาด 24 grid เหมือนกัน save ไฟร์แล้วเข้าไปดูที่ Xamp ที่เราจำลอง Joomla เข้าไปที่ makewebthai จำได้ใช่ไหมครับที่เราทำไว้คราวที่แล้ว เข้าไป Back Office เปลี่ยน Template มาเป็น makewebthai3 แล้ว Preview จะได้แบบนี้

 

พอจับทิศทาง การวาง LayOut ของหน้า page โดยใช้ css class span ออกนะครับ

มาดูกันอีกตัวอย่าง ผมต้องการใส่ ไฟร์ ที่เป็นรูป Logo เข้าไปที่ Template เลย ต้องทำอย่างไร

เพื่ม Tag พวกนี้เข้าไป

 

ขออธิบาย Tag ว่าเป็นการกำหนด Layout ขนาด 5 grid ให้แสดง รูป logo_v1.png ตาม path ที่กำหนด ให้ชิดขวา ให้ Save ไฟร์ index.php แล้วไป Refresh ที่ XAMP joomla จะได้แบบนี้

 

 

เห็นไหมครับ ในการที่จะเพิ่ม tag div ต่างๆ โดยใช้ css class span ช่างง่าย มาดูอีกตัวอย่าง ผมต้องการเพิ่ม กล่อง Search ให้อยู่ด้าน ขวา ล่างเมนู เพิ่ม tag พวกนี้เข้าไปเลยครับ

 

ผมได้เพิ่มตำแหน่ง search  ที่ ขนาด span กว้าง 19 grid และให้ชิดขวา save file index.php แล้ว refresh XAMP จะได้แบบนี้

 

 

ก่อนที่เราจะเริ่ม ที่ตำแหน่งโมดูบต่อไป ขอเบรคก่อน กลัวว่าบทความจะยาวไป เดี๋ยวเพื่อนๆจะเบื่อซะก่อน

 

 

joomla visitor


Deprecated: Assigning the return value of new by reference is deprecated in /home/makeweb/domains/makewebthai.com/public_html/modules/mod_news_pro_gk1/mod_news_pro_gk1.php on line 45

อยากติดตั้ง google Map บน Joomla ต้องทำอ

News image

อยากติดตั้ง google Map บน Joomla ต้องทำอย่างไร ? ก็ตามหัวข้อเลยครับ สมัยนี้จะให้เขียนแผนที่เอง ก็จะเป็นอะไรที่เราเข้าใจคนเดียว ลูกค้า ไม่เข้าใจ ถ้าเราสามารถใช้ google Map แล้ว spot ตำแหน่นงของบริษัทเราลงไป สามารถนำแผนที่ google Map นี้ไปแสดงบน Joomla แบบนี้     ติดตั้ง google Map บน Joomla ต้อง Phocamaps Plugin ...

อ่านต่อ ...

ทดสอบของใหม่ joomla 1.7.2 บน XAMPP

News image

เห็นเขาลือกันว่า joomla 1.7.x สวยนัก สวยหน่า เดี๋ยวต้อง ทดสอบซะหน่อย หลังจากที่เราได้ไปโหลด joomla 1.7.2 มาเป็นที่เรียบร้อยแล้ว (ใครยังไม่ได้โหลด joomla 1.7.2 ไปโหลดมาได้จาก ที่นี่ ครับ) หลังจากโหลด Joomla 1.7.2 ผมได้ทำการ แตกไฟร์ และ เอาส่วนที่แตกได้ไปเก็บไว้ที่ /opt/lampp/htdocs/test17 ผมสร้างโฟวเดอร์ text17 เอาไว้ทดสอบ Joomla 1.7.2 ครับ ติดตั้ง Joomla ...

อ่านต่อ ...

จุดเริ่มต้นของการออกแบบ Template Joomla

News image

{xtypo_info}จะสร้างงานศิลป์ ต้องมีแรงบัลดารใจ เริ่มจากต้องการทำ Template Joomla ของเว็บไซด์ makewebthai.com ในเวอร์ชั่นปี 2011 เลยอยากนำมาทำเป็น case stady สำหรับเพื่อนๆ พี่ๆ น้องๆ ที่ต้องการ ทำ Template Joomla ใช้เอง ครับ makewebthai.com ...

อ่านต่อ ...

ไฟร์ index.php บน Template Joomla ทำอย่า

News image

{xtypo_info}จากครั้งที่แล้ว เราได้เรียนรู้ วิธีการ เตรียมความพร้อมสำหรับ การทำ Template Joomla ไปเป็นที่เรียบร้อยแล้ว ใครจำไม่ได้ ไปดู ที่นี่ ครับ มาวันนี้เราจะมาเรียนรู้ เรื่องการเขียนไฟร์ index.php ซึ่งเป็นหัวใจ รองจาก ไฟร์ css ที่ใช้ควบคุม การแสดงผลของ joomla เรามาลองเริ่มต้นเขียนไฟร์ index.php กัน{/xtypo_info} เปิด Editor ที่ใช้เขียน Code ที่ชื่นชอบครับ โดยส่วนตัวผมใช้ Quanta ...

อ่านต่อ ...