كيفية إضافة فئات CSS مخصصة إلى WordPress (3 طرق سهلة)

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

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

ما هي فصول CSS ، وكيف تساعد؟

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

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

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

طرق لإضافة فئات CSS إلى WordPress

يمكنك إضافة فئات CSS إلى موقع ويب WordPress بطرق متعددة ، اعتمادًا على كفاءتك في استخدام CSS. سأريكم كيفية القيام بذلك باستخدام WordPress Customizer ومكوّث إضافي مثل CSS مخصص بسيط ولكن كلتا الطريقتين تتطلب منك كتابة CSS.

انتقل إلى الطريقة الثالثة إذا كنت مهتمًا أكثر بالطريقة بدون رمز.

1. استخدام WordPress Customizer

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

ستأخذك إضافة CSS إلى كل زر وقتًا كبيرًا حيث سيتعين عليك تكرار العملية ثماني مرات. ولكن مع فئات CSS ، يمكنك ببساطة تعيين فئة CSS نفسها لكل زر وكتابة CSS مرة واحدة فقط. دعنا نسمي فئة CSS الخاصة بنا " Custom-A" . في نافذة محرر صفحة WordPress الخاصة بك ، انقر فوق أي زر> الإعدادات (أيقونة الترس)> قم بتبديل الخيار المتقدم . الآن ، اكتب اسم الفصل في فصول CSS إضافية.

كرر العملية لكل زر وحفظ. لإضافة رمز التصميم إلى هذه الأزرار ، سيتعين عليك الانتقال إلى WordPress Customizer> CSS إضافية.

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

لاحظ أن اسم فئة CSS الذي اخترته يأتي قبل قواعد التصميم في الكود. هذا يتأكد من تطبيق الرمز على كل عنصر تم تعيين اسم الفئة هذا.

بعد الضغط على النشر ومعاينة صفحتك ، ستبدو الأزرار المصممة على هذا النحو:

هذا بسيط - إذا كنت تعرف CSS.

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

2. باستخدام مكون إضافي مثل CSS مخصص بسيط

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

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

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

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

فماذا لو كنت تستطيع توسيع التصميم دون كتابة سطر واحد من التعليمات البرمجية؟ هذا هو المكان الذي يأتي فيه بناة صفحات السحب والإفلات الحديثة مثل Divi.

3. باستخدام منشئ موقع الويب بدون رمز مثل Divi

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

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

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

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

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

تنزيل Divi 5

دعونا نرى ما أعنيه بمزيد من التفصيل أدناه

إعدادات مجموعة خيارات Divi تجعل إضافة فصول CSS أسهل

تأخذ إعدادات مجموعة خيارات Divi مفهوم فئات CSS وتبسيطها لغير الرموز. بدلاً من كتابة وتعيين الفصول يدويًا ، يمكنك الآن استخدام Divi's Visual Builder لتطبيق أنماط التصميم المشتركة عبر عناصر مختلفة بنقرات قليلة.

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

إنها طريقة أسرع وأسهل وأكثر سهولة للحفاظ على تصميم موقع الويب الخاص بك ثابتًا. إليكم كيف:

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

تعرف على المزيد حول إعدادات مجموعة الخيارات

كيفية استخدام Divi لإضافة فئات CSS إلى WordPress دون الترميز

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

تغيير خلفية الزر

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

الآن ، لتطبيق نفس الإعدادات على الأزران الأخرى ، سأقوم ببساطة بتغيير الزر المسبق إلى الضوء الأساسي.

تغيير ظل العمود

دعنا نضيف ظل مربع إلى جميع الأعمدة. سأضيف ظل مربع إلى العمود الأول وحفظه كإعداد مسبق ظل الظل المسبق .

لتطبيق نفس الظل على العمودين الآخرين ، سأقوم ببساطة بتغيير مربع الظل المسبق إلى الظل .

تعديل الإعدادات المسبقة النصية

يمكنك أيضًا تعديل الأنماط للعناصر النصية ، مثل H1 و H2S. إليك كيفية تحديث الأعمدة التي تعمل مسبقًا H3:

بعد الادخار ، إليك كيف ستبدو صفحة التسعير:

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

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

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

تعرف على المزيد حول إعدادات مجموعة الخيارات

Divi هو مغير للألعاب لنظام التصميم القائم على الفصل

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

ابدأ مع Divi 5 اليوم

Divi 5 في وضع التحديث الكامل. نحن نطلق ميزات جديدة كل أسبوع ، تمامًا مثل المسبق للمجموعة ، من الجيد معرفة الوحدات المتقدمة ، ومتغيرات تصميم CSS ، والكثير الذي يغير كيفية تصميم أي موقع ويب.

تعرف على المزيد حول Divi 5

Divi 5 هو إطار تصميم قوي مع أدوات قوية مثل Divi Dash و Divi Quick Sites و Divi AI - بنيت لمساعدتك على إنشاء مواقع ويب محترفة مخصصة دون لمس سطر واحد من التعليمات البرمجية. لا يوجد شيء يحدك ، وعلى استعداد لإجراء اختبار في مستقبل تصميم موقع الويب؟

تنزيل Divi 5