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

การพัฒนาธีมของระบบมาเจนโต้ : เบื้องต้น

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Bootstrapping

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

Final product image
What You'll Be Creating

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

การติดตั้งระบบมาเจนโต้

ขั้นตอนแรกในการพัฒนาระบบมาเจนโต้คือ การติดตั้งระบบมาเจนโต้บนเซิฟเวอร์เสมือน (local server) ที่อยู่ในเครื่องของคุณ หรือ ผู้อ่านจะติดตั้งระบบมาเจนโต้ บนเซิฟเวอร์จริง (web server) ก็ได้ แต่การติดตั้งและพัฒนาบนเซิฟเวอร์จริงอาจจะส่งผลต่อ ความเร็วในการพัฒนา ดังนั้น ผู้เขียนแนะนำว่าควรจะใช้เซิฟเวอร์เสมือน (local server) ในการพัฒนาจะเหมาะสมมากกว่า และเมื่อระบบผ่านการทดสอบและเสร็จสมบูรณ์ จากนั้นคุณค่อยย้ายระบบมาเจนโต้ที่พัฒนาในเครื่องขึ้นเซิฟเวอร์จริง

ในบทความนี้ผู้สอนจะไม่อธิบายวิธีการ ติดตั้งระบบมาเจนโต้บนเซิฟเวอร์เสมือน เนื่องจากมีบทความสอนการติดตั้งมากมาย สามารถหาได้จากอินเตอร์เน็ต นอกจากนี้คุณสามารถหาบทความสอนการติดตั้งระบบมาเจนโต้ ภายในเว็บไซต์ Tuts+ article ของเราก็ได้ , ซึ่งในบทความดังกล่าวจะแนะนำวิธีการติดตั้งระบบมาเจนโต้บน เซิฟเวอร์เสมือน (local server)

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

การติดตั้งเครื่องมือแก้ไขและจัดการข้อผิดพลาดของคำสั่ง

หลังจากที่คุณติดตั้งระบบมาเจนโต้เรียบร้อยแล้ว , ขั้นตอนต่อไปคือ การหาเครื่องมือมาใช้ในการพัฒนา คุณสามารถใช้เครื่องมือเขียนคำสั่ง ที่คุณต้องการ หรือจะใช้เครื่องมืออะไรก็ได้ตามที่คุณสะดวก แต่ถ้าคุณยังไม่เคยใช้เครื่องมือพัฒนาใดๆ มาก่อน ผู้เขียนขอแนะนำให้ใช้ Notepad++ เนื่องจากมีขนาดเล็กและใช้ง่าย และสามารถใช้งานได้ฟรีอีกด้วย

นอกจากเครื่องมือที่ใช้ในการเขียนคำสั่งแล้ว เราจำเป็นต้องใช้เครื่องมือที่ช่วยในการตรวจสอบและแก้ไข CSS บนหน้าเว็บ ถ้าคุณใช้ Firefox คุณสามารถติดตั้ง ส่วนเสริมที่ชื่อว่า Firebug สำหรับตรวจสอบและแก้ไข CSS อย่างไรก็ตามถ้าคุณ ถ้าคุณใช้ Chrome คุณสามารถใช้เครื่องมือตรวจสอบและแก้ไข CSS ( Chrome Web Inspector ) ที่ติดมากับ Chrome ก็ได้ โดยที่คุณไม่จำเป็นต้องติดตั้งส่วนเสริมอื่นๆ เพิ่มอีก สำหรับ ชุดการสอนนี้ ผู้สอนจะใช้เครื่องมือ Chrome Web Inspector สำหรับตรวจสอบและแก้ไข CSS

แนะนำคำสั่ง HTML ที่จำเป็นสำหรับการพัฒนาธีม

ผู้สอนได้พัฒนาคำสั่ง HTML บางคำสั่ง สำหรับใช้ในชุดการสอนนี้ ซึ่งคำสั่ง HTML จะประกอบด้วยรูปแบบ และส่วนประกอบอื่นๆที่ถูกใช้มากในธีมรูปแบบอีคอมเมิร์ซ เช่น ตะกร้าสินค้า , ส่วนหัวเว็บ ภาพสไลด์เดอร์ , ตัวเลือกเปลี่ยนภาษาและค่าเงิน เป็นต้น โดยพวกเราจะทำการแปลงจาก HTML ให้กลายเป็นธีม ไปพร้อมๆกัน โดยคุณสามารถกดปุ่ม Download Attachment (ปุ่มสีเทาด้านขวามือของบทความ) เพื่อดาวน์โหลดไฟล์ HTML ต้นแบบที่ผู้เขียนเตรียมไว้ให้ สำหรับใช้ในบทความนี้

บทนำ

ก่อนที่พวกเราจะเข้าสู่ขั้นตอนการพัฒนา ผู้เขียนยืนยันว่าถ้าคุณเรียนการพัฒนาธีมผ่าน ชุดการสอนนี้ คุณจะคุ้นเคยกับทฤษฎีพื้นฐานเบื้องหลังการพัฒนาธีมของ ระบบมาเจนโต้ โดยความรู้ในการพัฒนาธีมจะ เป็นประโยชน์อย่างมาก ก่อนที่จะเริ่มพัฒนาธีมที่เขียนด้วยคำสั่ง ยากมากขึ้น

รูปแบบโครงสร้างไฟล์ที่เราจะทำการแก้ไข

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

เมื่อ คุณเปิดเข้าไปดูโฟลเดอร์ที่ติดตั้งระบบมาเจนโต้ คุณจะเห็นโครงสร้างโฟลเดอร์ตามภาพด้านล่าง จากโฟลเดอร์ทั้งหมดจะมีเพียง 2 โฟลเดอร์เท่านั้นที่เราจะเข้าไปแก้ไขไฟล์ คือ app และ skin

Magento Folder Structure

ก่อนที่คุณจะเริ่มต้นตามขั้นตอนถัดไป บางครั้งเราอาจจะสร้างโฟลเดอร์ js ไว้ด้านนอก เพื่อให้สะดวกในการใช้ไฟล์ JavaScript ไลบรารี่ เช่น JQuery ก็ได้ แต่ถ้า คุณไม่ต้องการใช้โฟลเดอร์ดังกล่าว คุณก็สามารถใช้โฟลเดอร์ js ใน app และ skin ที่อยู่ ตามเดิม

การตั้งค่าสภาพแวดล้อมในการพัฒนาระบบมาเจนโต้

เราต้องเปลี่ยนแปลงการตั้งค่าบางอย่างในระบบมาเจนโต้ เพื่อช่วยให้เรา พัฒนาธีมได้เร็วขึ้นและช่วยแจ้งเตือนข้อผิดพลาดของระบบมาเจนโต้ ให้เห็น

ก่อนอื่นเราต้องทำการปิดระบบแคชของระบบ โดยการเข้าไปที่ System > Cache Management และเลือกรายการทั้งหมด หลังจากนั้น เลือกตัวเลือกที่เขียนว่า Disable จากนั้นกดปุ่ม submit

Disabling Cache

ขั้นตอนต่อไปคือการเรียงลำดับข้อมูล (re-index) ใหม่ โดยเข้าไปที่เมนู System จากนั้นเลือกเมนู Index Management : System > Index Management. เลือกข้อมูลทั้งหมด จากนั้นที่ตัวเลือก Action เลือก Reindex Data และกดปุ่ม submit.

Reindexing Data

ต่อไปเปิดใช้งาน logs และ ข้อความแสดง block โดยเข้าไปที่เมนู System > Configurations ( เมนูด้านซ้าย ) จากนั้นเลือกเมนู Developer หลังจากกดเข้าไป จะเห็นหน้าเกี่ยวกับการ ตั้งค่าลอค (Log Settings) เปิดใช้งาน จากนั้นกดปุ่มบันทึกการตั้งค่า (Save Config) ที่อยู่ด้านขวาบน

Enabling Logs

ซึ่ง ด้านบนของแถบเมนู คุณจะเห็นตัวเลือก Current Configuration Scope ให้คุณเลือก Main Website

Setting Website Scope

จากนั้น คลิกเข้าไปในส่วน การแก้ไขปัญหา (Debug) เพื่อเปิดใช้งาน ส่วนแสดงพาธของเทมเพลต (Template Path Hints) จากนั้นกด ปุ่มบันทึกการตั้งค่า (Save Config) อีกครั้ง

Enabling Template Path Hints

ขั้นตอนสุดท้ายไปที่โฟลเดอร์ที่คุณติดตั้งระบบมาเจนโต้ เปิดไฟล์ index.php เพื่อแก้ไขคำสั่งที่บรรทัดที่ 77 โดยการยกเลิกการคอมเม้นโค้ดในส่วนนี้e:

ต่อไปt?

ตอนนี้คุณอาจจะยังไม่ทราบว่า การที่คุณมีพื้นฐานที่ดีจะช่วยในการพัฒนาธีม ในชุดการสอนต่อไป ดังนั้นในตอนท้าย ผู้เขียนขอแนะนำว่า ถ้าคุณยังไม่พร้อม คุณควรกลับขึ้นไปทบท.

โดยการสร้างโครงสร้างของธีมขึ้นมาใหม่ จากนั้นคัดลอก CSS , JS และ รูปภาพจาก HTML ต้นแบบไปยังธีมมาเจนโต้ที่สร้างขึ้น ต่อจากนั้นสร้างไฟล์ local.xml เพื่อให้แน่ใจว่าธีมที่สร้างกับไฟล์ที่เกี่ยวข้องได้เชื่อมโยงกันs.

ผมหวังเป็นอย่างยิ่งว่าคุณจะติดตามบทความขอ.

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.