كيفية بناء قالب قالب: 4 أفضل الطرق في عام 2023

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

إذا قارنت موضوعًا كلاسيكيًا ، على سبيل المثال ، Twenty Seventeen بموضوع كتلة ، على سبيل المثال ، Twenty Three ، فسترى عددًا من الاختلافات.

الفرق الرئيسي هو أنه في السمات الكلاسيكية ، يتم تقديم صفحات الويب بفضل قوالب PHP. في سمة الكتلة، يتم عرضها عبر الكتل وقوالب HTML (في مجلدات الأجزاء والقوالب) وأنماط كتلة PHP (في مجلد الأنماط).

قد تلاحظ أيضًا أن سمة الكتلة لا تحتوي على ملف functions.php ؛ هذا اختياري في قوالب الكتلة. يوجد ملف style.css ، لكنه فارغ بصرف النظر عن الرأس. بدلاً من ذلك ، يتم التعامل مع ألوان وطباعة السمة في ملف theme.json .

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

جدول المحتويات :

• لماذا بناء قالب كتلة؟
• كيفية إنشاء قالب قالب باستخدام كتيب الموضوع
• كيفية إنشاء قالب كتلة باستخدام FullSiteEditing.com
• استخدام سمة Blockbase كنقطة انطلاق
• كيفية إنشاء قالب كتلة باستخدام المكون الإضافي Create Block Theme

لماذا بناء قالب كتلة؟

👉 هناك العديد من الفوائد لبناء قالب كتلة ، وهي:

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

كيفية إنشاء سمة كتلة باستخدام دليل السمات

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

لبدء إنشاء قالب الكتلة الخاص بك، تحتاج إلى ملف style.css وملف templates/index.html . يعد الملف theme.json اختياريًا ولكن يُنصح به بشدة.

يتم عرض مثال على هيكل الموضوع أدناه.

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

يمنحك محرر الموقع السيطرة الكاملة على تصميم موقعك. لاستخدامها، يجب أن يكون لديك قالب حظر نشط على موقعك. يأتي WordPress مع القليل منها، أو يمكنك العثور على المزيد بالانتقال إلى Appearance > Themes > Add New والتصفية حسب Block Themes . قم بالتمرير فوق السمة التي تريدها وانقر فوق الزر "تثبيت " لتثبيته، والزر " تنشيط " لجعله السمة النشطة.

ثم انتقل إلى المظهر > المحرر لتنشيط محرر الموقع.

يمكنك استخدام واجهة محرر الكتل لتغيير قوالب السمات. فيما يلي مثال لتغيير قالب 404 في Twenty Twenty Three:

وإليك مثال على تحرير جزء قالب Post Meta في Twenty Twenty Three:

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

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

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

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

سيكون للموضوع الخاص بك نفس اسم الموضوع النشط. لذا، قبل تثبيت السمة الخاصة بك على موقع ما، يجب عليك إعادة تسمية الملف المضغوط إلى اسم السمة الجديدة. ستحتاج أيضًا إلى إعادة تسمية اسم السمة والمجال النصي في ملف style.css، بالإضافة إلى اسم المؤلف والروابط في style.css و readme.txt .

👉 يمكنك استخدام أداة البحث والاستبدال لتغيير ما يلي:

• مجال النص في سلاسل الترجمة
• بادئات وظائف PHP
• الرخويات المستخدمة في كتلة الأنماط

كيفية إنشاء قالب كتلة باستخدام FullSiteEditing.com

تمتلك Carolina Nymark مصدرًا رائعًا حول بناء قوالب الكتل على موقع FullSiteEditing.com، مما يجعلها أداة رائعة أخرى لكيفية إنشاء قالب كتلي.

إنها ترشدك خلال عملية إنشاء قالب قالب من البداية، بدءًا من إنشاء ملفات style.css و templates/index.html و theme.json و functions.php . تحتاج إلى تثبيت البرنامج المساعد Gutenberg لمتابعة البرامج التعليمية.

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

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

يتبع Theme.json هذا التنسيق:

 { "version": 2, "settings": { "color": {}, "typography": {} }, “styles”: {} }

هذه هي الطريقة التي يبدو بها المظهر بعد تحديد الألوان والطباعة في theme.json :

فيما يلي تعريفات الألوان في الإعدادات:

 "color": { "palette": [ { "slug": "primary", "color": "#111", "name": "Primary" }, { "slug": "secondary", "color": "#fefefe", "name": "Secondary" }, { "slug": "tertiary", "color": "#383838", "name": "Tertiary" }, { "slug": "quaternary", "color": "#00838f", "name": "Quaternary" }, { "slug": "quinary", "color": "#4fb3bf", "name": "Quinary" } ],

وأمثلة على استخدامها في قسم الأنماط:

 "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--secondary)" }, "elements": { "link" :{ "color": { "text": "var(--wp--preset--color--quinary)" } } },

فيما يلي مرجع في قسم الأنماط لأجزاء قالب الرأس والتذييل:

 "templateParts": [ { "name": "header", "area": "header", "title": "Header" }, { "name": "footer", "area": "footer", "title": "Footer" } ]

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

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

يمكنك تعيين الأنماط بشكل عام أو لكل كتلة. من أجل استهداف الكتلة الصحيحة، راجع مرجع الكتلة الأساسية.

استخدام سمة Blockbase كنقطة انطلاق

سمة Blockbase هي سمة بداية بسيطة يمكنك تخصيصها. يتطلب إصدار PHP 5.7 أو أحدث، وWordPress 6.1 أو أحدث.

يحتوي Blockbase على القوالب التالية:

• 404
• أرشيف
• فارغ
• تذييل فقط
• رأس وتذييل فقط
• فِهرِس
• صفحة
• يبحث
• أعزب

وأجزاء القالب التالية:

• تذييل
• رأس
• محورها الرأس
• رأس افتراضي
• رأس خطي
• رأس الحد الأدنى
• على مستوى الرأس
• بعد الفوقية
• بعد الرموز الوصفية

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

هذا يعدل عرض المحتوى إلى 800 بكسل:

وإليك اختلاف أسلوب Ruby Wine:

وهنا تمت إضافة حظر حقوق النشر إلى جزء قالب التذييل:

عندما تنتهي من تخصيصاتك ، تذكر تصدير السمة الخاصة بك وتغيير الاسم ومجال النص.

في النسق الذي تم تصديره ، يتم تحديث كود التذييل مع كتلة حقوق النشر المضافة:

كيفية إنشاء قالب كتلة باستخدام المكون الإضافي Create Block Theme

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

يتطلب WordPress 6.0 أو أحدث ، و PHP 7.0 أو أحدث. يجب أن يكون لديك سمة كتلة كموضوع نشط لاستخدام المكون الإضافي.

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

تصدير ثلاثة وعشرون

[تصدير الموضوع المنشط مع تغييرات المستخدم]

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

خلق الطفل من ثلاثة وعشرين وعشرين

[إنشاء موضوع فرعي جديد. سيكون الموضوع المنشط حاليًا هو الموضوع الأصلي.]

يمنحك المكون الإضافي نموذجًا لملئه لإنشاء السمة.

استنساخ ثلاثة وعشرون وعشرون

[إنشاء موضوع جديد استنساخ الموضوع المنشط. سيحتوي النسق الناتج على جميع أصول السمة النشطة بالإضافة إلى تغييرات المستخدم.]

تحصل على نفس النموذج لإكماله كما هو الحال بالنسبة للموضوع الفرعي.

الكتابة فوق ثلاثة وعشرين وعشرين

[احفظ تغييرات المستخدم مع تغيرات THEME واحذف تغييرات المستخدم. سيتم حفظ تغييراتك في السمة الموجودة بالمجلد.]

لاحظ أنه إذا اخترت هذا الخيار، فسيتم استبدال تغييرات السمة الخاصة بك عند تحديث السمة.

إنشاء موضوع فارغ

[قم بإنشاء سمة نموذجية "فارغة" داخل دليل سمات هذا الموقع.]

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

قم بإنشاء نمط مختلف

[احفظ تغييرات المستخدم كتنوع في نمط Twenty Twenty-Three.]

يمكنك إنشاء شكل مختلف عن طريق ملء حقل "التنوع" ، ثم الضغط على زر " إنشاء" .

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

حدد تنوع النمط الذي قمت بإنشائه، ثم انتقل إلى قسم الألوان لتحرير الألوان وتطبيقها على السمة.

إدارة خطوط جوجل

يمكنك إضافة الخطوط أو إزالتها في المكون الإضافي Create Block Theme بالانتقال إلى Appearance > Manage Theme Fonts .

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

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

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

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

عند الانتهاء، تذكر حفظ تغييرات المظهر.

هذه هي الطريقة لبناء موضوع كتلة! 🚀

أحسنت؛ لقد تعلمت الآن كيفية إنشاء سمة كتلة. تُعد سمات الكتل مستقبل WordPress، وتفتح الفرصة لغير المبرمجين لإنشاء موقع الويب الخاص بهم وتخصيصه باستخدام الكتل.

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

هل لا يزال لديك أي أسئلة حول كيفية إنشاء سمة الكتلة؟ اسمحوا لنا أن نعرف في التعليقات!