كيفية إنشاء موضوع WooCommerce Storefront الطفل

آخر تحديث - 5 مارس 2021

السمة الفرعية هي تعديل لموضوع موجود مع الاحتفاظ بأسلوبه الأساسي ووظائفه. يُطلق على النسق الأصلي اسم النسق الأصلي ويطلق على النسق الجديد المعدل اسم النسق الفرعي. يعد إنشاء سمة WooCommerce Storefront الفرعية الخاصة بك طريقة جيدة للذهاب عندما تريد تخصيص متجرك دون شراء سمة جديدة.

احصل على WooCommerce Storefront!

موضوع الطفل - نظرة عامة

كما هو مذكور في المقدمة ، سيستخدم القالب الفرعي الموضوع الرئيسي كأساس له ، وسوف يمنح ميزات إضافية للموضوع. غالبًا ما يكون هذا خيارًا جيدًا عندما تريد عمل أشكال مختلفة لموضوع واحد. في دليل المظاهر التابعة لـ Storefront ، يمكنك العثور على مجموعة جيدة من السمات الفرعية المتميزة المناسبة لمختلف الصناعات وأنواع المنتجات. بهذه الطريقة يمكنك بسهولة إنشاء سمة الطفل الخاصة بك لواجهة المتجر.

مزايا استخدام موضوع الطفل

يؤدي التعديل المباشر للسمة إلى خطر فقدان التعديلات أثناء التحديث. يضمن النسق الفرعي الحفاظ على التعديلات سليمة. بشكل عام ، يعد تطوير سمة فرعية عملية أسرع من إنشاء سمة جديدة. بالإضافة إلى ذلك ، بالنسبة لأولئك المهتمين بتطوير سمة WordPress ، فإن إنشاء سمة فرعية هي طريقة رائعة للتجربة والتعلم.

فيما يلي بعض مزايا إنشاء قالب فرعي:

• يساعد على إنشاء أشكال مختلفة لنفس الموضوع ليناسب المجالات المختلفة.
• يمكن حفظ تخصيصات التصميم بشكل منفصل دون تعديل السمة الأصلية.
• يمكن الاحتفاظ بالتخصيصات حتى بعد تحديث السمة الأصلية أو الملفات الأساسية لـ WordPress أو WooCommerce.

إنشاء موضوع WooCommerce Storefront التابع

من المستحسن أن يكون لديك نسخة احتياطية مناسبة من موقعك قبل محاولة تخصيص سمة. تحتاج إلى وصول FTP إلى مضيفك لتحميل السمة الفرعية الجديدة.

لبدء العملية ، قم بإنشاء ملف style.css للقالب الفرعي باستخدام رمز المثال التالي الوارد في مستندات WooCommerce.

بعد ذلك ، قم بتغيير حقل القالب للإشارة إلى Storefront.

أحد الاختلافات التي ربما تكون قد لاحظتها هنا هو أنه مع Storefront لا تحتاج إلى خطوة قائمة الانتظار التي تم اتباعها أثناء إنشاء قالب فرعي للموضوع الخامس والعشرين. عند إنشاء قالب فرعي باستخدام Storefront ، فأنت تحتاج فقط إلى ملف function.php فارغ وملف style.css لبدء العملية.

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

يمكنك أيضًا تحميل القالب الفرعي من خلال FTP ، إذا كان لديك وصول إلى خدمة الاستضافة الخاصة بك. يمكنك استخدام برنامج FTP مثل FileZilla.

أهم عملاء FTP لنظامي التشغيل Mac و Windows.

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

كيف يمكن تخصيص تصميم ووظيفة موضوع فرعي؟

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

تغييرات في التصميم

على سبيل المثال ، في ورقة الأنماط أعلاه التي قمت بإنشائها للموضوع الفرعي ، يمكنك تخصيص لون عنوان الموقع باستخدام الكود أدناه:
.site-branding h1 a {
color: red;
}

تعديلات القالب

يمكنك أيضًا تعديل ملفات القوالب (* .php) في مجلد النسق. على سبيل المثال ، يمكنك تعديل رمز معين عن طريق نسخ header.php من مجلد النسق الرئيسي wp-content / theme / storefront / header.php إلى مجلد النسق الفرعي wp-content / theme / storefront-child / header.php.

بمجرد الانتهاء من النسخ ، يمكنك تحرير header.php وتخصيص أي كود حسب الاحتياجات. سيتم استخدام header.php في النسق الفرعي بدلاً من header.php للنسق الأصل.

يمكنك أيضًا إجراء تعديلات على قوالب WooCommerce بهذه الطريقة. ما عليك سوى إنشاء مجلد جديد في قالب الطفل الخاص بك وتسميته "WooCommerce". يمكنك هنا إجراء تغييرات على قوالب WooCommerce لمواءمتها مع تصميم موقعك.

ستساعدك وثائق WooCommerce هذه على فهم المزيد حول هيكل قالب WooCommerce.

تخصيص الوظائف

عند إنشاء قالب فرعي ، قد ترغب في الحصول على وظائف مخصصة أيضًا. لهذا ، تحتاج أولاً إلى التأكد من أن ملف jobs.php فارغ ولا يحتوي على أي معلومات من ملف jobs.php الخاص بالوالدين. الآن ، إذا كانت وظيفة معينة في وظيفة القالب الأصلي قابلة للتوصيل (ملفوفة في عبارة if شرطية) ، فستتمكن من نسخ ذلك إلى وظائف السمات الفرعية function.php. بمجرد نسخ وظيفة قابلة للتوصيل ، يمكنك إجراء التغييرات كما هو مطلوب. يوجد أدناه مثال لوظيفة قابلة للتوصيل:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

إنشاء موضوع عام تابع

تختلف عملية إنشاء سمة فرعية وأبسط مع Storefront مقارنةً بالسمات الأخرى. في هذه المقالة ، سنلقي نظرة على التفاصيل الأساسية للطريقة العامة أيضًا.

الخطوة الأولى هي إنشاء دليل سمة. بعد ذلك ، قم بإنشاء ورقة أنماط (ملف style.css) للموضوع الفرعي. توصي WooCommerce بإنشاء ملف function.php ، وهو أمر مفيد لإدراج الأنماط في قائمة الانتظار بشكل صحيح.

إنشاء موضوع عام تابع

تختلف عملية إنشاء موضوع فرعي وأبسط في واجهة المتجر مقارنة بالموضوعات الأخرى. في هذه المقالة ، سنلقي نظرة على التفاصيل الأساسية للطريقة العامة أيضًا.

الخطوة الأولى هي إنشاء دليل سمة. بعد ذلك ، قم بإنشاء ورقة أنماط (ملف style.css) للموضوع الفرعي. توصي WooCommerce بإنشاء ملف function.php ، وهو أمر مفيد لإدراج الأنماط في قائمة الانتظار بشكل صحيح.

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

قم بإنشاء دليل القالب الفرعي ووضعه في wp-content / theme. يُقترح إلحاق اسم دليل القالب الفرعي بـ "-child" ، على الرغم من أنه ليس إلزاميًا. يجب الحرص على عدم ترك مسافات في اسم دليل القالب الفرعي لتجنب أي مشاكل.

إنشاء ورقة الأنماط الخاصة بالقالب الفرعي

قم بإنشاء رأس صفحة أنماط لبدء العملية. يوجد أدناه مثال لـ WordPress Codex لرأس ورقة الأنماط تم إنشاؤه لموضوع فرعي استنادًا إلى موضوع Twenty Fifteen.

أثناء إنشاء سمة فرعية ، يمكنك استخدام هذا النص كنقطة مرجعية ويمكنك استبداله بتفاصيل ذات صلة بالموضوع الخاص بك. يعطي سطر القالب اسم الدليل للموضوع الأصلي. يجب عليك تعديله وفقًا للموضوع الذي تعمل به.

إدراج موضوعات الوالدين والطفل

قم بإنشاء ملف function.php في دليل السمات الفرعية لإدراج السمات الرئيسية والفرعية في قائمة الانتظار. قم بإدراج ورقة أنماط النسق الرئيسي في قائمة الانتظار عن طريق إضافة إجراء wp_enqueue_scripts ، وباستخدام wp_enqueue_style () في وظيفة السمة الفرعية. افتح function.php قالب طفلك بعلامة PHP (<؟ php). بعد ذلك ، قم بإدراج أوراق أنماط النسق الرئيسي والفرعي في قائمة الانتظار. لقطة الشاشة أدناه هي مثال لن يعمل إلا إذا كان المظهر الرئيسي الخاص بك يستخدم ملف .css واحدًا لعقد CSS. إذا كان هناك أكثر من ملف .css ، مثل style.css و main.css و ie.css ، فتأكد من الحفاظ على جميع تبعيات النسق الرئيسي. من الواضح أن المستوى الجيد من معرفة الترميز هو عامل مهم في الحصول على هذا بشكل صحيح في المرة الأولى.

يجب عليك أيضًا إدراج رمز CSS الفعلي في قائمة style.css للقالب الخاص بك. للتأكد من أن ورقة أنماط النسق الفرعي يتم تحميلها بعد ورقة الأنماط الأصلية ، يمكنك تعيين النمط الأصلي كعنصر تبعية. بالإضافة إلى ذلك ، قم بتضمين رقم إصدار السمة الفرعية للتأكد من أنه يمكنك إخفاء ذاكرة التخزين المؤقت أيضًا لموضوع الطفل الخاص بك. المثال الموصى به في الدستور الغذائي كما هو وارد أدناه:

تفعيل موضوع طفلك

قم بإنشاء ملف مضغوط لمجلد القالب الفرعي الخاص بك وقم بتحميله من خلال التنقل من خلال المظهر → Themes → Add New Theme .

الآن سيكون موضوع الطفل الجديد مرئيًا في قائمة السمات.

يمكنك تنشيط السمة الفرعية الجديدة الآن بالنقر فوق الزر تنشيط .

• قم بتنزيل موضوع واجهة المتجر الآن.
• اقرأ المزيد عن ثيمات الأطفال من WordPress Codex.

يمكنك أيضًا تنزيل نموذج ثانوي من رابط WooCommerce لمعرفة أفضل. أو اقرأ بعض مقالاتنا ذات الصلة:

1. كيف تختار السمة المناسبة لمتجر WooCommerce الخاص بك؟
2. كيفية تثبيت وتكوين Storefront؟
3. أحدث الاتجاهات في ثيمات WooCommerce.