Twenty-One هو السمة الافتراضية الجديدة لـ وورد بريس والتي تأتي مع وورد بريس 5.6. إذا كنت تنتظر سمة وورد بريس كاملة الميزات ، فقد تشعر بخيبة أمل قليلاً.
Twenty-One عبارة عن سمة مبسطة تبدو وتعمل كقماش فارغ قابل للتخصيص بدرجة عالية. مثل سابقاتها ، سيعتمد السمة الافتراضية الجديدة في الغالب على Block Editor لبناء الصفحة.
في هذا المنشور ، سنتعرف على أكثر الميزات إثارة للاهتمام في موضوع Twenty-One وسنعرض لك كيفية تخصيص شكل ومظهر موقع وورد بريس باستخدام سمة بسيطة Twenty-One child.
مثل Twenty Twenty ، لم يتم إنشاء السمة الافتراضية الجديدة التي تأتي مع وورد بريس 5.6 من البداية ، ولكنها تستند إلى سمة قادمة من المجتمع.
تم تطوير Twenty-One بناءً على سمة Automattic جديدة ، وهي سمة Seedlet ، والتي توفر بنية نظيفة ومنظمة جيدًا لخصائص CSS المخصصة المتداخلة. نظرًا للاستخدام الكبير لخصائص CSS في ورقة أنماط السمة ، فإن إنشاء سمات فرعية في Twenty-One يعد أمرًا سريعًا وسهلاً.
موضوع Seedlet وورد
موضوع Seedlet وورد
Twenty-One عبارة عن سمة وورد بريس بسيطة يمكن الوصول إليها بشكل كبير مع تخطيط عمود واحد وشريط جانبي للتذييل وموقعين للقائمة : التنقل الأساسي والتنقل في التذييل.
يستخدم النسق الجديد مجموعة خطوط النظام . يجب أن يكون لهذا العديد من الفوائد لكل من المستخدمين والمطورين :
أولاً وقبل كل شيء ، يجلب استخدام مكدس خطوط النظام فوائد لـ UX والأداء لأن الخطوط الأصلية مدعومة بالفعل من قبل غالبية أنظمة التشغيل ولا تتطلب وقت تحميل إضافي.
ثانيًا ، تبدو محايدة ، بحيث يمكن دمجها بسلاسة في أي نوع من التصميم.
ثالثًا ، نظرًا لأنها لا تتطلب تحميل ملفات خطوط إضافية ، يسهل على المستخدمين والمطورين تخصيص تخطيط موقع الويب باستخدام Twenty-One.
يستخدم نسق Twenty Twenty-One لوحة ألوان مبنية على أساس ألوان الخلفية الخضراء الباستيل وظلالين من اللون الرمادي كألوان في المقدمة. يوفر المظهر العديد من لوحات ألوان الباستيل الإضافية.
حول هذه النقطة ، يشرح ميل تشويس-دوان ، رئيس التصميم الافتراضي للموضوع:
سنقوم بتجميع السمة ببعض لوحات الألوان الإضافية ، بما في ذلك نظام الألوان الأبيض والأسود. لماذا الباستيل جرين؟ الباستيل والألوان الباهتة جميلة في الوقت الحالي
واحد وعشرون لونا
عشرون وعشرون لونًا (مصدر الصورة: اجعل وورد بريس أساسيًا )
Twenty-One هو السمة الافتراضية الجديدة لـ وورد بريس والتي تأتي مع وورد بريس 5.6! 👁🗨 تعرف على جميع ميزاته الرئيسية في هذا الدليل المتعمق!
انقر للتغريد
في وقت كتابة هذا التقرير ، كان Twenty-One قيد التطوير النشط وغير متاح بعد للتنزيل في دليل قوالب وورد بريس. ولكن يمكنك الحصول على إصدار قيد التقدم من السمة على جيثب .
سيتم إهمال مستودع Github بمجرد دمج القالب في النواة ، وستجده في دليل السمات. نظرًا لأن Twenty Twenty-One يتبع جدول إصدار وورد بريس 5.6 ، فقد ترغب في حفظ التواريخ التالية:
20 أكتوبر 2020: الإصدار التجريبي 1
27 أكتوبر 2020: الإصدار التجريبي 2
2 نوفمبر 2020: الإصدار التجريبي 3
12 نوفمبر 2020: بيتا 4
17 نوفمبر 2020: RC 1
1 ديسمبر 2020: RC 2
7 كانون الأول (ديسمبر) 2020: التشغيل الجاف لإصدار وورد بريس 5.6
8 ديسمبر 2020: التاريخ المستهدف لإصدار وورد بريس 5.6
لتشغيل قالب Twenty-One وتشغيله ، اتبع الخطوات التالية:
احصل على الحزمة المضغوطة من GitHub .
قم بتحميل الحزمة الخاصة بك إلى تثبيت التطوير الخاص بك من لوحة معلومات وورد بريس أو عبر SFTP .
استعرض للوصول إلى المظهر ← السمات وانقر على زر تنشيط في صورة معاينة السمة.
انتقل إلى المظهر → التخصيص لتكوين Twenty-One.
يمكنك الآن البدء في إجراء اختباراتك إما على موقع ويب مرحلي أو في بيئتك المحلية .
الأهمية
يرجى ملاحظة أن برنامج Twenty-One لا يزال قيد التطوير النشط ، ولم يتم إصلاح العديد من المشكلات حتى الآن ، وقد تتغير بعض الميزات في المستقبل.
قضية الوضع المظلم
العدد الحادي والعشرون # 620 على جيثب
لست مستعدًا لإجراء اختباراتك؟
لا تقلق ، لقد قمنا بتشريح الموضوع وسنعرض لك ما يمكن أن تتوقعه من Twenty-One.
تمامًا مثل Twenty Twenty ، فإن سمة وورد بريس الافتراضية الجديدة ليست سمة كاملة الميزات ، ولكنها سمة بسيطة تعتمد على محرر الكتلة لبناء الصفحة. يهدف الموضوع أيضًا إلى توفير إمكانية وصول رائعة . على حد تعبير ميل تشويس دوان:
أخيرًا ، نود أن نجعل الموضوع يلبي الإرشادات ذات الصلة من WCAG 2.1 مستوى AAA. لقد أحببنا الفكرة عندما طرحها + make.وورد بريس.org / accessibility / ، وسنقدر أي وجميع الإرشادات من خبراء مجتمعنا a11y للمساعدة في جعل ذلك ممكنًا.
موضوع تدعم عددا خير موضوع و كتلة يتميز بما في ذلك ما يلي:
ميزات المظهر:
روابط التغذية التلقائية
علامة العنوان
تنسيقات المشاركة
نشر الصور المصغرة
عناصر HTML5
شعار مخصص
التحديث الانتقائي للحاجيات
خلفية مخصصة
قائمتا تنقل
شريط جانبي واحد
ميزات الكتلة:
أنماط الكتلة الافتراضية
أنماط المحرر
أنماط محرر الظلام (خلفية داكنة)
محاذاة واسعة
حظر أحجام الخطوط
كتلة لوحات الألوان
كتلة الإعدادات المسبقة التدرج
محتوى المبتدئين
تضمينات مستجيبة
ارتفاع خط مخصص
لون الارتباط التجريبي
تباعد مخصص تجريبي
الوحدات المخصصة (تمت إزالتها في وورد بريس 5.6)
تتضمن القائمة التالية الميزات التي قد تكون أكثر صلة عند إنشاء موقع ويب استنادًا إلى برنامج Twenty-One.
يدعم Twenty-One موقعين في القائمة ، التنقل الأساسي ، الموجود في الزاوية اليمنى العلوية للرأس ، وملاحة التذييل .
عشرون موقع قائمة واحد وعشرون
عشرون موقع قائمة واحد وعشرون
إذا تمت إضافتها إلى قائمة التذييل ، فسيتم اكتشاف الروابط الاجتماعية وتحويلها تلقائيًا إلى رموز SVG للوسائط الاجتماعية المدعومة.
الرموز الاجتماعية
قائمة Twenty-One الاجتماعية
يدعم Twenty-One تسعة تنسيقات للمشاركة: رابط ، جانبي ، معرض ، صورة ، اقتباس ، حالة ، فيديو ، صوت ، دردشة. يمكنك اختيار تنسيق المنشور الخاص بك في لوحة Status & Visibility لإعدادات المحرر.
تنسيقات النشر
يدعم برنامج Twenty-One تسعة تنسيقات منشورات
لإلقاء نظرة على كيفية تعامل نسق Twenty-One مع تنسيقات المنشور ، انتقل إلى مجلد أجزاء القالب / مقتطفات واختر القالب. على سبيل المثال ، افتح ملف excerpt-image.php في محرر الكود المفضل لديك . في هذا الملف سترى الكود التالي:
/**
* Show the appropriate content for the Image post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// If there is no featured-image, print the first image block found.
if (
! twenty_twenty_one_can_show_post_thumbnail() &&
has_block( 'core/image', get_the_content() )
) {
twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}
the_excerpt();الشفرة واضحة بذاتها ، لكن دعنا نلقي نظرة فاحصة:
has_block يحدد ما إذا كان المنشور أو السلسلة تحتوي على نوع كتلة معين (قالب الصورة الأساسي في هذا المثال).
twenty_twenty_one_print_first_instance_of_block هي وظيفة قالب Twenty-One التي تطبع أول مثيل لكتلة في المحتوى ثم تنفصل.
لذلك ، إذا كان عارض الموقع يتطلب أرشيفًا لمشاركات بتنسيق “صورة” ، فسيعرض وورد بريس صورة في الجزء العلوي لكل منشور في الأرشيف. باتباع نفس المنطق ، يمكنك الغوص في أي تنسيق منشور عن طريق التحقق من أجزاء القالب المقابلة.
يوفر Twenty-One دعمًا لشعار مخصص بحجم 300 × 100 بكسل. يمكنك العثور على إعدادات الشعار المخصص في لوحة Site Identity .
هوية الموقع في واحد وعشرين
هوية الموقع في واحد وعشرين
تتضمن هذه الشاشة:
شعار مخصص
عنوان الموقع
سطر الوصف
أيقونة الموقع
يدعم Twenty-One أحجام الخطوط التالية :
صغير جدًا – 16
صغير – 18
عادي / متوسط - 20
كبير – 24
كبير جدا – 40
ضخم – 96
العملاق – 144
في ورقة أنماط السمة ، يتم تعيين الأحجام remبوحدات.
حجم الخط واحد وعشرون واحد وعشرون
يدعم Twenty-One سبعة أحجام للخطوط
يوفر Theme Customizer لوحة Colors & Dark Mode بما في ذلك خيارين:
منتقي ألوان بسيط مع 10 لوحات ألوان محددة مسبقًا.
مربع اختيار للتبديل بين تشغيل / إيقاف الوضع المظلم.
تُظهر الصورة أدناه لون خلفية أصفر فاتح مع نص رمادي غامق.
الألوان والوضع الداكن
إعدادات الألوان والوضع الداكن في Twenty-One
يتم تعيين لون الخلفية افتراضيًا إلى اللون الأخضر الباستيل ( ‘#d1e4dd’) ، ولكن يمكن لمسؤولي الموقع التبديل بسهولة بين بدائل ألوان الخلفية التالية:
أسود = ‘#000000’؛
رمادي غامق = ‘#28303D’؛
رمادي = ‘#39414D’؛
أخضر = ‘#D1E4DD’؛
أزرق = ‘#D1DFE4’؛
أرجواني = ‘#D1D1E4’؛
أحمر = ‘#E4D1D1’؛
البرتقالي = ‘#E4DAD1’؛
أصفر = ‘#EEEADD’؛
أبيض = ‘#FFFFFF’؛
تتوفر نفس الألوان كلوح ألوان في إعدادات مجموعة المحرر.
بالإضافة إلى ذلك ، يدعم Twenty-One العديد من الإعدادات المسبقة للتدرج للكتل التي تدعم هذه الميزة. تُظهر الصورة أدناه التدرجات اللونية الافتراضية في إعدادات كتلة الأعمدة.
تدرجات اللون
ثمانية إعدادات مسبقة للتدرج في إعدادات لون الكتلة
من وجهة نظر إمكانية الوصول ، يعد دعم Dark Mode حداثة مطلقة لموضوع افتراضي.
دعونا نغوص أعمق قليلا!
بعد مناقشة على قناة # core- theme Slack ، قدم Mel Choyce-Dwan دعم Dark Mode لـ Twenty-One.
تمكين الوضع المظلم في نظام MacOS
تمكين الوضع المظلم في macOS
في البداية ، لم يكن من الواضح كيف يمكن تنفيذ هذه الميزة في Twenty-One إذا تمت إضافتها كميزة سمة أو كمشروع منفصل في مكون إضافي.
كانت هناك خمسة خيارات ممكنة للاختيار من بينها:
السماح لأصحاب المواقع بتعطيل دعم الوضع المظلم وزوار الموقع لتبديل الوضع المظلم / إيقاف تشغيله أثناء عرض الموقع.
السماح لمالكي المواقع فقط بتعطيل دعم الوضع المظلم (لا يوجد خيار لزوار الموقع لتبديل الوضع المظلم / إيقاف تشغيله).
تمكين دعم الوضع المظلم على أنه “قيد التشغيل دائمًا” مع السماح لزوار الموقع بالتبديل أثناء عرض الموقع.
تمكين دعم الوضع المظلم على أنه “قيد التشغيل دائمًا” ومنع زوار الموقع من تبديل الوضع المظلم / إيقاف تشغيله.
لا يدعم الوضع المظلم على الإطلاق
بعد مناقشة مدروسة ، تمت إضافة Dark Mode إلى السمة. حاليا:
يتوفر دعم الوضع الداكن كميزة اشتراك لأصحاب المواقع .
على زر تبديل تمت إزالة من المحرر اجهة ومتاح فقط في مخصص.
يقع زر تبديل الوضع الداكن في الزاوية اليمنى السفلية (يسارًا على اليمين من اليمين إلى اليسار) ويختفي عندما يقوم عارض الموقع بالتمرير لأسفل الصفحة.
مع تمكين الوضع الداكن ، يمكن لمشاهدي الموقع تشغيله / إيقاف تشغيله وفقًا لتفضيلاتهم الشخصية ، وبغض النظر عن إعدادات نظام التشغيل / المتصفح .
تم تمكين الوضع الداكن في أداة التخصيص وتعطيله في الموقع الأمامي
تم تمكين الوضع الداكن في أداة التخصيص وتعطيله في الموقع الأمامي
حتى إذا كان الوضع الداكن يعتبر تحسينًا في إمكانية الوصول ، فليس من الواضح أن صفحات موقعك ستكون أكثر سهولة في كل سياق.
أكبر المخاوف تتعلق بالشعارات الداكنة والصور الشفافة. قد يؤدي التبديل من نموذج الضوء الافتراضي إلى لون الخلفية الداكن إلى مشكلات في سهولة القراءة قد تقلل من قابلية الاستخدام وتفسد مظهر موقع الويب الخاص بك.
على سبيل المثال ، قد يختفي الشعار الداكن على خلفية فاتحة تمامًا إذا قام القراء بتمكين الوضع الداكن من جانبهم. وتتعلق مخاوف مماثلة ل سطوع الصورة والتباين و غموض الحدود، فواصل، والفواصل .
لهذا السبب ، إذا كنت تخطط لتقديم دعم Dark Mode لموقعك على الويب ، فيجب أن تأخذ في الاعتبار أيضًا كيف سيبدو موقع الويب الخاص بك بخلفية مظلمة.
تم تمكين الوضع الداكن في أداة التخصيص وتمكينه في الموقع الأمامي
تم تمكين الوضع الداكن في أداة التخصيص وتمكينه في الموقع الأمامي
يدرك المساهمون في الموضوع هذه المشكلات ويستمر النقاش على Github. للحصول على عرض أقرب لقضايا قابلية الاستخدام في Dark Mode وفرصة للمشاركة في المناقشة ، تحقق من القائمة الكاملة للمشكلات على Github .
يتم تخزين تفضيلات الوضع الداكن في LocalStorage ويمكن عرضها في أدوات مطوري المتصفح.
في Google Chrome ، قم بتشغيل Chrome WebTools وانقر فوق علامة التبويب التطبيق . ابحث عن قسم التخزين وقم بتوسيع قائمة التخزين المحلي.
تفضيلات المستخدم Dark Mode في التخزين المحلي Brave Browser
تفضيلات المستخدم Dark Mode في التخزين المحلي Brave Browser
لكي نكون صادقين ، فإن Dark Mode ليس شيئًا شائعًا في سياق مواقع الويب اليوم. ومع ذلك ، نظرًا لأن المظهر الافتراضي الجديد لـ وورد بريس يدعم الآن الوضع المظلم ، فقد نتوقع حدوث تغيير في هذا المجال المحدد من إمكانية الوصول لأن وورد بريس هو أكثر برامج CMS استخدامًا .
يجب ألا يفوت المطورون الذين يرغبون في التعمق أكثر في الأشياء التقنية هذا الدليل التفصيلي حول الوضع المظلم على الويب .
ومع ذلك ، فقد حان الوقت الآن لاستكشاف الميزات الأكثر إثارة للاهتمام في Twenty-One لمطوري السمات.
لنبدأ بخصائص CSS المخصصة.
كما هو مذكور أعلاه ، يعتمد Twenty-One على Seedlet ، وهو سمة من عمودين ، مع شريط جانبي للتذييل وثلاثة مواقع قائمة. يعتمد تصميم Seedlet تمامًا على خصائص CSS المخصصة وهذا يسهل على مطوري السمات والمستخدمين المتقدمين إنشاء سمات فرعية على سمة Automattic.
الشيء نفسه ينطبق على Twenty-One. يأتي النسق الافتراضي الجديد مع تخطيط عمود واحد وشريط جانبي للتذييل وموقعين للقائمة. تعكس ورقة الأنماط نظام الخصائص المخصصة المتداخلة التي توفرها Seedlet وهذا يجعل من Twenty-One قماشًا مثاليًا لإنشاء سمات فرعية ومواقع ويب مخصصة للغاية.
خصائص CSS المخصصة (المعروفة أيضًا باسم متغيرات CSS ) هي كيانات خاصة تحتوي على قيم محددة يمكن إعادة استخدامها في كل مكان في ورقة الأنماط الخاصة بك.
لذلك ، إذا كنت بحاجة إلى تغيير لهجة لون معينة في المستند الخاص بك ، فلن تحتاج إلى إجراء بحث عام لمعرفة أي تواجد لهذا اللون في جميع أنحاء ورقة الأنماط. تحتاج فقط إلى تعيين قيمة خاصية مختلفة داخل :root الكتلة .
خصائص CSS المخصصة في Twenty-One
خصائص CSS المخصصة في Twenty-One
كمثال على التخصيص البسيط ، لنفترض أنك تريد تعيين لون خلفية مخصص. لست بحاجة إلى إنشاء موضوع فرعي لذلك. تحتاج فقط إلى تضمين إعلانين CSS في محرر الكود الخاص بلوحة CSS الإضافية :
:root {
--global--color-beige: #e6d7c1;
}
body {
background-color: var(--global--color-beige);
}CSS إضافية
CSS مخصص في أداة تخصيص Twenty-One
خصائص CSS المخصصة آمنة للاستخدام لأنها مدعومة من قبل جميع المتصفحات الرئيسية ، كما هو موضح في الصورة أدناه من Can I Use :
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
خصائص CSS المخصصة مدعومة من قبل غالبية متصفحات الويب الحديثة
خصائص CSS المخصصة مدعومة من قبل غالبية متصفحات الويب الحديثة
إذا كنت تريد التعمق أكثر في خصائص CSS المخصصة ، فراجع وثائق MDN .
يوفر Twenty-One عدة أنماط لمحرر القوالب. في منشور مدونة سابق ، قمنا بتعريف أنماط الحظر كتخطيطات كتلة محددة مسبقًا تتيح للمستخدمين إضافة هياكل معقدة للكتل المتداخلة إلى صفحاتهم بسرعة .
قدم وورد بريس 5.5 عددًا قليلاً من أنماط الكتلة ويجب أن يأتي المزيد مع وورد بريس 5.6. علاوة على ذلك ، يأتي Twenty-One بمجموعته الخاصة من أنماط الكتلة.
في Twenty-One ، يتم تعريف أنماط الكتلة في ملف inc / block-patterns.php . أنماط عشرين عشرين واحد تختلف من أنماط بسيطة مثل نص بحجم كبير النمط، الذي يحتوي على عنصر H2 واحد، إلى أنماط أكثر تعقيدا، مثل تداخل الصور والنصوص و سائل الإعلام ونص عنوان المقال .
نمط كتلة عنوان المقالة في الوسائط والنص في Twenty-One
نمط كتلة عنوان المقالة في الوسائط والنص في Twenty-One
حاليًا ، يوفر الموضوع الأنماط التالية:
نص كبير
منطقة الروابط : نص ضخم تتبعه شبكات التواصل الاجتماعي وروابط عناوين البريد الإلكتروني.
عنوان المقالة الإعلامية والنصية: قالب وسائط ونص به صورة كبيرة على اليسار وعنوان على اليمين. يتبع العنوان فاصل وفقرة وصف.
الصور المتداخلة : ثلاث صور داخل كتلة أعمدة متداخلة.
عرض صورتين : كتلة وسائط ونص بها صورة كبيرة على اليسار وواحدة أصغر بإطار بإطار على اليمين.
الصور والنص المتداخلان: كتلة أعمدة متداخلة مع صورتين ووصف نصي.
قائمة المحفظة : قائمة المشاريع مع الصور المصغرة.
معلومات الاتصال : كتلة بها 3 أعمدة تعرض معلومات الاتصال وروابط وسائل التواصل الاجتماعي.
نمط كتلة الصور المتداخلة في Twenty-One
نمط كتلة الصور المتداخلة في Twenty-One
يعد توفر العديد من أنماط الحظر أمرًا رائعًا لكل من المستخدمين والمطورين. سيتم السماح للمستخدمين بإضافة كتل معقدة من التعليمات البرمجية بسرعة وسهولة إلى منشوراتهم وصفحاتهم ، ويمكن للمطورين استخدام هذه الأنماط كقوالب مفيدة للبناء عليها عند البرمجة الخاصة بهم.
Twenty-One Blocks عبارة عن إصدار تجريبي منفصل قائم على الكتل لموضوع Twenty-One. والغرض منه هو مشاركة وإبقاء الجميع على اطلاع دائم بما يحدث في تجربة تحرير الموقع الكامل ، مما يمنح الجميع فرصة للتعمق في ميزات FSE الجديدة قبل أن يصبحوا جزءًا من وورد بريس Core.
من غير المحتمل أن نرى هذا الإصدار التجريبي مدمجًا في النواة مع وورد بريس 5.6. وفقًا لكارولينا نيمارك ،
سيحتاج الموضوع إلى تمكين Gutenberg وتجربة تحرير الموقع بالكامل. لن يكون جزءًا من Core ، ولكن بمجرد اكتماله سيكون متاحًا في دليل السمات.
في وقت كتابة هذه السطور ، تتطلب Twenty-One Blocks إضافة Gutenberg . بمجرد تثبيت كل من السمة والمكوِّن الإضافي وتنشيطهما ، يظهر عنصر قائمة محرر الموقع في قائمة مسؤول وورد بريس (لن تحتاج إلى تنشيط تجربة تحرير الموقع بالكامل بعد الآن).
عنصر قائمة محرر الموقع
عنصر قائمة محرر الموقع في تجربة Twenty-One Blocks
الآن ، انقر فوق عنصر قائمة محرر الموقع الجديد لفتح واجهة تحرير الموقع بالكامل والبدء في تحرير أي عنصر على الصفحة باستخدام محرر الكتلة.
تحرير الموقع بالكامل في Twenty-One Blocks
تحرير الموقع بالكامل في Twenty-One Blocks
هنا لن نتعمق في الأمور التقنية. يكفي أن نقول أن السمات الكلاسيكية والسمات القائمة على الكتل مختلفة هيكليًا.
توضح الصورة أدناه محتوى مجلد Twenty-One Blocks:
مجلد Twenty-One Blocks
مجلد Twenty-One Blocks
كنت لاحظت التجريبية-theme.json الملف و قوالب كتلة و كتلة قالب أجزاء المجلدات.
يتمثل الاختلاف الرئيسي بين سمات وورد بريس التقليدية والسمات المستندة إلى الكتلة في أن السمات القائمة على الكتلة تتضمن قوالب تتكون بالكامل من كتل.
على سبيل المثال ، افتح block-template-parts / header.html في محرر الشفرة . يجب أن ترى الكود التالي:
<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->
<!-- wp:site-tagline /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
<!-- wp:navigation-link {"label":"Work","url":"#"} /-->
<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->كما ترى ، تم استبدال ملف قالب header.php الكلاسيكي بملف .html يحتوي على عدة كتل.
يمكنك الحصول على الإصدار قيد التقدم من قالب Twenty-One Blocks من مشروع تجارب السمات على Github.
إذا كنت مطورًا للقوالب ، فإن الوثائق الرسمية توفر كل ما تحتاج لمعرفته حول السمات القائمة على الكتلة.
إذا كنت ترغب في المساهمة في تجربة تحرير الموقع بالكامل ، فقم بإرسال ملاحظاتك هنا .
الأهمية
يعد Twenty-One Blocks موضوعًا تجريبيًا ولا يجب استخدامه في الإنتاج! العب معها في بيئة انطلاق .
وورد المواضيع الافتراضية هي نقطة انطلاق رائعة لتعلم أساسيات موضوع التنمية والحصول على انك بدأته مع بناء العرف الموضوعات الطفل .
تتبع السمات الافتراضية إرشادات معايير الترميز الرسمية لـ وورد بريس وتتوافق مع معايير الويب .
هل هناك مكان أفضل لتعلم البرمجة ؟
هل تحتاج إلى استضافة سريعة وآمنة وصديقة للمطورين لمواقع عملائك؟ تم تصميم Kinsta مع وضع مطوري وورد بريس في الاعتبار ويوفر الكثير من الأدوات ولوحة تحكم قوية. تحقق من خططنا
تعد السمات الفرعية ميزة رائعة في وورد بريس تتيح لك تخصيص تخطيط صفحاتك ووظائفها وهيكلها. مع الأمثلة التالية ، سنتعمق في كل جانب من جوانب تخصيص السمة.
كيفية إضافة أنماط مخصصة
كيفية إضافة أنماط كتلة جديدة
تخصيص ملف قالب
إعداد موضوع طفلك
بناء قالب وورد بريس فرعي عبارة عن عملية من 3 خطوات:
قم بإنشاء مجلد جديد في wp-content / theme وقم بتسميته كما تريد. لكن تذكر أنه يجب أن يكون اسمًا فريدًا. يوصي كتيب Child Themes باستخدام نفس اسم النسق الرئيسي ، مع إلحاق -child في النهاية.
حتى نتمكن من تسمية المجلد الجديد واحد وعشرون طفل .
انتقل الآن إلى دليل القالب الفرعي الخاص بك وقم بإنشاء ملف style.css جديد بما في ذلك الكود التالي:
/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/يسمح رأس المعلومات لـ وورد بريس بالتعامل بشكل صحيح مع موضوع طفلك.
اسم الموضوع: الاسم الفريد للموضوع.
عنوان URI للموضوع: حيث يمكن للمستخدمين العثور على الكود أو الوثائق الخاصة بالموضوع.
الوصف: نص وصفي لمساعدة المستخدمين على فهم وظيفة السمة.
المؤلف: اسمك
عنوان URI للمؤلف: موقع الويب الخاص بالمؤلف.
القالب: المجلد حيث يتم تخزين النسق الأصلي. استخدم اسم المجلد وليس اسم النسق. بدون هذا السطر ، لن يعمل قالبك كموضوع فرعي.
الإصدار: رقم الإصدار
الرخصة: الرخصة التي يجب أن تكون جنو .
URI للترخيص: الرابط إلى معلومات حول الترخيص.
أسفل هذا النص ، يمكنك إضافة كتل إعلانات CSS الخاصة بك ، كما سأوضح لك بعد قليل.
مع برنامج Twenty-One ، ستحتاج أيضًا إلى ملف function.php . لذلك ، قم بإنشاء الخاص بك في دليل القالب الفرعي ، وافتحه في محرر التعليمات البرمجية الخاص بك ، وأضف الكود التالي:
<strong><?php</strong>
/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');نظرًا لأن نسق Twenty-One يستخدم get_template_directory()لتحميل ورقة الأنماط الخاصة به ، فأنت بحاجة إلى إدراج ورقة أنماط القالب الفرعي باستخدام wp_enqueue_scriptsالإجراء.
بعد ذلك ، احفظ ملفاتك ، وافتح لوحة معلومات وورد بريس الخاصة بك ، وانتقل إلى المظهر -> السمات ، وقم بتنشيط موضوع Twenty-One الفرعي الخاص بك.
دعنا الآن نضيف تخصيصاتنا.
عندما يتعلق الأمر بتخصيص تخطيط موقع وورد بريس الخاص بك ، فلديك العديد من الخيارات لإضافة كود CSS المخصص الخاص بك . قد تكون لوحة CSS الإضافية الخاصة بـ Customizer كافية لإجراء تغييرات صغيرة.
ولكن سيكون الموضوع الفرعي خيارًا أفضل إذا كان عليك إجراء تخصيصات متقدمة ، أو كنت بحاجة إلى تصدير التعليمات البرمجية الخاصة بك إلى مواقع وورد بريس مختلفة.
لنجربها مع تخصيص بسيط: تغيير مجموعة الخطوط الافتراضية.
لنفترض أنك تريد تحميل مجموعة خطوط مختلفة ، أو ببساطة أضف الخط المفضل لديك إلى مجموعات خطوط Twenty-One الافتراضية.
كيف يمكنك أن تفعل ذلك؟
سأوضح لك هنا كيفية تغيير الخط الافتراضي لعناوين H1 ، ولكن يمكنك تغيير عائلة الخطوط لأي عنصر نصي في موقع الويب الخاص بك.
أولاً ، افتح ملف style.css الخاص بـ Thenty-One وابحث عن كتلة CSS التالية:
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
clear: both;
font-family: var(--heading--font-family);
font-weight: var(--heading--font-weight);
}كما ترى ، يتم تعيين عائلة الخطوط للعناوين في –heading–font-familyالمتغير.
انتقل الآن إلى :root{}الكتلة وابحث عن الإعلان التالي:
--heading--font-family: var(--global--font-primary);–heading–font-familyيعتمد على –global–font-primaryالمتغير المحدد في أعلى :root{}الكتلة:
:root{
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
...
}الآن نحن نعرف ما يجب تغييره!
انسخ –global–font-primaryالإعلان من ورقة أنماط الوالدين والصقه في style.css الخاص بطفلك . بعد ذلك ، قم بتغيير اسم الخاصية وقيمتها كما هو موضح أدناه:
:root{
:root{
/* Font Family */
--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);
--global--font-family-child: var(--global--font-primary-child);
}بمجرد إعلان مجموعة الخطوط المخصصة الخاصة بك ، يمكنك استخدامها أينما تريد في ورقة الأنماط الخاصة بك. عناوين H1 في مثالنا:
h1,
.h1 {
font-family: var(--global--font-family-child);
}احفظ style.css لطفلك وأعد تحميل الصفحة. يجب أن ترى Ubuntu كعائلة خطوط افتراضية جديدة لعناوين صفحتك.
عائلة خطوط مخصصة في Twenty-One
عائلة الخطوط الافتراضية مقابل عائلة الخطوط المخصصة في Twenty-One
الآن بعد أن عرفت كيفية تخصيص أسلوب Twenty-One مع سمة فرعية ، يمكننا استكشاف المزيد من الميزات المتقدمة.
في هذا المثال ، سنقوم ببناء نمط كتلة مخصص بما في ذلك كتلة من عمودين مع صورة مستديرة على اليسار ، وعنوان H4 ، وفقرة على اليمين.
يمكنك إنشاء النمط الخاص بك مباشرة في Block Editor أو تخصيص رمز نمط كتلة موجود.
إذا اخترت إنشاء النمط الخاص بك في Block Editor ، فأنت تحتاج ببساطة إلى إضافة الكتل الضرورية إلى منشور أو مسودة صفحة ، ثم التبديل إلى Code Editor ونسخ الكود المقابل.
كتلة من عمودين في محرر التعليمات البرمجية
كتلة من عمودين في محرر التعليمات البرمجية
يمكننا الآن تسجيل النمط الخاص بنا في ملف function.php للقالب الفرعي:
add_action( 'init', function(){
register_block_pattern_category(
'custom-patterns',
array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );
register_block_pattern(
'twentytwentyone-child/custom-bio-pattern',
array(
'title' => __( 'Author Bio', 'twentytwentyone-child' ),
'description' => _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
'content' => '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
'categories' => array( 'custom-patterns' ),
)
);
});يسجل الكود أعلاه فئة الأنماط المخصصة ونمط المؤلف الحيوي .
لاحظ الكود الذي استخدمناه لبناء imgالعنصر:
<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />و get_stylesheet_directory_uri() ظيفة توفر URI من الدليل موضوع الطفل (تم إضافة صورة في وقت سابق لموضوع الطفل الأصول مجلد).
احفظ تغييراتك وأنشئ منشورًا أو صفحة جديدة.
الآن يجب أن تجد النمط الجديد في أداة إدراج الكتلة.
نمط كتلة مخصص
تمت إضافة نمط كتلة مخصص إلى Twenty-One
إذا كنت ترغب في إنشاء ملف قالب جديد لأرشيف معين ، أو منشور / صفحة واحدة ، فستحتاج إلى إنشاء قالب .php جديد وفقًا للتسلسل الهرمي لقالب وورد بريس .
ولكن إذا كنت ترغب فقط في تعديل قالب موجود (أو جزء من القالب) ، فأنت تحتاج فقط إلى نسخ القالب الأصلي من القالب الأصلي ولصقه في الموضع المقابل لموضوع الطفل الخاص بك (اقرأ المزيد حول هذا الموضوع في دليلنا الموسع إلى مواضيع الطفل ).
لنفترض أنك تريد تخصيص نص “Proudly powered by وورد بريس”. لديك عدة خيارات لإزالة هذا الخط أو تخصيصه . على سبيل المثال ، دعنا نغيره يدويًا.
للقيام بذلك ، انسخ ملف قالب footer.php من مجلد الأصل والصقه في جذر المظهر الفرعي الخاص بك. عند الانتهاء ، افتح القالب الفرعي footer.phpالخاص بك في محرر التعليمات البرمجية الخاص بك وابحث عن الكود التالي:
<div class="powered-by">
<strong><?php</strong>
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
);
<strong>?></strong>
</div><!-- .powered-by -->الآن ، يمكنك إجراء تغييراتك. لنفترض أنك تريد منح أرصدة لمضيف الويب الخاص بك ، فقط استبدل aالعنصر كما هو موضح أدناه:
<div class="powered-by">
<strong><?php</strong>
printf(
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="https://kinsta.com/">Kinsta</a>'
);
<strong>?></strong>
</div><!-- .powered-by -->لإزالة هذا النص ، ما عليك سوى التعليق أو حذف div.powered-byالعنصر:
<!-- <div class="powered-by">
<strong><?php</strong>
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
);
<strong>?></strong>
</div> -->وهذا كل شيء. الآن ، بالانتقال من الأمثلة البسيطة أعلاه ، يمكنك إجراء تخصيصات أكثر إثارة وإحضار موقع الويب الخاص بك مدعومًا بموضوع Twenty-One إلى المستوى التالي.
تحقق من الجديد في سمات وورد بريس ، من Dark Mode إلى السمات القائمة على الحظر ، في هذه النظرة العامة الشاملة على Twenty-One 🌅
انقر للتغريد
قالب Twenty-One هو المحاولة الثالثة للسماح للأشخاص الذين ليس لديهم مهارات تقنية متقدمة ببناء مواقع الويب. إنها سمة وورد بريس بسيطة وذات أداء جيد ويمكن الوصول إليها وتتناسب أيضًا مع مجموعة واسعة من حالات الاستخدام. تأتي مواقع وورد بريس المدعومة من قالب Twenty-One بجميع الأشكال والأحجام. لمعرفة ما إذا كان الموضوع يستخدم Twenty-One ، تحقق من أداة الكشف عن سمات وورد بريس سهلة الاستخدام .
تم تصميم السمة الافتراضية الجديدة مع وضع محرر الكتلة في الاعتبار ، ومن السهل تخصيصها لكل من المستخدمين والمطورين.
