دليل لإنشاء موضوع في Magento 2

مرحبا! هل تشعر بالفضول حيال Magento 2.0 مع الكثير من التحديثات والتغييرات؟ اليوم ، نود أن نشارك معك منشور مدونة حول Guide To Create A Theme في Magento 2. يتم تحديثه دائمًا من خلال التدرب كل يوم.

آخر تحديث: لقد أصدرنا للتو الإصدار 2.0 من Claue Multipurpose Magento 2 Theme مع مجموعة من تحسينات الأداء والميزات الحصرية. تحقق من هذا الموضوع الآن: Claue Magento Theme 2. 0

عرض حي

يعد Claue - Clean، Minimal Magento 2 & 1 Theme نموذجًا ممتازًا لمتجر تجارة إلكترونية حديث ونظيف يحتوي على أكثر من 40 تخطيطًا للصفحة الرئيسية والعديد من الخيارات للتسوق ، والمدونة ، والمحفظة ، وتخطيطات محدد مواقع المتاجر ، وصفحات مفيدة أخرى. يأتي إصدار Claue 2. 0 مع مجموعة من الميزات الحصرية بما في ذلك:

• أن تكون مبنية على موضوع Luma.
• تلبية جميع معايير موضوع Magento
• تحسن كبير في الأداء
• متوافق مع معظم ملحقات الطرف الثالث.
• متوافق تمامًا مع Magento 2.4.x

هذه النسخة المتقدمة الثانية تختلف تمامًا عن سابقتها. وبالتالي ، إذا كنت تستخدم الإصدار 1 من Claue وترغب في التحديث إلى الإصدار 2 من Claue ، فيمكنك فقط إعادة إنشاء موقع ويب جديد بدلاً من التحديث من الإصدار القديم. الآن ، دعنا نعود إلى الموضوع الرئيسي.

لقد تغير نظام السمات قليلاً في Magento 2 ولكن هناك أوجه تشابه. يناقش هذا الموضوع كيفية إنشاء الملفات التي تتكون منها السمة ، وكيفية إضافة شعار إلى السمة ، وكيفية تغيير حجم الصور.

قم بإنشاء دليل موضوع

لإنشاء دليل لموضوعك:

1. انتقل إلى <your Magento install dir>/app/design/frontend .
2. قم بإنشاء دليل جديد مسمى وفقًا لاسم البائع الخاص بك: /app/design/frontend/<Vendor> .
3. ضمن دليل البائع ، قم بإنشاء دليل مسمى وفقًا لموضوعك.

 التطبيق / التصميم / الواجهة /
├── <بائع> /
│ │ ├── ... <الموضوع> /
│ │ ├── ...
│ │ ├── ...

يتطابق اسم المجلد بشكل تقليدي مع التسمية المستخدمة في رمز السمة: أي مجموعة أحرف أبجدية رقمية ، كما يراها البائع مناسبة ، مقبولة. هذا الاصطلاح هو مجرد توصية ، لذلك لا شيء يمنع تسمية هذا الدليل بطريقة أخرى.

أعلن عن موضوعك

بعد إنشاء دليل theme.xml الخاص بك ، يجب عليك إنشاء theme.xml يحتوي على الأقل على اسم النسق واسم النسق الأصلي (إذا كان السمة موروثة من واحد). اختياريًا ، يمكنك تحديد مكان تخزين صورة معاينة النسق.

1. أضف أو انسخ من theme.xml موجود إلى app/design/frontend/<Vendor>/<theme> دليل السمة 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.

لتوزيع قالبك كحزمة ، أضف ملف composer.json إلى دليل السمات وقم بتسجيل الحزمة على خادم الحزم. خادم الحزم العام الافتراضي هو https://packagist.org/.

يوفر composer.json معلومات تبعية النسق.

مثال على موضوع 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.

إضافة تسجيل. php

لتسجيل المظهر الخاص بك في النظام ، قم بإضافة ملف registration.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> هو رمز السمة.

للتوضيح ، راجع ملف registration.php لموضوع Magento Luma.

تكوين الصور

يتم تكوين أحجام صور المنتج والخصائص الأخرى المستخدمة في واجهة المتجر في ملف تكوين view.xml . إنه مطلوب للموضوع ، ولكنه اختياري إذا كان موجودًا في النسق الأصلي.

إذا كانت أحجام صور المنتج الخاصة بالنسق الخاص بك تختلف عن تلك الخاصة بالنسق الأصلي ، أو إذا كان السمة الخاصة بك لا ترث من أي view.xml ، فأضف view.xml باستخدام الخطوات التالية:

1. قم بتسجيل الدخول إلى خادم Magento الخاص بك كمستخدم لديه أذونات لإنشاء أدلة وملفات في دليل تثبيت Magento. (عادةً ما يكون هذا هو مالك نظام ملفات Magento.)
2. قم etc الدليل etc في مجلد السمة الخاص بك
3. انسخ view.xml من الدليل etc إلى etc لموضوع موجود (على سبيل المثال ، من السمة الفارغة) إلى دليل السمة etc إلى etc .
4. هيئ جميع أحجام صور المنتج لواجهة المحل في view.xml . على سبيل المثال ، يمكنك جعل صور منتج عرض شبكة الفئة مربعة عن طريق تحديد حجم 250 × 250 بكسل ، وإليك الشكل الذي سيبدو عليه التكوين المقابل:

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

للحصول على تفاصيل حول تكوين الصور في view.xml ، راجع تكوين خصائص الصور لموضوع السمة.

إنشاء أدلة للملفات الثابتة

من المحتمل أن يحتوي المظهر الخاص بك على عدة أنواع من الملفات الثابتة: الأنماط والخطوط وجافا سكريبت والصور. يجب تخزين كل نوع في دليل فرعي منفصل web في مجلد السمة الخاص بك:

 التطبيق / التصميم / <المنطقة> / <البائع> / <الموضوع> /
├── الويب /
│ ├── css /
│ │ ├── المصدر / 
│ ├── الخطوط /
│ ├── صور /
│ ├── شبيبة /

هيكل دليل الموضوع الخاص بك الآن

في هذه المرحلة ، يبدو هيكل ملف السمة الخاص بك على النحو التالي:

 التطبيق / التصميم / الواجهة الأمامية / <البائع> /
├── <موضوع> /
│ ├── الخ /
│ │ ├── view.xml
│ ├── الويب /
│ │ ├── الصور
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── الملحن. json

شعار الموضوع

في تطبيق Magento ، التنسيق الافتراضي واسم صورة الشعار هو logo.svg . عندما تضع صورة logo.svg في الموقع التقليدي ، وهو <theme_dir>/web/images directory ، يتم التعرف عليها تلقائيًا <theme_dir>/web/images . يتم عرضه في عنوان صفحة المتجر الخاص بك بمجرد تطبيق السمة.

في نسقك المخصص ، يمكنك استخدام ملف شعار باسم وتنسيق مختلفين ، ولكن قد تحتاج إلى تعريفه.

تعتمد ضرورة الإعلان على ما إذا كان السمة الخاصة بك تحتوي على سمة رئيسية وصورة شعارها. الحالات التالية ممكنة:

• لا يحتوي نسقك على سمة رئيسية:
  • إذا كان اسم وشكل صورة شعارك افتراضيًا ، logo.svg ، فلا داعي للإعلان عنه ؛
  • إذا لم يكن اسم أو تنسيق صورة الشعار افتراضيًا ، فأنت بحاجة إلى الإعلان عنه في التخطيط.
• الموضوع الخاص بك له موضوع رئيسي:
  • إذا كانت صورة شعار السمة الخاصة بك تحمل نفس الاسم والتنسيق لشعار موضوع الوالدين ، فلا داعي للإعلان عن ذلك ؛
  • إذا كان لصورة شعارك اسمًا أو تنسيقًا مختلفًا ، فقم بالإعلان عنها في التخطيط.

إعلان شعار الموضوع

للإعلان عن شعار سمة ، أضف <theme_dir>/Magento_Theme/layout/default.xml .

على سبيل المثال ، إذا كان ملف my_logo.png بحجم my_logo.png 300 × 300 بكسل ، فأنت بحاجة إلى إعلانه على النحو التالي:

 <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