كيفية إنشاء قالب فرعي في WordPress

نشرت: 2023-07-14

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

بينما يمكنك تحرير ملفات السمة مباشرة ، ستفقد جميع تعديلاتك عند تشغيل التحديثات على السمة. يمكنك إضافة القليل من CSS المخصص باستخدام مكون إضافي لمقتطف الشفرة ، لكن ذلك لن يغير خيارات النمط المتاحة للمستخدمين الذين قاموا بتسجيل الدخول.

ذلك ما يمكن أن تفعله؟ كيف يمكنك تغيير النمط العام الخيارات المتاحة؟ لذلك ، أنت بحاجة إلى قالب طفل.

ما هو موضوع ووردبريس الطفل؟

وفقًا لوثائق مطور WordPress:

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

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

كيفية إنشاء موضوع فرعي

هل تفضل خيار رمز لتخصيص التصميم على موقعك؟ مثل تجاوز سمات WordPress الأخرى ، فإن استخدام قالب فرعي هو أفضل طريقة لتجاوز الكود. عندما يتم تحديث المظهر الخاص بك ، سيظل رمز المظهر الفرعي الخاص بك.

في هذه المقالة ، نغطي المكونات الرئيسية لما يجعل موضوع WordPress الطفل جيدًا ونوفر موارد قراءة متعمقة.

1. متى يتم استخدام قالب تابع للكتلة

المواضيع الفرعية هي حل رائع في كثير من الأحيان. ومع ذلك ، إذا كنت تتطلع إلى إضافة القليل من كود CSS ، فقد يكون الموضوع الفرعي بأكمله مبالغة. ضع في اعتبارك مكونًا إضافيًا مثل Code Snippets لإضافة القليل من التخصيص.

تخصيص مواقع العملاء

عندما تقوم ببناء مواقع للعملاء ، هناك بعض التخصيصات الإضافية التي قد ترغب في تقديمها.

إذا كنت ترغب في التحكم في قدرة المستخدمين على إدراج كتل جديدة أو نقل الكتل الموجودة أو حذف الكتل ، فقد ترغب في تنفيذ قفل الحظر. يمكنك معرفة كيفية قفل الكتل والمزيد في هذا البرنامج التعليمي التمهيدي.

خلق اختلافات الموضوع

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

2. اختر سمة WordPress جيدة

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

3. إنشاء بيئة اختبار

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

إذا كنت تستخدم موفر استضافة WordPress مُدار مثل GoDaddy's Managed WordPress Hosting ، فيمكنك استخدام موقع التدريج بنقرة واحدة كبيئة تطوير. إذا كنت تستخدم شيئًا مثل cPanel أو VPS للاستضافة ، فيمكنك إعداد تثبيت WordPress منفصل واستنساخ أو نسخ موقعك الحالي إلى التثبيت الجديد.

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

4. إنشاء دليل الموضوع الخاص بك

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

أنت تبحث عن المجلد التالي:

 / wp-content / theme /

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

 / wp-content / theme / your-child-theme /

5. إنشاء ملفات السمات الخاصة بك

على سبيل المثال ، سنفترض أننا نستخدم نسق Twenty Twenty Two. ستحتاج إلى تثبيت هذا المظهر للموضوع الفرعي للرجوع إليه مرة أخرى.

داخل مجلد دليل السمات الفرعية الجديد ، ستقوم بإنشاء ملفين جديدين:

 style.css
theme.json

يخدم كلا الملفين غرضًا محددًا. يتم استخدام ملف style.css لتزويد WordPress بمعلومات حول السمة ، مثل الاسم والمؤلف والعلامات ومعرف القالب الأصلي.

يتم استخدام ملف theme.json لتحديد العديد من الإعدادات في الأنماط العامة والمزيد. تعرف على المزيد حول theme.json من كتيب المطور.

في السمات الكلاسيكية السابقة ، كان ملف function.php ضروريًا في السمات الفرعية. لا تتطلب قوالب الأطفال هذه الخطوة.

Style.css

ما الذي ينتمي إليه ملف style.css الخاص بك؟ تقول وثائق المطور:

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

ستحتاج إلى تضمين boilerplate في ملف style.css يحتوي على معلومات الرأس الخاصة بك. اسم القالب: يتوافق مع اسم المجلد (الدليل) للموضوع الأصلي الذي تقوم ببنائه فوقه. المجال النصي : الاسم فريد لموضوع WordPress الفرعي الخاص بك.

فيما يلي مثال لموضوع فرعي باستخدام Twenty Twenty Two:

 / *
اسم الموضوع: عشرون وعشرون طفل
عنوان URI للموضوع: https://example.com/
المؤلف: اسمك
معرّف URI للمؤلف: https://example.com/
الوصف: موضوع اثنان وعشرون طفل
يتطلب على الأقل: 5.8
تم الاختبار حتى: 5.9
يتطلب PHP: 5.6
الإصدار: 0.1.0
الترخيص: رخصة جنو العمومية الإصدار 2 أو أحدث
URI للترخيص: http://www.gnu.org/licenses/gpl-2.0.html
مجال النص: twentytwentytwo-child
قالب: twentytwentytwo
العلامات: ألوان مخصصة ، قائمة مخصصة ، شعار مخصص ، نمط محرر ، صور مميزة ، تحرير موقع كامل ، أنماط كتلة

Twenty-Two Child WordPress Theme، (C) 2021 WordPress.org
يتم توزيع Twenty-Two Two Child بموجب شروط GNU GPL.
* /

Theme.json

اطلع على وثائق المطور للحصول على نظرة أعمق في theme.json. دعنا نلقي نظرة على ملف Twenty Twenty Two theme.json:

 {
 "الإصدار 2،
 "إعدادات": {}،
 "الأنماط": {}،
 "قوالب مخصصة": {} ،
 "templateParts": {}
}

داخل كل من هذه الأنماط المتاحة لك. على سبيل المثال ، في مجال النمط ، يستخدم Twenty Twenty:

 {
 "إعدادات": {
 "المظهر أدوات": صحيح ،
 "لون": {
 "الثنائي": [
 {
 "الألوان": [
 "# 000000"،
 "#ffffff"
 ] ،
 "slug": "المقدمة والخلفية"،
 "الاسم": "المقدمة والخلفية"
}

هل تحتاج إلى مساعدة في إنشاء ملف theme.json؟ تحقق من themegen.app للحصول على دليل لإنشاء العديد من الخيارات لملف theme.json الخاص بك.

6. تخصيص قالب الطفل الخاص بك

بينما يمكنك إنشاء ملف theme.json الخاص بك بسهولة وإلحاقه بالموضوع الخاص بك ، هناك بعض الخيارات الأخرى المتبقية. تعد السمات الفرعية وحتى السمات الكتلية مجالًا جديدًا لـ WordPress. من الواضح أن محرر الموقع يحتوي على ملصق تجريبي عليه في وقت هذا المنشور. ستحتاج إلى الرجوع إلى الوراء لمعرفة ما الذي يعمل وما لا يعمل حتى الآن في النسق الفرعية ، مثل أجزاء القالب.

بالإضافة إلى ذلك ، قد تجد إعدادات لا تدعمها الأنماط العالمية و theme.json حتى الآن. إذا كنت تضيف CSS إضافية ، مثل حد كتلة المجموعة مع ظل مربع ، فقد ترغب في إضافته إلى ملف style.css الخاص بك.

 .has-Primary-border-color {
 مربع الظل: .1rem .1rem .05rem # 647BAF ؛
}

7. اختبر موضوع طفلك

بمجرد أن تشعر أن موقعك يبدو جيدًا في بيئة التطوير الحالية لديك ، فقد حان الوقت لاختباره قبل التحميل إلى موقع مباشر.

اختبر بأحجام مختلفة للمتصفح ، مثل إطارات عرض الجوال
اختبر في متصفحات مختلفة أو استخدم أداة مثل BrowserStack
راجع معايير الوصول. ابدأ مع WebAim

8. الاستعداد لتحميل قالب الطفل الخاص بك

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

خلاصة لإنشاء قالب الطفل الخاص بك

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

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