EP1. แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

 

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

ก่อนอื่นเพื่อนๆ ต้องทำความเข้าใจก่อนว่า เวลาเราหรือ user ที่เข้าชมเว็บไซต์ มองมาที่เว็บไซต์ของเรานั้น เขาเห็นอะไร จากไหน เป็นหลักกก่อนนะครับ

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

ตัวอย่างลำดับการมองเห็นในเว็บไซต์ Joomla

 

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

 

การแก้ไขโครงสร้างหรือรูปแบบในส่วน Extension

     การที่เราต้องการแก้ไข Extenion ที่แสดงผลในหน้าเว็บไซต์ของเรานั้น โดยปกติเราก็ต้องเข้าไปในพาทโฟรเดอร์ของ Component หรือ Module ตัวนั้น เพื่อปรับโครงสร้าง แต่จริงๆ แล้ว เราสามารถสร้างการ Create Overrides เพื่อดึงรูปแบบโครงสร้างของ Extensions นั้นๆ มาไว้ใน Templateได้เลย

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

เราสามารถเลือกชนิดของ Extension เพื่อดึงโครงสร้างมาแก้ไข

 

     โดยที่หลังจากที่เราทำ Create Overrides กับ Extension แล้ว ไฟล์ต่างๆ ของ Extension ก็จะถูกดึงมาเก็บไว้ในโฟรเดอร์ html ของ template

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

ตัวอย่างโฟรเดอร์ Extension ที่ดึงมาหลังทำ Overrides

 

     ซึ่งการทำแบบนี้ จะทำให้เราสามารถแก้ไข ปรับเปลี่ยนได้ตามที่เราต้องการ โดยที่จะไม่ส่งผลไปที่ไฟล์โดยตรงของ Extension ทำให้ถึงจะมีการ Update Extension ก็จะไม่ทำให้รูปแบบที่เราแก้ไขหายไปนั้นเอง แต่จากที่ผมเคยทำมาโดยส่วนมากจะถูกดึงมาเฉพาะที่เป็นโครงสร้างนะครับ ในส่วน CSS จะมีน้อยมากที่ถูกดึงมาด้วยครับ

 

การโหลด Script ต่างๆ

     นั้นหมายความว่า เราสามารถที่จะวาง Script ต่างๆ ที่เราต้องใช้ อาทิเช่น Script จาก Boostrap หรือ Code จาก Facebook ,Google Analytics เป็นต้น ทำให้เราสามารถจัดการได้ในที่เดียว หรือแม้กระทั้งการเปลี่ยนเวอร์ชั่นหรือ พาทต่างๆ ของ Script ก็จะสามารถแก้ไขได้ง่ายๆ โดยไม่ส่งผลต่อ Extension อื่นๆ เลย

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

ตัวอย่างการวาง Script ต่างๆใน Template

 

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

 

CSS ของ Template

     โดยปกติแล้ว เรามักจะกำหนดหรือสร้าง CSS ขึ้นมา เพื่อใช้กับตัว Template แต่ความเป็นจริงแล้วไฟล์ CSS ที่เรามีใน Template นั้น ยังสามารถนำมาใช้วาง CSS ของ Extension อื่นๆ ที่เราต้องการเปลี่ยนแปลงได้เช่นกัน อาทิเช่น ถ้า Extension กำหนดขนาดตัวอักษรไว้ 30px เราก็สามารถมาสร้างขนาดของตัวอักษรใหม่ใน CSS ของ Template เป็น 14px ได้ โดยที่ ระบบจะดึงค่า CSS ใน Template เป็นหลักก่อน ถ้ามีการกำหนดเอาไว้ แต่ถ้าไม่มีการกำหนดเอาไว้ ก็จะไปดึงค่า CSS ใน Extension มาใช้ตามปกติ หลักการนี้ก็คือการทำ CSS override ใน Template นั้นเอง

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

ตัวอย่างการใช้ CSS Override ใน Template

 

     เพียงแค่ว่า เราต้องรู้ตำแหน่งของการกำหนดของ Extension นั้นๆ ว่าใช้ ID หรือ Class อะไร แล้วนำ ID หรือ Class มาใช้ใน CSS ของ Template นั้นเอง

แนวความคิด การมองเว็บไซต์อย่างเข้าใจง่ายๆ

ตัวอย่างการทำ CSS Override ใน Template

 

     จากในตัวอย่างจะเห็นว่า จริงๆ แล้วเป็นตำแหน่งจาก Extensions ที่ชื่อ BT Contents Slider ซึ่งมีการกำหนด Class เอาไว้ที่ไฟล์ btcontentslider.css บรรทัดที่ 125 แต่เราสามารถมาสร้างเพิ่มใน Template ของเราได้ โดยที่ไม่ต้องไปแก้ไข css ของextension นั้นเอง

 

     ซึ่งถ้าทั้งหมดนี้ ไม่มีการกำหนดไว้ใน Template ระบบของเว็บไซต์ Joomla ก็จะไปดึงเอารูปแบบและ CSS ของ Extensions นั้นๆ มาแสดงตามปกติ เพื่อนๆพอเข้าใจจุดประสงค์ของบทความนี้แล้วใช่ไหมครับ นั้นก็คือว่า เราสามารถจะทำการแก้ไขหรือปรับเปลี่ยนตรงส่วนไหนก็ได้โดยอิสระ เพียงแค่ทำใน Template ก่อนนั้นเอง ถึงเราจะทำพลาด หรือยังกำหนดไม่ถูกต้อง ก็จะไม่ส่งผลเสีย หรือทำให้ Extension นั้นๆ Error (ในกรณีถ้าเป็นโครงสร้างหรือ CSS ก็อาจจะแสดงผลที่เพี้ยนไปนะครับ ) เพราะจากประสบการณ์ หลายๆ คนมักตั้งคำถามว่า ฉันจะแก้ตรงนู้น ตรงนี้ ยังไง แต่ไม่เคยเข้าใจ ว่าการแก้ที่จะไม่สงผลเสียควรทำแบบไหน ก็กลายเป็นว่า พอแก้ไปแล้ว ลืมหรือจำไม่ได้ว่าแก้อะไรตรงไหนไปบ้าง ก็ต้องมาไล่ไปในที่ละตัวของ Extension หรือ หลังแก้ไขแล้ว ไปอัพเดท Extension ตัวนั้นเข้า มันก็เลยทำให้ที่เราแก้ไขนั้นหายไป ต้องมาไล่แก้ไขใหม่อีก มันเลยเกิดความวุ่นวาย และไม่จบสิ้นนั้นเอง ดังนั้นทำในที่เดียว จบครับพี่น้อง

 

ขอบคุณครับ

Webmaster JoomlaHitz.com (ริว)

 

 

รับทำเว็บไซต์ / รับดูแลเว็บไซต์ รายเดือน / รับดูแลเว็บไซต์ รายปี / สอนทำเว็บไซต์ Joomla / รับทำเว็บราคาถูก

 

 

   โฮสติ้งดีๆ สำหรับ Joomla ที่แนะนำ เสถียน ไม่ล่ม ไม่มีปัญหา สำหรับการใช้งาน Joomla ปัจจุบันมี Server PHP 7.3 เพื่อรองรับ Joomla 3 และ 4 

 

   หากท่านใดสนใจ หาโฮสติ้งราคาไม่แพง คุณภาพดี ลองใช้ดูครับ แนะนำเลือกเป็น Package Kiddie Unlimited Bandwidth อันนี้คุ้มครับ หากท่านใดคลิ๊กผ่านลิงค์แนะนำของผม ถือว่าเป็นแรงสนับสนุนในการทำเว็บ เพื่อสร้างเนื้อหาดีๆต่อไปครับ ขอบคุณครับ

 

สนใจโฮสติ้งนี้

เพื่อคุณสนใจ..บทความนี้

สถิติเว็บไซต์

0.png8.png3.png6.png8.png9.png4.png3.png
ผู้เยี่ยมชม วันนี้31
ผู้เยี่ยมชม เมื่อวาน148
ผู้เยี่ยมชม อาทิตย์นี้558
ผู้เยี่ยมชม เดือนนี้687
ผู้เยี่ยมชมรวม8368943

มีเพื่อนอยู่ในเว็บ ตอนนี้!

1
บุคคลทั่วไป