كيفية تعديل سمات قوالب WordPress (دليل JSON للمبتدئين)

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

في هذه الأيام ، بدلاً من style.css و functions.php ، يوجد ملف مركزي جديد لموضوعات الكتلة: theme.json . بالإضافة إلى ذلك ، بدلاً من CSS و PHP ، يجب أن تكون على دراية بنوع جديد من الترميز لإجراء تغييرات عليه. اسمها هو JSON.

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

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

خذ نفسًا عميقًا وكن متفتحًا ، سيكون الأمر على ما يرام ، أعدك.

ما هو JSON؟

لنبدأ مع الفيل في الغرفة. ما الذي نتحدث عنه بالضبط عندما نقول JSON؟

ربما سمعت عنها من قبل ، خاصة فيما يتعلق بواجهة برمجة تطبيقات WordPress JSON REST. JSON ، اختصار لـ JavaScript Object Notation ، هو تنسيق خفيف لتبادل البيانات. هذا يعني أنها طريقة لتمثيل البيانات وتخزينها وتبادلها بين الأنظمة أو التطبيقات أو الأنظمة الأساسية المختلفة.

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

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

بناء جملة JSON الأساسي

كما ذكرنا سابقًا ، فإن JSON بسيط جدًا في الواقع. يعرض البيانات بشكل أساسي في أزواج من قيم المفاتيح ، مما يعني أنه يمنحك اسمًا لشيء ما ويعرض القيمة التي يمتلكها ، مثل "color": "#ffffff" . إذا سبق لك العمل مع CSS ، فيجب أن يبدو هذا النوع من التنسيق مألوفًا جدًا.

بصرف النظر عن ذلك ، يحتوي ترميز JSON على الميزات التالية:

• المفاتيح عبارة عن سلاسل ، وكلمات معنية ، ويمكن أن تكون القيمة سلسلة ، أو رقم ، أو منطقيًا (صحيحًا أو خطأ) ، أو فارغًا ، أو مصفوفة (بمعنى ، قائمة من القيم) ، أو كائن JSON آخر.
• يتم تحديد كائنات JSON بأقواس معقوفة ("{}") بينما تستخدم المصفوفات أقواس مربعة ("[]").
• يتم وضع قيم المفاتيح والسلسلة بين علامتي اقتباس.
• تنسيق البيانات صارم ، وأي انحراف عن الصيغة القياسية سيؤدي إلى خطأ في التحليل.

هل تشعر بالفعل بالضياع؟ لنستعرض مثالاً لتوضيح الأمور:

 { "version": 2, "settings": { "color": { "palette": [ { "color": "#ffffff", "name": "Base", "slug": "base" }, { "color": "#000000", "name": "Contrast", "slug": "contrast" }, ], }, "styles": { "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--contrast)" }, } }

ما ورد أعلاه يحدد أولاً نسخة من الملف. وهي مقسمة إلى قسم settings styles ، وكلاهما يحدد ألوانًا معينة. في جزء settings ، يتم تعيين الألوان إلى palette فئة فرعية ويتم عرضها كمصفوفة تحتوي على عدة ألوان بالإضافة إلى قيم تسمى name slug .

يحدد مقطع styles لونين ، أحدهما background والآخر text . كلاهما محدد فقط كمتغيرات. يمكنك أن ترى أن جميع التنسيقات المذكورة أعلاه تنطبق وكيف يسهل فهم المفاتيح والقيم التي تنتمي معًا.

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

ما هو ملف WordPress theme.json؟

منذ تقديم تحرير الموقع الكامل / محرر الموقع وموضوعات الحظر ، هناك تحول تقني يحدث في منصة WordPress. بدلاً من CSS و PHP ، يعتمد بشكل متزايد على JavaScript و JSON لإنجاز المهام.

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

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

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

الآن ، مع النهج الموحد الجديد ، سيكون لدى المستخدمين تجربة أكثر تطابقًا.

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

كيف يتم تنظيم theme.json

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

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

استخدام JSON لتخصيص قوالب قوالب ووردبريس

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

تحميل الخطوط المخصصة المحلية لتغيير طباعة الموضوع

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

توجد خيارات ذلك في theme.json ضمن settings > typography ثم ضمن fontFamilies .

 { "version": 2, "settings": { "typography": { "fontFamilies": { } } } }

في سمات الكتلة ، يمكنك إضافة خطوط جديدة باستخدام هذه القيم:

• fontFamily - هذا هو اسم الخط الجديد كما سيظهر في ترميز CSS. يمكن أن تشمل الخطوط الاحتياطية.
• name - اسم الخط الذي سيظهر في محرر WordPress.
• slug - معرف فريد يستخدمه WordPress لإنشاء خاصية CSS المخصصة.
• fontFace - يتوافق هذا مع قاعدة CSS @font-face . إنه الجزء الذي يدرج الخط حقًا.

من أجل العمل ، يحتاج fontFace إلى تضمين العديد من المعلومات الأخرى:

• fontFamily - اسم الخط مرة أخرى.
• fontWeight - قائمة بأوزان الخطوط المتاحة مفصولة بمسافات.
• fontStyle (اختياري) - يمكنك تعيين سمة font-style هنا ، على سبيل المثال normal أو italic .
• fontStretch (اختياري) - على سبيل المثال ، لمجموعات الخطوط التي تحتوي على إصدار مكثف.
• src - المسار إلى ملف الخط المحلي.

فيما يلي مثال لما يبدو عليه الأمر:

 { "version": 2, "settings": { "typography": { "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v20-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v20-latin-italic.woff" ] } ] } ] } } }

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

للحصول على طريقة لإضافة خطوط Google المحلية إلى قالبك دون تغيير الترميز يدويًا ، يمكنك أيضًا استخدام المكون الإضافي Create Block Theme.

تعديل أنماط التمرير والتركيز

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

لإجراء تغييرات على أنماط التمرير والتركيز ، يمكنك استخدام العناصر الزائفة :hover ، :focus ، :active ، ولخاصية المخطط outline ، :visited . توجد الإعدادات الخاصة بذلك في themes.json ضمن styles > elements > link أو ، بدلاً من ذلك ، button .

 { "version": 2, "styles": { "elements": { "button": { }, "link": { } } } }

فيما يلي كيفية تحديد نمط الروابط الخاصة بك:

 "styles": { "elements": { "link": { ":hover": { "typography": { "textDecoration": "none" } }, ":focus": { "outline": { "width": "2px", "color": "#111", "style": "solid" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } } } } }

يقوم الترميز أعلاه بما يلي:

• تنص على أنه لا ينبغي تسطير الروابط عندما يحوم شخص ما مع مرور الوقت بمؤشر الماوس.
• في حالة focus ، يضيف مخططًا بعرض 2 بكسل ، صلب ، وله رمز اللون #111111 .
• عندما يكون نشطًا ، يأخذ نص الرابط لونًا محددًا بواسطة متغير CSS ، ومرة ​​أخرى ، يتم تعيينه بحيث لا يحتوي على قيمة text-decoration .

تعديل ألوان نسق الكتلة

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

فهم إعدادات ألوان WordPress القياسية

للقيام بذلك ، تحتاج أولاً إلى معرفة لوحات الألوان المتوفرة في Gutenberg افتراضيًا. هؤلاء هم:

• لوحة الألوان الافتراضية لـ WordPress - هذا متاح دائمًا. يوفر ألوانًا تسود حتى عند تبديل السمة. لهذا السبب يتم استخدامها لأنماط الكتلة.
• لوحة ألوان السمة - يتم شحنها مع السمة وهي مخصصة للموضوع الذي تستخدمه.
• لوحة ألوان المستخدم - الألوان التي يضيفها المستخدم عبر منتقي الألوان المتاح. يمكنك تحديدها في الأنماط العامة ضمن Colors> Palette .

يظهر واحد أو أكثر من هذه دائمًا عند الوصول إلى خيارات الألوان لأي من الكتل أو الأنماط العامة.

القضاء على خيارات الألوان

دعنا أولاً نخفي لوحة الألوان والتدرجات الافتراضية. يمكنك القيام بذلك ضمن settings color مثل هذا:

 { "version": 2, "settings": { "color": { "defaultPalette": false, "defaultGradients": false } } }

مثل العديد من الخيارات الأخرى ، من الممكن أيضًا القيام بذلك للكتل الفردية. على سبيل المثال ، هنا لكتلة العنوان:

 { "version": 2, "settings": { "blocks": { "core/heading": { "color": { "defaultPalette": false } } } } }

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

 { "version": 2, "settings": { "color": { "custom": false, "customGradient": false, "defaultPalette": false, "defaultGradients": false } } }

إذا قمت بإدخال الترميز أعلاه ، فلن تتوفر جميع خيارات الألوان المعتادة ، باستثناء ألوان النسق.

إضافة لوحة ألوان مخصصة

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

 { "version": 2, "settings": { "color": { "palette": [ { "color": "#1B1031", "name": "Base", "slug": "base" }, { "color": "#FFFFFF", "name": "Contrast", "slug": "contrast" }, { "color": "#FF746D", "name": "Primary", "slug": "primary" }, { "color": "#551C5E", "name": "Secondary", "slug": "secondary" }, { "color": "#FB326B", "name": "Tertiary", "slug": "tertiary" } ] } } }

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

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

بالإضافة إلى ذلك ، من الممكن أن تفعل الشيء نفسه بالنسبة للكتل الفردية (تأكد من اختلاف الأسماء والعلامات الرخوة عن تلك الموجودة في إعدادات الموقع):

 { "version": 2, "settings": { "color": { "blocks": { "core/paragraph": { "color": { "palette": [ { "color": "#1B1031", "name": "Block base", "slug": "block-base" }, { "color": "#FFFFFF", "name": "Block contrast", "slug": "block-contrast" }, { "color": "#FF746D", "name": "Block primary", "slug": "block-primary" } ] } } } } } }

ضبط الألوان الافتراضية

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

 { "version": 2, "styles": { "blocks": { "core/quote": { "color": { "background": "#222", "text": "#fff" } } } } }

كما ترى ، يتم تعيين الألوان الافتراضية ضمن قسم styles . هنا ، نحن نستهدف الكتلة core/quote تحت blocks وتحديد الخلفية ولون النص. إليك ما يبدو عليه الأمر على الصفحة:

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

تقديم أنماط سمات إضافية

واحدة من أفضل ميزات محرر الموقع هي أنه يقدم تنوعات في الأنماط. يسمح ذلك لمستخدمي WordPress بتعديل مظهر سماتهم بالكامل (الألوان ، والخطوط ، وأنماط الكتلة) بنقرة زر واحدة.

يأتي Twenty-Three مع مجموعة كاملة منهم.

كيف يمكنك تنفيذ هذا في موضوع؟ بسيط ، من خلال تضمين ملفات theme.json الإضافية.

بعض الملاحظات:

• لكي يلتقط WordPress الملفات الإضافية ، تحتاج إلى وضعها داخل دليل يسمى styles داخل مجلد القالب الخاص بك.
• يتم تحميل الملفات الإضافية بالإضافة إلى الملف الرئيسي وتجاوز الأنماط المضمنة. هذا يعني أنه عليك فقط تضمين ترميز لما تريد تغييره بالفعل. هذا مشابه للمواضيع الفرعية.
• يمكنك تسمية الملفات الجديدة كما تريد ، طالما أنها تنتهي بـ .json . سيستخدم محرر الموقع تلقائيًا اسم الملف (بدون امتداد) كاسم العرض في النهاية الخلفية. ومع ذلك ، يمكنك أيضًا تضمين اسم مخصص عن طريق إضافة "title": "[your preferred name]" في أعلى الملف.

على سبيل المثال ، هذا هو المحتوى (المختصر) لأحد أشكال الأنماط المختلفة التي يشحنها Twenty-Three:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "title": "Canary", "settings": { "color": { "duotone": [ { ... } ], "palette": [ ... ] }, "layout": { "wideSize": "650px" }, "typography": { "fontSizes": [ ... ] } }, "styles": { "blocks": { ... }, "elements": { "button": { ... }, "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h3": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h4": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "heading": { "typography": { "fontWeight": "700" } }, "link": { "typography": { "textDecoration": "none" } } }, "typography": { "fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)", "fontSize": "var(--wp--preset--font-size--small)" } } }

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

كل هذا يكفي لضبط مظهر المظهر بشكل كبير:

في الوقت نفسه ، يقوم ملف تباين السمة بكل هذا في حوالي 250 سطرًا من الترميز ، بينما يبلغ طول theme.json الأصلية لـ Twenty-Three أكثر من 700 سطر.

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

تغيير تصميم الكتل الفردية

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

 { "version": 2, "styles": { "blocks": { "core/paragraph": { "typography": { "letterSpacing": "-0.019rem" "textTransform": "uppercase" } } } } }

إليك ما يبدو عليه الترميز أعلاه أثناء العمل:

من الممكن استهداف الكتل عبر core/blockname ، على سبيل المثال ، core/paragraph لكتلة الفقرة. يمكنك العثور على أسماء جميع الكتل الأساسية هنا.

إضافة أجزاء القالب والقوالب

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

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

 { "version": 2, "customTemplates": [ { "name": "blog-alternative", "postTypes": [ "page" ], "title": "Blog (Alternative)" }, { "name": "404", "postTypes": [ "page" ], "title": "404" } ], "templateParts": [ { "area": "header", "name": "header", "title": "Header" }, { "area": "footer", "name": "footer", "title": "Footer" }, { "area": "uncategorized", "name": "comments", "title": "Comments" } ] }

يأخذ كل إدخال ضمن templateParts ثلاثة مفاتيح:

• name - هذا هو اسم / slug للملف لجزء القالب هذا ، على سبيل المثال إذا أدخلت "small-header" ، يجب تسمية ملفك small-header.html .
• area - هذا مهم حتى يعرف محرر الموقع مكان تعيين كل جزء. تعرف templateParts ثلاث مناطق: header footer uncategorized . إذا لم تحدد أيًا من الأولين ، فسيتحول جزء القالب افتراضيًا إلى الأخير.
• title - هذا هو اسم جزء القالب المرئي في المحرر ، تأكد من أنه وصفي.

تأخذ الكائنات الموجودة ضمن customTemplates أيضًا ثلاث سمات:

• name - كما هو الحال في templateParts . يجب أن يتوافق مع اسم ملف HTML المرتبط.
• title - كما هو مذكور أعلاه ، يظهر في المحرر.
• postTypes - مصفوفة من أنواع المنشورات التي يدعمها هذا القالب المخصص مثل post أو page .

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

WordPress theme.json Generators

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

• ThemeGen بلوك موضوع مولد
• WPTurbo theme.json مولد

موارد

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

• شبكة مطوري Mozilla: العمل مع JSON
• JSON.org
• تحرير الموقع الكامل
• دليل محرر الكتلة

هل أنت جاهز لتعديل سمات قوالب WordPress باستخدام JSON؟

يعد تعديل سمات الكتلة مختلفًا تمامًا عن العمل مع السمات الكلاسيكية. بدلاً من functions.php و style.css ، يتم تنفيذ الكثير من العمل في ملفات theme.json و HTML.

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

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

هل قمت بتعديل قالب WordPress الخاص بك عبر ترميز JSON من قبل؟ لا تتردد في مشاركة تجربتك في التعليقات!