كيفية إضافة متغيرات CSS لتخصيص سمات الطفل في WordPress

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

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

لا يُقصد بها أن تحل محل معالجات CSS الأولية ، وأكثرها شيوعًا هي SASS. يستخدم العديد من البناة SASS على وجه التحديد للمشاريع الأكبر ، جنبًا إلى جنب مع CSS Variables كقطعة أساسية ، فإنه يوفر العديد من الخيارات المتقدمة.

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

تعد متغيرات CSS وسيطًا سعيدًا ، ولحسن الحظ ، يوجد دعم قوي للمتصفح. قبل الالتزام باستخدام CSS Variables في الإنتاج ، تأكد من التحقق من Can I Use للتأكد من حصولهم على الدعم الذي تحتاجه.

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

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

احصل على Genesis Framework و StudioPress Themes مجانًا!

يمكن لعملاء WP Engine الوصول إلى مجموعة من سمات WordPress المتميزة التي تأتي بشكل قياسي مع كل خطة! يمكنك البدء في إنشاء موقعك التالي مقابل 20 دولارًا شهريًا فقط! تعلم المزيد هنا.

كيفية استخدام متغيرات CSS

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

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

إليك ما يبدو عليه متغير CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

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

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

وظيفة var ()

كيف يتم استخدام المتغيرات بالفعل؟ انها بسيطة جدا. أولاً ، يتم التصريح عن المتغير ثم استخدامه في مجموعة قواعد CSS المطلوبة.

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

من السهل تحديد المتغيرات ؛ أمامهم شرطان. يجب تضمين الشرطتين (-).

صيغة var() واضحة جدًا:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

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

يتيح لك فاحص الويب (Chrome في هذه الحالة) فحص ومعرفة المتغيرات التي يتم استخدامها.

يحدد المثال التالي أولاً الخصائص العامة المخصصة المسماة --light-gray و --text-black . تُسمى الدالة var() ، والتي تُدرج قيمة الخصائص المخصصة لاحقًا في ورقة الأنماط:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

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

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

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

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

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

قم بتغذية حرية الإبداع باستخدام WP Engine

يوفر WP Engine حرية الإنشاء على WordPress. تعمل منتجات الشركة ، وهي الأسرع بين جميع مزودي WordPress ، على تشغيل 1.5 مليون تجربة رقمية. يستخدم أكثر من 200000 موقع في العالم WP Engine لتشغيل تجاربهم الرقمية أكثر من أي شخص آخر في WordPress. ابحث عن المزيد على wpengine.com أو تحدث إلى أحد الممثلين اليوم!