دليل شامل لملف WordPress theme.json

نشرت: 2023-03-14

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

لحسن الحظ ، عندما أطلق WordPress الإصدار 5.8 ، قدم ملف theme.json جديدًا. هذه مساحة مخصصة لتصميم محرر الكتل (والكتل الفردية) على الواجهة الأمامية والخلفية. نتيجة لذلك ، من الأسهل بكثير إدارة الأنماط لموقع الويب الخاص بك.

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

ما هو theme.json في WordPress؟

ملف theme.json عبارة عن آلية تمكنك من تكوين Block Editor بقدر أكبر من التحكم. من المفيد إجراء تغييرات أسلوبية على مستوى الموقع ، حيث يمكنك تعيين أنماط افتراضية لجميع (أو بعض) كتلك.

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

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

مثال على محرر الموقع أثناء العمل

باختصار ، يمكّنك محرر الموقع من إجراء العديد من التغييرات الأسلوبية العالمية بينما يعد theme.json الآلية التي تتيح لك تكوين خيارات مخصصة للكتل الخاصة بك.

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

أين يوجد ملف theme.json؟

يمكنك العثور على ملف theme.json الخاص بك داخل جذر دليل السمات الخاص بك. إذا كنت تستخدم محرر الموقع ، وقمت بتنشيط سمة قائمة على الكتلة مثل Twenty-Three ، فستتمكن بالتأكيد من الوصول إلى ملف theme.json .

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

ما يجب القيام به قبل تحرير ملف theme.json الخاص بك

الآن بعد أن عرفت المزيد عن ملف theme.json ، دعنا نلقي نظرة على بعض العوامل المهمة التي يجب مراعاتها قبل إجراء التعديلات.

1. قم بعمل نسخة احتياطية من موقعك

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

يعد استخدام المكون الإضافي Jetpack VaultPress Backup أحد أسهل الطرق لعمل نسخة احتياطية من موقعك.

Jetpack VaultPress الصفحة الرئيسية للنسخ الاحتياطي

تنشئ أداة Jetpack هذه نُسخًا احتياطية في الوقت الفعلي تستند إلى السحابة وتخزنها على شبكة خادم WordPress.com الآمنة. بالإضافة إلى ذلك ، فإن عملية الاستعادة سريعة وبسيطة.

يمكنك الاستفادة من عمليات الاستعادة بنقرة واحدة من تطبيق الجوال ، حتى إذا كان موقعك معطلاً تمامًا.

2. النظر في استخدام موقع التدريج

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

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

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

كيفية تعديل ملف theme.json الخاص بك

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

للبدء ، ستحتاج إلى الوصول إلى الدليل الجذر لموقعك على الويب. يمكنك القيام بذلك باستخدام عميل SFTP مثل FileZilla أو زيارة مدير الملفات الخاص بك. ثم توجه ببساطة إلى الدليل public_html . ضمن ذلك ، حدد موقع مجلد wp-content .

ملفات ومجلدات WordPress

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

1. إنشاء لوحة ألوان افتراضية

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

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

للبدء ، حدد موقع theme.json باتباع الخطوات التي حددناها سابقًا. هناك ثلاثة عوامل يجب مراعاتها لتمكين هذا الإعداد:

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

بعد الاتصال بملفات السمات الخاصة بك باستخدام SFTP أو مدير الملفات ، ستحتاج إلى نسخ الكود التالي وحفظه في الدليل الجذر لموضوعك:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

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

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

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

2. تكوين أحجام الخطوط المخصصة

قد يكون من المفيد أيضًا تكوين أحجام خطوط معينة لمكتلة الفقرة. بالطبع ، توفر الكتلة مجموعة من أحجام الخطوط الافتراضية ، ولكن يمكنك استخدام theme.json لتجاوزها بتفضيلاتك.

مرة أخرى ، ستحتاج إلى العثور على الدليل الجذر لموضوعك من خلال زيارة مجلد السمات في wp-content . ثم حدد موقع theme.json. تتم إضافة أحجام الخطوط إلى theme.json ضمن الإعدادات ← الطباعة ← أحجام الخطوط.

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

في WordPress ، حجم الخط "الصغير" الافتراضي له قيمة 13 بكسل ، لذا يمكنك بناء قيمك حول هذا. بشكل عام ، سيبدو ملف theme.json الخاص بك كما يلي بمجرد إضافة هذا الرمز إلى الملف:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

ما عليك سوى حفظ التغييرات لتحديث إعدادات كتلة WordPress الخاصة بك.

3. إنشاء قوالب مخصصة وأجزاء من القالب

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

للبدء ، افتح theme.json. ستحتاج إلى التفكير في اسم وعنوان ونوع المنشور ، على الرغم من أن الإعداد الأخير اختياري. ثم، أضف الكود التالي إلى الملف:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

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

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

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

لإنشاء جزء قالب لموضوعك ، أضف التعليمات البرمجية التالية إلى theme.json :

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

بعد ذلك ، تأكد من حفظ التغييرات قبل الخروج من theme.json.

الأسئلة المتداولة حول theme.json في WordPress

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

متى تم تقديم theme.json لأول مرة في WordPress؟

تم تقديم ملف theme.json لأول مرة مع إصدار WordPress 5.8. هذا هو الوقت الذي تم فيه إطلاق تحرير الموقع الكامل (FSE) ، إلى جانب القدرة على استخدام السمات القائمة على الكتلة.

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

ماذا يمكنك أن تفعل بملف theme.json؟

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

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

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

ما هي شروط استخدام ملف theme.json؟

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

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

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

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

استخدم ملف WordPress theme.json لتصميم الويب المبسط

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

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

قبل تحرير ملف theme.json ، من المهم عمل نسخة احتياطية من موقعك. Jetpack VaultPress Backup هو مكون إضافي سهل الاستخدام يمكّنك من استعادة موقعك حتى عندما تكون غير متصل بالإنترنت. بالإضافة إلى ذلك ، يقوم بعمل نسخة احتياطية من جميع ملفاتك وبيانات WooCommerce وقاعدة البيانات الخاصة بك!