คำแนะนำในการสร้างธีมใน Magento 2

สวัสดี! คุณรู้สึกสงสัยเกี่ยวกับ Magento 2.0 ที่มีการอัปเดตและการเปลี่ยนแปลงมากมายหรือไม่? วันนี้ เราขอแชร์บล็อกโพสต์เกี่ยวกับ Guide To Create A Theme ใน Magento 2 ให้คุณได้รับการอัปเดตอยู่เสมอด้วยการฝึกฝนทุกวัน

อัปเดตล่าสุด: เราเพิ่งเปิดตัวธีม Claue Multipurpose Magento 2 เวอร์ชัน 2.0 พร้อมการปรับปรุงประสิทธิภาพมากมายและฟีเจอร์พิเศษเฉพาะ ตรวจสอบชุดรูปแบบนี้เลย: Claue Magento Theme 2. 0

สาธิตสด

Claue – ธีม Magento 2&1 ที่สะอาดและเรียบง่าย เป็นเทมเพลตที่ยอดเยี่ยมสำหรับร้านอีคอมเมิร์ซที่ทันสมัยและสะอาดตา พร้อมด้วยเลย์เอาต์ของหน้าแรกมากกว่า 40 แบบและตัวเลือกมากมายสำหรับร้านค้า บล็อก พอร์ตโฟลิโอ เลย์เอาต์ของตัวระบุตำแหน่งร้าน และหน้าที่มีประโยชน์อื่นๆ Claue เวอร์ชัน 2. 0 มาพร้อมกับคุณสมบัติพิเศษมากมาย ได้แก่ :

• มีพื้นฐานมาจากธีม Luma
• ตรงตามมาตรฐานทั้งหมดของ Magento Theme
• การปรับปรุงประสิทธิภาพที่สำคัญ
• เข้ากันได้กับส่วนขยายของบุคคลที่สามส่วนใหญ่
• เข้ากันได้อย่างสมบูรณ์กับ Magento 2.4.x

รุ่นขั้นสูงที่สองนี้แตกต่างอย่างสิ้นเชิงจากรุ่นก่อน ดังนั้น หากคุณใช้ Claue เวอร์ชัน 1 และต้องการอัปเดตเป็น Claue เวอร์ชัน 2 คุณสามารถสร้างเว็บไซต์ใหม่ได้เท่านั้น แทนที่จะอัปเดตจากเวอร์ชันเก่า เอาล่ะ กลับมาที่หัวข้อหลักกัน

ระบบชุดรูปแบบมีการเปลี่ยนแปลงเล็กน้อยใน Magento 2 แต่มีความคล้ายคลึงกัน หัวข้อนี้อธิบายวิธีสร้างไฟล์ที่ประกอบเป็นธีม วิธีเพิ่มโลโก้ให้กับธีม และวิธีปรับขนาดรูปภาพ

สร้างไดเร็กทอรีธีม

ในการสร้างไดเร็กทอรีสำหรับธีมของคุณ:

1. ไปที่ <your Magento install dir>/app/design/frontend
2. สร้างไดเร็กทอรีใหม่ที่ตั้งชื่อตามชื่อผู้ขายของคุณ: /app/design/frontend/<Vendor>
3. ภายใต้ไดเร็กทอรีผู้จำหน่าย ให้สร้างไดเร็กทอรีที่ตั้งชื่อตามธีมของคุณ

 แอพ/ออกแบบ/ส่วนหน้า/
├── <ผู้ขาย>/
│ │ ├──...<ธีม>/
│ │ ├── ...
│ │ ├── ...

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

ประกาศธีมของคุณ

หลังจากที่คุณสร้างไดเร็กทอรีสำหรับธีมของคุณแล้ว คุณต้องสร้าง theme.xml ที่มีชื่อธีมและชื่อธีมพาเรนต์เป็นอย่างน้อย (หากธีมสืบทอดมาจากที่หนึ่ง) คุณสามารถระบุตำแหน่งที่จะเก็บภาพตัวอย่างธีมไว้ได้

1. เพิ่มหรือคัดลอกจาก theme.xml ที่มีอยู่ไปยังไดเร็กทอรีธีมของคุณ app/design/frontend/<Vendor>/<theme>
2. กำหนดค่าโดยใช้ตัวอย่างต่อไปนี้:

 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

ทำให้ธีมของคุณเป็นแพ็คเกจ Composer (ไม่บังคับ)

ธีมเริ่มต้นของ gento ถูกแจกจ่ายเป็นแพ็คเกจผู้แต่ง

ในการเผยแพร่ธีมของคุณเป็นแพ็กเกจ ให้เพิ่มไฟล์ composer.json ไปที่ไดเร็กทอรีธีมและลงทะเบียนแพ็กเกจบนเซิร์ฟเวอร์การทำแพ็กเกจ เซิร์ฟเวอร์บรรจุภัณฑ์สาธารณะเริ่มต้นคือ https://packagist.org/

composer.json ให้ข้อมูลการพึ่งพาธีม

ตัวอย่าง theme composer.json :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

คุณสามารถดูรายละเอียดเกี่ยวกับการรวม Composer ได้ในระบบ Magento ในการรวม Composer

เพิ่ม register.php

ในการลง registration.php ธีมของคุณในระบบ ในไดเร็กทอรีธีมของคุณ ให้เพิ่มไฟล์ register.php ด้วยเนื้อหาต่อไปนี้:

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

โดยที่ <Vendor> คือชื่อผู้ขายของคุณ <theme> คือโค้ดของธีม

สำหรับภาพประกอบ โปรดดูไฟล์ register.php ของธีม Magento Luma

กำหนดค่าภาพ

ขนาดรูปภาพผลิตภัณฑ์และคุณสมบัติอื่นๆ ที่ใช้บนหน้าร้านมีการกำหนดค่าในไฟล์การกำหนดค่า view.xml จำเป็นสำหรับธีม แต่เป็นทางเลือก ถ้ามีอยู่ในธีมพาเรนต์

หากขนาดรูปภาพผลิตภัณฑ์ของธีมของคุณแตกต่างจากของธีมพาเรนต์ หรือหากธีมของคุณไม่ได้รับการสืบทอดจากธีมใดๆ ให้เพิ่ม view.xml โดยใช้ขั้นตอนต่อไปนี้:

1. ล็อกอินเข้าสู่เซิร์ฟเวอร์ Magento ของคุณในฐานะผู้ใช้ที่มีสิทธิ์สร้างไดเร็กทอรีและไฟล์ในไดเร็กทอรีการติดตั้ง Magento (โดยทั่วไป นี่คือเจ้าของระบบไฟล์วีโอไอพี)
2. สร้างไดเร็กทอรี etc ในโฟลเดอร์ธีมของคุณ
3. คัดลอก view.xml จากไดเร็กทอรี etc ของธีมที่มีอยู่ (เช่น จากธีม Blank) ไปยังไดเร็กทอรี etc ของธีมของคุณ
4. กำหนดค่าขนาดรูปภาพสินค้าหน้าร้านทั้งหมดใน view.xml ตัวอย่างเช่น คุณสามารถทำให้รูปภาพผลิตภัณฑ์มุมมองกริดประเภทเป็นสี่เหลี่ยมจัตุรัสโดยการระบุขนาด 250 x 250 พิกเซล การกำหนดค่าที่เกี่ยวข้องจะมีลักษณะดังนี้:

 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

สำหรับรายละเอียดเกี่ยวกับการกำหนดคอนฟิกอิมเมจใน view.xml โปรดดูหัวข้อ กำหนดคอนฟิกคุณสมบัติของอิมเมจสำหรับธีม

สร้างไดเร็กทอรีสำหรับไฟล์สแตติก

ธีมของคุณน่าจะมีไฟล์สแตติกหลายประเภท: สไตล์ ฟอนต์ JavaScript และรูปภาพ แต่ละประเภทควรเก็บไว้ในไดเร็กทอรีย่อยของ web ในโฟลเดอร์ธีมของคุณ:

 แอพ/ออกแบบ/<พื้นที่>/<ผู้ขาย>/<ธีม>/
├── เว็บ/
│ ├── css/
│ │ ├── แหล่งที่มา/ 
│ ├── แบบอักษร/
│ ├── ภาพ/
│ ├── js/

โครงสร้างไดเร็กทอรีธีมของคุณตอนนี้

ณ จุดนี้โครงสร้างไฟล์ธีมของคุณมีลักษณะดังนี้:

 แอพ/ออกแบบ/ส่วนหน้า/<ผู้ขาย>/
├── <ธีม>/
│ ├── ฯลฯ/
│ │ ├── view.xml
│ ├── เว็บ/
│ │ ├── ภาพ
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── นักแต่งเพลง.json

โลโก้ธีม

ในแอปพลิเคชัน Magento รูปแบบเริ่มต้นและชื่อของภาพโลโก้คือ logo.svg เมื่อคุณใส่อิมเมจ logo.svg ในตำแหน่งทั่วไป ซึ่งคือ <theme_dir>/web/images จะถูกจดจำโดยอัตโนมัติว่าเป็นโลโก้ของธีม จะแสดงในส่วนหัวของหน้าร้านค้าของคุณเมื่อมีการใช้ธีม

ในธีมที่กำหนดเอง คุณสามารถใช้ไฟล์โลโก้ที่มีชื่อและรูปแบบอื่นได้ แต่คุณอาจต้องประกาศ

ความจำเป็นในการประกาศขึ้นอยู่กับว่าธีมของคุณมีธีมหลักและรูปภาพโลโก้หรือไม่ กรณีต่อไปนี้เป็นไปได้:

• ธีมของคุณไม่มีธีมหลัก:
  • หากชื่อและรูปแบบภาพโลโก้ของคุณเป็นค่าเริ่มต้น logo.svg ไม่จำเป็นต้องประกาศ
  • หากชื่อหรือรูปแบบโลโก้ของคุณไม่ใช่ค่าเริ่มต้น คุณต้องประกาศในรูปแบบ
• ธีมของคุณมีธีมหลัก:
  • หากรูปภาพโลโก้ธีมของคุณมีชื่อและรูปแบบเดียวกับโลโก้ธีมของผู้ปกครอง ไม่จำเป็นต้องประกาศ
  • หากภาพโลโก้ของคุณมีชื่อหรือรูปแบบต่างกัน ให้ประกาศในรูปแบบ

ประกาศโลโก้ธีม

หากต้องการประกาศโลโก้ของธีม ให้เพิ่มเลย์เอา <theme_dir>/Magento_Theme/layout/default.xml

ตัวอย่างเช่น หากไฟล์โลโก้ของคุณคือ my_logo.png ขนาด 300x300px คุณต้องประกาศดังนี้:

 <page xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:View/Layout/etc/page_configuration.xsd" > <body> <referenceBlock name= "logo" > <arguments> <argument name= "logo_file" xsi:type= "string" > images/my_logo.png </argument> <argument name= "logo_img_width" xsi:type= "number" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

การประกาศขนาดโลโก้เป็นทางเลือก

เยี่ยมชมบล็อก Magesolution เพื่ออ่านบทช่วยสอน Magento 2 แบบเต็มและอัปเดตบทช่วยสอนล่าสุดเกี่ยวกับ Magento 2

ที่มา : magento.com