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

การพัฒนาธีมระบบมาเจนโต้ : โดยใช้ Bootstrap

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Getting Started
Magento Theme Development: Home Page, Part 1

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

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

การวางโครงสร้างโฟลเดอร์

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

  1. ตำแหน่งแรก app/design/frontend เป็นที่สำหรับวางไฟล์ประเภท phtml และ xml
  2. ตำแหน่งที่สอง skin/frontend สำหรับวางไฟล์ JS , CSS และรูปภาพ ที่เกี่ยวข้อง

ก่อนที่เราจะเริ่มสร้างโฟลเดอร์ ภายใน โฟลเดอร์ frontend ซึ่งประกอบไปด้วย 2 โฟลเดอร์ตามลำดับ โฟลเดอร์แรกคือ โฟลเดอร์แพคเกจ ผู้อ่านอาจจะใช้ชื่อบริษัท,ผู้สร้าง หรือ ชื่ออะไรก็ได้ตามสมควร ในการตั้งชื่อ และ โฟลเดอร์ต่อมาคือ ชื่อของธีม ในบทความนี้ผู้เขียนจะเลือก ‘tutsplus’ เป็นชื่อแพคเกจ และ ‘vstyle’ เป็นชื่อธีม และลงมือสร้างโฟลเดอร์ทั้งสอง ตามชื่อที่เลือก

เริ่มแรกให้ผู้อ่านสร้างโฟลเดอร์ แพคเกจ ตามรูปที่แสดงด้านล่าง
[Magento Directory]/app/design/frontend/{package_name}/{theme_name}/
[Magento Directory]/skin/frontend/{package_name}/{theme_name}/

Magneto Paths

จากนั้นก็สร้างโฟลเดอร์ชื่อธีม
[Magento Directory]/app/design/frontend/tutsplus/vstyle/
[Magento Directory]/skin/frontend/tutsplus/vstyle/

ต่อไปให้สร้างโฟลเดอร์ตามชื่อด้านล่าง ภายในโฟลเดอร์ vstyle ตามพาธ app/design/frontend/tutsplus/vstyle

  1. layout
  2. template
  3. locale
  4. etc

จากนั้นให้สร้างโฟลเดอร์อีก 4 โฟลเดอร์ภายใน skin/frontend/tutsplus/vstyle ตามชื่อด้านล่าง 

  1. css
  2. images
  3. js
  4. fonts

การเปิดใช้งานธีม

สำหรับวิธีการเปิดใช้ธีมสามารถทำได้ โดย เข้าไปที่เมนู System > Settings > Design จากนั้นใส่ชื่อแพคเกจที่สร้างไว้ คือ ‘tutsplus’ ในช่อง Current Package Name และ ใส่ชื่อธีม ‘vstyle’ ในช่อง Template และกดบันทึก (save)  จากนั้นให้ผู้อ่านเปิดกลับไปที่หน้าแรก และ รีเฟรช (refresh) หน้าเว็บ 1 ครั้ง หลังจากรีเฟรช (refresh) เว็บ ผู้อ่านจะพบว่าหน้าและส่วนประกอบต่างๆของเว็บที่ปรากฎ ดูมั่วไปหมด แต่ผู้อ่านไม่ต้องตกใจ  ผู้เขียนจะสอนวิธีการปรับส่วนต่างๆ ให้เหมือนกันธีมต้นฉบับ ในขั้นตอนถัดไป

Packages and Themes

การปรับแต่งธีม

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

ในบทความนี้ ผู้สอนจะสอนสร้างธีมลูก ของธีมที่ชื่อว่า RWD ขั้นตอนแรกเราจะเริ่มต้นง่ายๆด้วยการสร้างไฟล์ theme.xml ภายในโฟลเดอร์ etc ในตำแหน่ง app/design/frontend/tutsplus/vstyle/etc.

จากนั้นเขียนคำสั่งตามตัวอย่างด้านล่างและบันทึก:

ต่อจากนั้นให้ผู้อ่านกลับไปที่หน้าแรก และ โหลดหน้าเว็บใหม่ (refresh)  เมื่อเว็บโหลดเสร็จผู้อ่านจะพบว่า จากหน้าเว็บที่เคยดูไม่เรียบร้อย ตอนนี้ กลายเป็นธีมที่สมบูรณ์ te.

Front page of Magento store

สำหรับเหตุผลที่ทำให้เว็บไซต์ทำงานได้ปกติเป็นเพราะ เราได้สืบทอดคุณสมบัติบางอย่างจากธีม RWD มายังธีมใหม่ของเรา หมายความว่า ในกรณีที่ระบบมาเจนโต้ไม่พบไฟล์ที่ต้องการในธีมใหม่ ระบบจะเรียกไฟล์ที่ต้องการจากธีม RWD ให้เราอัตโนมัติ then use it.

พอถึงขั้นตอนนี้ผู้อ่านจะสังเกตุว่าเรายังไม่ได้สร้างไฟล์ใดๆ ในธีมของเราเลย แต่ธีมก็ยังสามารถทำงานได้ตามปกติ เนื่องจากระบบมาเจนโต้ทำการเรียกไฟล์ต่างๆ มากจากธีม RWD โดยอัตโนมัติ ทำให้ธีมที่เราสร้างขึ้นเหมือนกับธีม RWD ทุกประการ นอกจากจะมีทุกอย่างเหมือนธีมต้นแบบแล้ว ธีมใหม่ของเรายังสามารถแก้ไขหรือเพิ่มเติมส่วนต่างๆ ตามที่เราต้องการได้อย่างอิสระ โดยไม่กระทบธีมต้นแบบ from the RWD theme.

ข้อดี ของการสร้างธีมด้วยวิธีนี้คือ ถ้าธีม RWD มีการอัพเดทเวอร์ชั่นแก้บั๊ก หรือ เพิ่มฟีเจอร์ใหม่ ธีมลูกที่สร้างใหม่ ก็จะอัพเดทไปด้วย t features and bug fixes.

.vaScript, and Image Files

หลังจากที่เราสร้างธีมลูกเสร็จเรียบร้อยแล้ว  ขั้นตอนต่อไปเราจะนำไฟล์ CSS,JS และ รูปภาพ จาก HTML เทมเพลตที่เราเตรียมไว้ ไปยังธีมใหม่ที่สร้างขึ้น ( สำหรับไฟล์ HTML เทมเพลต ผู้อ่านสามารถดาวน์โหลดไฟล์ต้นฉบับ ได้จาก บทความ "Magento Theme Development: Getting Started" )  ocation in our Magento store:

skin/frontend/tutsplus/vstyle/

จากตรงนี้ไป จะมีเพียง 4 โฟลเดอร์เท่านั้นที่เราจะเข้าไปจัดการ คือ js,images,fonts และ  css lders.

Creating a New local.xml File

ขั้นตอนต่อไป คือ การสร้างไฟล์ local.xml  เป็นไฟล์ที่สร้างขึ้นเพื่อกำหนดให้ธีมรู้ว่าเราจะเพิ่มไฟล์ js,css และ รูปภาพ ไปยังส่วนไหนของธีม สำหรับบทความนี้ผู้เขียนจะเพิ่มไฟล์ต่างๆ  ไว้ส่วนหัวของธีม o the header block of our Magento HTML.

โดยเราจะเริ่มต้นจากสร้างไฟล์  XML ที่ตำแหน่ง app/design/frontend/tutsplus/vstyle/layout  และตั้ง ชื่อไฟล์ที่สร้างว่า local.xml ocation:

app/design/frontend/tutsplus/vstyle/layout

localxml

จากนั้นทำการเพิ่มคำสั่ง ตามตัวอย่างคำสั่งด้านล่าง สำหรับรวม CSS และ JS เข้าไปยังธีม จากตรงนี้ไป ผู้เขียนจะอธิบายความหมาย และ การทำงานของคำสั่งด้านล่างทีละคำสั่ง ’s header.

คำสั่งแรก ( บันทัดที่ 4 ) เป็นคำสั่งที่ใช้สำหรับ อ้างถึงส่วน "หัว (head)" ของธีม นั้นหมายความว่า การเปลี่ยนแปลงต่างๆ จะเกิดขึ้นกับ "ส่วนหัว (head)" ของธีมเท่านั้น คำสั่งที่ 2 "action" เราจะใช้คำสั่งนี้ในการแบ่งประเภทไฟล์ JS และ CSS ออกจากกัน ตามตัวอย่างคำสั่ง xml ที่แสดงด้านล่าง tely. For adding JS files, we have used this XML code:
<action method="addItem"><type>skin_js</type><name>js/{javascript_file_name}.js</name><params/></action>

And to include CSS files, we have used this XML code:
<action method="addCss"><stylesheet>css/{css_file_name}.css</stylesheet><params/></action>

เมื่อผู้อ่านเพิ่มคำสั่งและทำการบันทึกไฟล์เสร็จเรียบร้อย ให้ผู้อ่านกลับไปที่หน้าแรกและโหลดหน้าเว็บใหม่ (refresh) จากนั้นกดปุ่ม Ctrl + u เพื่อเปิดดูซอสโค๊ดหลังจากกดปุ่ม Ctrl + u ผู้อ่านจะพบว่ามีไฟล์ CSS และ JS ถูกเพิ่มเข้าไปใหม่ จากนั้นให้ผู้อ่านทดสอบลิงค์แต่ละลิงค์เพื่อให้แน่ใจว่า ลิงค์ที่ถูกเพิ่มเข้าไป ไม่มีลิงค์ไหนที่พังหรือมีปัญหา  เมื่อผู้อ่านเช็คทุกอย่างเรียบร้อยแล้ว broken links.

Added Assets

หน้าเว็บ ที่ได้ควรมีหน้าตาเหมือนกับรูปที่แสดงด้านล่าง  สำหรับบทความนี้ผู้เขียนขอหยุดการสร้างธีมไว้เท่านี้ก่อน ในบทความต่อไป ผู้เขียนจะสอนการแก้ไขไฟล์ phtml ของ เฮดเดอร์ (header),ฟุตเตอร์ (footer) และ ส่วนอื่นๆ ของธีม และ กรุณาบอกผ่านทางคอมเม้นด้านล่างให้ผู้เขียนทราบว่าผู้อ่านสามารถสร้างธีมตามผู้สอนได้ตามรูปที่แสดงด้านล่าง ooks at this stage.

Homepage

สุดท้ายนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่าผู้อ่านจะชอบบทความนี้  และผู้เขียนยินดีรับฟังทุกความเห็นหรือข้อเสนอแนะ เพื่อที่จะใช้ปรับปรุงบทความต่อไป ขอบคุณครับr. Also, let me know if you liked the article. We’d love to hear your opinions.

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.