Astroid Framework (2)

จัดการตกแต่ง Astroid Framework ตอนที่ 2

เรามาจัดการปรับเทมเพลตจาก Astroid Framework ต่อกันดีกว่า คงจะใช้เป็นแนวทางของเพื่อนๆ ได้บ้างนะครับ ความจริงเมื่อติดตั้งแล้วคุณก็สามารถเข้าถึงคู่มือการใช้งาน Documents ได้อยู่แล้วจากลิงก์นี้ หรือจากการคลิกที่ Docs จากหน้าจัดการเทมเพลตรูปข้างล่างนี้ แค่มันเป็นภาษาอังกฤษเท่านั้น ก็สามารถใช้ Google Translate ได้อยู่นะ แต่บางคนก็อาจไม่เข้าใจอยู่ดี จึงขอนำมาเสนอเป็นภาษาไทยในเว็บนี้แล้วกัน (ใครใจร้อนไม่อยากรอผมก็ไปศึกษากันต่อในเว็บ Astroid กันเลยนะครับ)

เรามาเริ่มจัดการกันได้เลย ล็อกอินเข้าไปจัดการหลังบ้านหน้าแอดมิน ไปที่ System > Template Style (Site) เลือกคลิกที่ astroid_ template_ zero_ default (Astroid) กันต่อได้เลย ก่อนจะจัดการต่อเรามาสร้างความเข้าใจเบื้องต้นเกี่ยวกับหน้าเว็บที่เราจะแก้ไขกันก่อน (ในที่นี้ผมได้สร้างเมนู และข้อมูลเบื้องต้นสำหรับอธิบายไว้แล้วดังภาพ)

• ตำแหน่ง A และ B คือส่วนแสดงผลข้อมูลเบื้องต้น (information) กับไอค่อนแสดงลิงก์ Social Media ของเรา (สามารถเพิ่ม-ลบได้ตามต้องการ) ในตำแหน่ง topbar-1 และ topbar-2
• ตำแหน่ง C และ D คือส่วนหัวเว็บ (Header) ที่แสดงตัวอักษรหรือภาพชื่อหัวเว็บไซต์ และแถบเมนูด้านบน (Top menu) แต่เทมเพลตนี้กำหนดให้ใช้เป็น Main menu (เราสามารถเปลี่ยนเอาเมนูอื่นมาแสดงได้เช่นกัน)
• ตำแหน่ง E คือส่วนแสดงเมนูทางด้านซ้ายของเว็บ และ F คือส่วนที่แสดงเนื้อหาในหน้าแรก (Home) ที่เป็นหน้าเริ่มต้นรวมทั้งเนื้อหาบทความที่ถูกกำหนดให้แสดงในหน้าแรกของเว็บ (กำหนดให้มีค่า Featured > On)
• ตำแหน่ง G คือตำแหน่งท้ายหน้า (footer) สำหรับแสดงลิขสิทธิ์เจ้าของเว็บ เทมเพลต หรือโฮสท์ที่ให้บริการ และ H คือตำแหน่งของเครื่องหมายลิงก์ให้คลิกเลื่อนขึ้นไปอย่างรวดเร็ว (Back to Top) โดยไม่ต้อง Scroll เมาส์ให้เมื่อย

เราจะทำการดัดแปลงในส่วนข้อมูล สีสันที่แสดงในตำแหน่งต่างๆ เหล่านี้กันไปทีละจุดเพื่อสร้างความเข้าใจพื้นฐาน และนำไปสู่การปรับแต่งออกแบบเว็บไซต์ให้ตรงใจเราที่สุด เมื่อคลิกที่ปุ่ม Template Options แล้วจะปรากฏหน้าตาจัดการเว็บไซต์ดังนี้

กำหนดค่าเริ่มต้นให้เว็บไซต์

ในกรอบแรก Basic สีแดง คือการกำหนดค่าพื้นฐานจะมีหลายหัวข้อให้จัดการ ในที่นี้มีส่วนที่เราควรกำหนดค่าในกรอบสีเขียวจำนวน 4 เรื่องดังนี้

• Page Setting : เป็นการกำหนดการแสดงผลของเว็บในส่วนความกว้างของหน้าสามารถเลือกได้เป็นแบบ Wide กว้างตามขนาดหน้าจอของผู้ชม หรือ Boxed รูปแบบกล่องเท่าเดิมตามที่ตั้งค่าไว้ ในที่นี้ผมเลือกแบบ Wide กว้างตามหน้าจอผู้ชม แต่ก็ตั้งค่าลิมิตไว้ไม่เกิน 1400 พิกเซล (หรือจะตั้งค่ามากน้อยกว่านี้ก็ได้)
• Preloader : คือเครื่องหมายที่แสดงว่าเว็บกำลังรอโหลดข้อมูล (มักจะใช้กับเว็บไซต์พวกที่แสดงด้วยรูปภาพจำนวนมาก หรือภาพขนาดใหญ่) จะให้แสดงหรือไม่ก็ได้ ผมไม่ใช้ขอปิดไว้เพราะมันทำให้ความรู้สึกของผู้ชมคิดว่า เว็บนี้แม่งมันโหลดช้าจัง ถ้าจะใช้ก็สามาถกำหนดรายละเอียดเพิ่มเติมได้เช่น สามารถเลือกรูปที่มาแสดงได้เอง กำหนดสีของตัวโหลด กำหนดสีพื้นหลังขณะโหลด กำหนดขนาดของรูปได้ (ลองเองนะจ๊ะ)
• Favicon : การกำหนดค่าสัญลักษณ์ไอค่อนเล็กๆ นำหน้าชื่อเว็บไซต์บนส่วนไตเติ้ลของบราวเซอร์ ใช้ภาพแบบ png ขนาดเล็กๆ ประมาณ 16x16px
  
  
• Back to Top : ปุ่มลอยแสดงตำแหน่งคลิกให้เลื่อนขึ้นด้านบนแบบรวดเร็ว (ใช้ได้ผลดีในกรณีที่เว็บไซต์ที่มีเนื้อหาที่ยาวมากๆ) สามารถกำหนดให้แสดงหรือไม่แสดงก็ได้ ถ้ากำหนดให้แสดงสามารถเลือกรูปแบบได้หลากหลาย สามารถกำหนดสี ขนาดของไอค่อน และอื่นๆ
  

กำหนดส่วน Topbar กันเลย

Topbar : คือแถบสีด้านบน แสดงข้อมูลแยกเป็น 2 ส่วน คือ topbar-1 แสดงข้อมูลที่อยู่ หมายเลขโทรศัพท์ อีเมล์ และเวลาทำการ และ topbar-2 จะแสดงไอค่อนของโซเชียลมีเดีย สามารถเลือก/ลบได้ตามที่ต้องการ มาดูกันว่าปรับที่ไหน

• Contact Information : จะอยู่ในกลุ่ม Miscellaneous จะมีช่องให้กรอกที่อยู่ หมายเลขโทรศัพท์ อีเมล์ เวลาทำการ (ช่องไหนไม่ต้องการให้แสดงให้ลากดำลบออก แล้วค่อยบันทึก)
  
• Social : การแสดงไอค่อนของโซเชียลมีเดียที่เรามี สามารถเพิ่มลบได้ตามต้องการ หรือจะให้ไม่แสดงก็ได้ ให้เปลี่ยนลิงก์ไปยังที่อยู่ (url) เลือกรูปไอค่อนที่เราต้องการแสดงผล (ด้านล่างช่อง url) สำหรับสื่อโซเชียลที่เราไม่ต้องการให้ลบทิ้งที่รูปถังขยะไป หรือจะเพิ่มเติมก็เลือกจากปุ่มขวามือที่เรียงรายอยู่ได้เลย
  

ในส่วน Topbar ที่เราเห็นจะมีพื้นสีกำหนดมาให้อยู่แล้ว แต่เราอยากกำหนดสีเองให้ตรงกับธีมสีที่เราชอบได้ไหม? ได้สิครับเดี๋ยวจะบอกให้อีกทีในเรื่องของการเปลี่ยนสี ตอนนี้เอาในส่วนปลีกย่อยที่สำคัญกันก่อน

กำหนดส่วนหัวเว็บไซต์ Header

 ในส่วนนี้จะมีการแสดงผลแยกเป็น 2 ส่วน คือ ส่วนหัวปกติ (Header) ที่ผู้เข้าชมพบได้เมื่อเข้ามาครั้งแรก และส่วนหัวคงที่ (Sticky Header) ที่ไม่หายไปเมื่อผู้ชมเลื่อนหน้าลงไปด้านล่าง มีสิ่งที่ต้องปรับแต่งคือ ชื่อหัวเว็บไซต์ เป็นได้ทั้งแบบตัวอักษรหรือรูปภาพก็ได้ และส่วนที่สองคือ เมนูที่แสดงด้านบน (Top Menu) เราจะกำหนดในส่วนจีดการเทมเพลตหัวข้อ Header ดังภาพ

• Header Element : ปิด/เปิดการแสดงส่วนหัว ถ้าปิดก็ไม่มีอะไรต้องปรับแต่ง ถ้าเปิดก็มีสิ่งที่ต้องปรับแต่งอีกมากมายที่จะกล่าวถึงหัวข้อถัดไป
• Module Position : ตำแหน่งที่จะแสดงหัวเรื่องในเทมเพลตนี้ astroid-header ถูกกำหนดไว้แล้วไม่ต้องเปลี่ยน
• Header Module : เลือกรูปแบบการแสดงผลของชื่อหัวเรื่อง และตำแหน่งการจัดวางของเมนู

• Horizontal Menu Mode : โหมดเมนูแนวนอน เลือกได้ระหว่างเมนูซ้าย ขวา หรือตรงกลาง (ดูในภาพประกอบ)
• Header Block 1 และ Header Block 2 : ส่วนนี้ไม่ต้องเปลี่ยนแปลงอะไรปล่อยเป็น Blank
• Site Menu Method : เลือกวิธีแสดงเมนู ตอนนี้คุณสามารถเลือกที่จะแสดงเมนู Astroid โดยตรงเป็นค่าเริ่มต้นหรือผ่านตำแหน่งโมดูล
• Site Menu : เลือกโมดูลที่จะนำมาแสดงบนหัวเว็บ (Top Menu) ปกติจะกำหนดให้โมดูลชื่อ Main Menu มาแสดงที่นี่ เราเปลี่ยนเป็นเมนูอื่นๆ ได้ตามต้องการ (ต้องสร้างไว้ก่อนนะจ๊ะ)

 

นี่คือส่วน Header ที่ถูกปรับแต่งแล้วในส่วน Topbar ต่อไปเราจะจัดการในเรื่องหัวเว็บ () ที่สามารถเลือกได้ 2 แบบ คือแบบที่เป็นตัวอักษร หรือใช้รูปภาพแทนได้ ด้วยวิธีการต่อไปนี้

• เราจะเริ่มด้วยการใช้ Logo Type เป็นแบบ Text ก่อนครับ ด้วยการคลิกที่ Text ในวงสีเขียว จะมีที่ให้จัดการได้ดังขั้นตอนถัดไป

• จะมีช่อง Logo Text ให้เราใส่อักษรชื่อเว็บไซต์ได้ ในที่นี้เราจะใช้คำว่า JoomlaTest ดังภาพ (ใส่ชื่ออักษรไทยได้ไหม ได้ แต่ต้องเลือกฟ้อนต์ที่รองรับภาษาไทยเท่านั้น ด้วยข้อจำกัดที่ภาษาของเรามันมีทั้งสระบนล่าง วรรณยุกต์อีก อาจจะทำให้สวยถูกใจได้ยาก) จากนั้นก็เลือกรูปแบบตัวอักษรด้วยการคลิกเลือกที่ Custom

• จะเห็นฟอนต์ชื่อ Bookman Old Style เป็นค่า Default สามารถเปลี่ยนได้ด้ยการคลิกที่รูปฟันเฟือง จะมีฟอนต์ให้เลือกทั้งแบบค่ามาตรฐาน (System) หรือจะเลือกจาก Google Fonts ซึ่งจะมีให้เลือกหลากหลายมากกว่า ลองดูเองนะครับไม่ยากเลย

• จากภาพทดลองใช้ฟ้อนต์จาก Google Fonts ชื่อ Abril Fatface เราสามารถกำหนดสีได้ด้วยการคลิกที่วงกลมใต้คำว่า Font color จะมีพาเนลสีให้เลือกปรับแต่งตามชอบเลย นอกจากนั้น ยังสามารถกำหนดทั้งขนาด ช่องว่างระหว่างตัวอักษร ระยะห่างบรรทัด จะได้ผลดังภาพ

ปรับแต่งเทมเพลต Astroid Framework ตอนที่ 1 | ตอนที่ 2 | ตอนที่ 3