Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

การพัฒนาธีมระบบมาเจนโต้ : การปรับแต่ง หน้าแรก ตอนที่ 1

by
Length:MediumLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Bootstrapping
Magento Theme Development: Home Page, Part 2

Thai (ภาษาไทย) translation by Artapon Rittirote (you can also view the original English article)

บทความก่อนหน้า "การพัฒนาธีมระบบมาเจนโต้ด้วย Bootstrap" เราได้พัฒนาธีมเตรียมไว้บางส่วนแล้ว ในบทความนี้ผู้เขียนจะสอนการปรับแต่ง หน้าแรกของธีมเพิ่มเติม ซึ่งจะลงรายละเอียดที่ลึกกว่าเดิมและใช้คำสั่งที่ยากขึ้น มากกว่าบทความที่ผ่านๆ มา

ก่อนอื่น ผู้เขียนขออธิบายทบทวนก่อนว่า ในบทความที่ผ่านๆมา ผู้เขียนได้สอนอะไรไปบ้างแล้ว ย้อนกลับไปบทความแรก ผู้เขียนได้สอนการปรับแต่ง แก้ไขไฟล์เลย์เอ้าท์หลัก และ ไฟล์ header.phtml เพียงบางส่วน บทความต่อมา ผู้สอนได้สอนการปรับแต่งส่วนประกอบอื่นๆ เพิ่มเติม เช่น ตัวเลือกค่าเงิน  ตัวเปลี่ยนภาษา ฯลฯ

ก่อนที่จะเริ่มการพัฒนาธีม ให้ผู้อ่านเข้าไปที่ระบบจัดการเพื่อเปิด ฟังก์ชั่นสำหรับแสดงโครงสร้างของธีม โดยเข้าไปที่ System > Developer > Debug และ ผู้อ่านต้องแน่ใจว่า กำลังเปิดใช้งานการตั้งค่านี้ ที่ เว็บไซต์หลัก เท่านั้น เมื่อฟังก์ชั่นสำหรับแสดงโครงสร้างของธีมถูกเปิด จะปรากฎกล่องสีแดงขึ้นมา ตามภาพที่แสดงด้านล่าง

Homepage with template hints

ผู้อ่านจะเห็นว่า กล่องสีแดงที่แสดงแบ่งสัดส่วนกันอย่างชัดเจน ช่วยให้เห็นโครงสร้างและจัดการหน้าเพจได้ง่ายมากขึ้น จากนั้นให้ผู้อ่านเปิดโฟลเดอร์จนกว่าจะเห็นไฟล์ 1column.phtml ตามตัวอย่างพาธ frontend/rwd/default/template/page/1column.phtml และเพื่อหลีกเลี่ยงการแก้ไขไฟล์ .phtml ในธีม RWD โดยตรง เราจะอาศัยความสามารถ "การสืบทอดคุณสมบัติ" จากธีมอื่นของระบบมาเจนโต้ โดยเราจะทำการ "สร้างโฟลเดอร์ page " ในธีมใหม่ให้ให้ตรงกับตำแหน่งโฟลเดอร์ของธีมที่เราสืบทอดมา ตัวอย่างพาธ frontend/tutsplus/vstyle/template/page จากนั้นให้เราคัดลอกไฟล์ .phtml จากโฟลเดอร์ page ของธีม RWD มายัง โฟลเดอร์ page ในธีมที่เราสร้างใหม่ ไฟล์ที่อยู่ในโฟลเดอร์ page ตามพาธ frontend/rwd/default/template/page จะประกอบไปด้วย 1column.phtml, 2column-left.phtml, 2column-right.phtml และ 3column.phtml หลังจากที่คัดลอกไฟล์ทั้งหมดเสร็จเรียบร้อยแล้ว ให้ผู้อ่านเปิดไฟล์ 1column.phtml 

เมื่อผู้อ่านเปิดดูคำสั่งในไฟล์ 1-column.phtml ผู้อ่านจะเห็นคำสั่งตามตัวอย่างที่แสดงด้านล่าง

ต่อจากนี้เราจะทำการปรับแต่งคำสั่งด้านบนให้มีโครงสร้างเหมือนกับธีม HTML ต้นฉบับ โดยเราจะทำการเพิ่ม คลาสชื่อว่า คอนเทรนเนอร์ และเพิ่มคำสั่ง div เมื่อผู้อ่านแก้ไขเรียบร้อยแล้วจะได้รูปแบบคำสั่งตามตัวอย่างข้างล่าง

ต่อไปเราจะทำการแก้ไขไฟล์  2column-left.phtml2column-right.phtml และ 3column.phtml  ให้ผู้อ่านเปิดไฟล์ 2-column-left.phtml ขึ้นมาแก้ไขให้เหมือนกับคำสั่งที่แสดงด้านล่าง

ต่อไป ทำการแก้ไขไฟล์ 2columns-right.phtml ให้ได้ตามคำสั่งที่แสดงด้านล่าง เช่นกัน

สุดท้ายให้แก้ไขไฟล์ 3columns.phtml 

กรุณาแก้ไขไฟล์อย่างระมัดระวัง เมื่อคุณเปรียบเทียบไฟล์ที่กำลังแก้ไขกับไฟล์ index.html และ ปรับแก้ตามที่คุณต้องการ

ภาพด้านล่างเป็นหน้าตาของเว็บไซต์หลังจากทำการแก้ไขไฟล์ต่างๆ ไปแล้ว ผู้อ่านจะสังเกตุว่าหน้าตาของเว็บไซต์ ยังไม่เปลี่ยนแปลงมากนัก แต่ผู้อ่านไม่ต้องตกใจ เราจะทำการแก้ไขเพิ่มเติมในขั้นตอนต่อไป

Homepage with wrapper files modified

ต่อไปเราจะทำการแก้ไขไฟล์ header.phtml ก่อนที่จะเริ่มให้แก้ไข ให้ผู้อ่านเปิดไปยังตำแหน่งโฟลเดอร์ในธีม RWD ตามพาธ frontend/rwd/default/template/page/html จากนั้น คัดลอกไฟล์ header.phtml ไปที่ frontend/tutsplus/vstyle/template/page/html หลังจากที่คัดลอกไฟล์ เสร็จเรียบร้อยแล้ว ต่อไปเราจะทำการแก้ไขคำสั่งภายในไฟล์

ให้ผู้อ่านเปรียบเทียบคำสั่งด้านบนและคำสั่งจากเทมเพลต HTML ที่แสดงด้านล่างและพยายามปรับเปลี่ยนโครงสร้างตาม

เราจะทำการเพิ่มคำสั่ง HTML ไปที่ไฟล์ header.phtml จากนั้นทำการเปลี่ยนส่วนต่างๆ เช่น ปุ่มเปลี่ยนค่าเงิน , ปุ่มเปลี่ยนภาษา , โลโก้ , เมนู , ช่องค้นหา ให้สามารถเปลี่ยนแปลงได้จากระบบจัดการหลังร้าน ตัวอย่างคำสั่งด้านล่างคือ คำสั่งหลังจากทำการแก้ไขเรียบร้อยแล้ว

ภาพด้านล่างเป็นหน้าตาของธีมหลังจากที่เราทำการแก้ไขไฟล์ header.phtml เสร็จเรียบร้อยแล้ว

Afer editing headerphtml file

ถึงตรงนี้คุณจะเห็นว่า ยังมีส่วนอื่นที่ต้องทำการแก้ไขเพิ่มเติม เช่น ตัวเลือกในการเปลี่ยนภาษา , ตัวเลือกเปลี่ยนค่าเงิน , ภาพสไลด์เดอร์ , เมนู , ช่องค้นหา ฯลฯ โดยเราจะเริ่มจากแก้ไขตัวเลือกเปลี่ยนค่าเงินและเปลี่ยนภาษา เพื่อความสะดวกในการแก้ไข ผู้เขียนแนะนำให้เปิดใช้งาน ตัวแสดงโครงสร้างขอเทมเพลต (template hints) เพื่อให้รู้ตำแหน่งไฟล์ที่ต้องการแก้ไข เมื่อผู้อ่านเปิดใช้งานแล้วจะพบว่าตำแหน่งไฟล์ที่เราจะคัดลอกคำสั่งไปยังธีมใหม่อยู่ที่ base/default/template/page/switch/languages.phtml   จากนั้นให้ผู้อ่านทำการแปลงคำสั่งจากไฟล์ต้นฉบับ languages.phtml  ให้เข้ากับโครงสร้าง HTML ในเทมเพลตของเรา

คำสั่งด้านล่าง เป็นคำสั่งต้นฉบับจาก HTML เทมเพลต ของส่วน เปลี่ยนภาษาและค่าเงิน

หลังจากที่เราแก้ไขไฟล์ languages.phtml ให้ตรงกับ HTML เทมเพลต เราจะได้หน้าตาของคำสั่งตามนี้

หลังจากแก้ไขเสร็จเรียบร้อยแล้ว ผู้อ่านจะเห็นว่าตอนนี้ปุ่มเปลี่ยนภาษาของเรายังไม่ขึ้น ผู้อ่านต้องเข้าไปที่่ระบบจัดการเว็บ  จากนั้นเข้าไปที่เมนู  System > Configuration > General > Currency Setup  และเปิดใช้งานบางภาษา ต่อไปเข้าไปที่  Manage Currency > Rates เพื่อตั้งค่าของเงิน เมื่อผู้อ่านกลับไปหน้าแรกจะเห็นว่าตัวเลือกสำหรับเปลี่ยนค่าเงินสามารถใช้งานได้แล้ว จากนั้นทำการเปิดใช้งานส่วนแสดงโครงสร้างเทมเพลตอีกครั้ง ผู้อ่านจะเห็นตำแหน่งไฟล์ในธีม RWD ที่เราต้องคัดลอกนำมาไว้ในธีมใหม่ของเราคือ rwd/default/template/directory/currency.phtml, 

เมื่อผู้อ่านแก้ไขคำสั่งของเดิมให้มีโครงสร้างของคำสั่ง HTML เหมือนกับเทมเพลตต้นฉบับ ผู้อ่านจะได้หน้าตาของคำสั่งเหมือนกับตัวอย่างที่แสดงด้านล่าง 

ต่อไป เราจะทำการแก้ไขคำต้อนรับให้ตรงกับ HTML เทลมเพลตที่เราออกแบบไว้  ( สำหรับไฟล์ HTML เทมเพลต ผู้อ่านสามารถดาวน์โหลดไฟล์ต้นฉบับ ได้จาก บทความ "Magento Theme Development: Getting Started" )  วิธีการแก้ไข ให้ผู้อ่านเข้าไปที่เมนู System > Configuration > General > Design > Header และแก้ไขคำในช่อง Welcome Text หลังจากแก้ไขและบันทึกแล้ว ผู้อ่านจะเห็นความเปลี่ยนแปลงไปตามรูปด้านล่าง 

Header at the end

ถ้าผู้อ่านทำตามขั้นตอนได้อย่างถูกต้อง ผู้อ่านจะได้ธีมที่มีหน้าตา ตามรูปที่แสดงด้านบน  สำหรับบทความนี้ ผู้เขียนขอหยุดไว้เท่านี้ก่อน ในบทความต่อไป เราจะปรับแต่งส่วนหัวของธีมเพิ่มเติม และ ปรับแต่งในส่วน ภาพสไลด์เดอร์ (Slider) ด้วย

กรุณาบอกประโยชน์ที่ได้รับจากบทความนี้ให้ผู้เขียนได้ทราบ ผ่านคอมเม้น ด้านล่าง

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.