أزرار التصميم في قوالب قوالب ووردبريس

وحين يعود قليلا، كتب غانيش داهال منشورًا هنا على CSS-Tricks الرد على تغريدة طلبت إضافة ظلال مربع CSS على عناصر وعناصر WordPress. هناك الكثير من الأشياء الرائعة التي تستفيد من الميزات الجديدة التي يتم شحنها في WordPress 6.1 والتي توفر عناصر تحكم لتطبيق الظلال على الأشياء مباشرة في Block Editor و Site Editor UI.

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

لماذا الأزرار ، تسأل؟ هذا سؤال جيد ، فلنبدأ بذلك.

أنواع الأزرار المختلفة

عندما نتحدث عن الأزرار في سياق محرر قوالب WordPress ، علينا التمييز بين نوعين مختلفين:

1. كتل الأطفال داخل كتلة الأزرار
2. الأزرار المتداخلة داخل كتلة أخرى (على سبيل المثال ، كتلة نموذج تعليقات النشر)

إذا أضفنا كلا الكتلتين إلى قالب ، فسيكون لهما نفس المظهر افتراضيًا.

لكن الترميز مختلف تمامًا:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

كما نرى ، أسماء علامات HTML مختلفة. إنها الطبقات المشتركة - .wp-block-button و .wp-element-button - التي تضمن التصميم المتسق بين الزرين.

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

لذا ، كيف نحدد أنماط الأزرار بتنسيق theme.json دون كتابة CSS الفعلي؟ دعونا نفعل ذلك معا.

إنشاء الأنماط الأساسية

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

سنركز بشكل خاص على elements في ال styles. يستهدف هذا المحدد عناصر HTML المشتركة بين الكتل. هذه هي الغلاف الأساسي الذي نعمل معه:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

إذن ما يتعين علينا القيام به هو تحديد أ button جزء.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

أن button يتوافق مع عناصر HTML المستخدمة في ترميز عناصر الأزرار في الواجهة الأمامية. تحتوي هذه الأزرار على علامات HTML التي يمكن أن تكون إما من نوعي الأزرار لدينا: مكون مستقل (مثل كتلة الزر) أو مكون متداخل في كتلة أخرى (مثل كتلة Post Comment).

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

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

هذا يغير لون كلا نوعي الأزرار:

في حالة فتح DevTools وإلقاء نظرة على CSS التي ينشئها WordPress للأزرار ، نرى أن .wp-element-button يضيف class الأنماط التي حددناها فيها theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

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

تنفيذ أنماط الأزرار التفاعلية

نظرًا لأن هذا موقع كل شيء عن CSS ، أراهن أن العديد منكم على دراية بالحالات التفاعلية للروابط والأزرار. في وسعنا :hover مؤشر الماوس فوقها ، اضغط عليها :focus، انقر عليها لجعلها :active. هيك ، هناك حتى :visited الدولة لإعطاء المستخدمين إشارة مرئية بأنهم نقروا على هذا من قبل.

هؤلاء يكونون فئات CSS الزائفة و نستخدمها لاستهداف تفاعلات الارتباط أو الزر.

في CSS ، قد نقوم بتصميم ملف :hover اذكر مثل هذا:

a:hover { /* Styles */
}

In theme.json، سنقوم بتمديد إعلان الزر الحالي مع هذه الفئات الزائفة.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

لاحظ الطبيعة "المنظمة" لهذا. نحن في الأساس نتبع الخطوط العريضة:

لدينا الآن تعريف كامل للأنماط الافتراضية والتفاعلية لأزرارنا. ولكن ماذا لو أردنا تصميم أزرار معينة متداخلة في كتل أخرى؟

أزرار التصميم متداخلة في كتل فردية

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

هذه الكتلة أكثر تعقيدًا من كتلة الأزرار لأنها تحتوي على أجزاء متحركة أكثر: النموذج ، والمدخلات ، والنص الإرشادي ، والزر. لاستهداف الزر في هذه الكتلة ، يتعين علينا اتباع نفس النوع من بنية JSON التي استخدمناها لـ button ، ولكن يتم تطبيقه على كتلة نموذج نشر التعليقات ، والتي يتم تعيينها إلى ملف core/post-comments-form جزء:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

لاحظ أننا لم نعد نعمل في elements أي أكثر من ذلك. بدلاً من ذلك ، نحن نعمل بالداخل blocks الذي تم حجزه لتكوين الكتل الفعلية. على النقيض من ذلك ، تعتبر الأزرار عنصرًا عالميًا حيث يمكن دمجها في كتل ، على الرغم من توفرها ككتلة قائمة بذاتها أيضًا.

تدعم بنية JSON العناصر الموجودة داخل العناصر. لذا ، إذا كان هناك ملف button عنصر في كتلة نموذج التعليق ، يمكننا استهدافه في ملف core/post-comments-form كتلة:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

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

نتيجة لذلك ، يحتوي CSS الذي تم إنشاؤه بواسطة WordPress على محدد أكثر دقة:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

وماذا لو أردنا تحديد أنماط تفاعلية مختلفة لزر "نموذج تعليق"؟ إنها نفس الطريقة التي قمنا بها مع الأنماط الافتراضية ، فقط تلك التي تم تحديدها داخل core/post-comments-form كتلة:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

ماذا عن الأزرار غير الموجودة في الكتل؟

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

لا شكر على واجب. في كل هذه الحالات ، يمكنك إضافة الامتداد .wp-element-button فئة في ترميز القالب أو الكتلة أو الرمز القصير. سيتم بعد ذلك تطبيق الأنماط التي تم إنشاؤها بواسطة WordPress في تلك الحالات.

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

اختتام

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

ودعنا لا ننسى المزايا الثلاث الرئيسية لاستخدام theme.json:

1. يتم تطبيق الأنماط على الأزرار في كل من عرض الواجهة الأمامية ومحرر الكتلة.
2. سيكون CSS الخاص بك متوافقًا مع تحديثات WordPress المستقبلية.
3. تعمل الأنماط التي تم إنشاؤها مع سمات الكتلة والسمات الكلاسيكية على حد سواء - ليست هناك حاجة لتكرار أي شيء في ورقة أنماط منفصلة.

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

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/styling-buttons-in-wordpress-block-themes/