إضافة فئات CSS إضافية إلى المكوِّنات

يوضِّح هذا الدليل كيفية استخدام ميزة تنسيقات CSS الإضافية الخاصة بمحرِّر ووردبريس.

في هذا الدليل

1. كيفية عملها
2. إضافة فئة CSS الإضافية
3. نصائح لاستخدام فئات CSS الإضافية
   1. استهداف مكوِّن معيّن في صفحة معيّنة
   2. تغيير أيقونة نقطة الترقيم المدورة في قائمة
   3. استغلال فئات CSS المخصصة الحالية

كيفية عملها

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

يتيح لك إعداد المكوِّن المتقدم إضافة فئة CSS إلى مكوِّنك، ما يتيح لك كتابة CSS مخصص لتهيئة المكوِّن كما ترغب.

يمكن إضافة فئة (فئات) CSS إضافية أسفل قسم الإعدادات المتقدمة من إعدادات المكوِّن.

على سبيل المثال، إذا كنت ترغب في ضبط النص لمكوِّنات معينة فقط، فيمكنك إضافة فئة، مثل my-justify-class حقل فئة CSS إضافية الموجود في إعدادات مكوِّن الفقرة. ثم، تفضَّل بزيارة محرِّر CSS الخاص بك واكتب نمطًا للفئة على هذا النحو:

p.my-justify-class { text-align: justify;  }

إضافة فئة CSS الإضافية

لإضافة فئة CSS إضافية إلى مكوِّن ما، انقر على المكوِّن الذي تقوم بتحريره. ثم، راجع إعدادات المكوِّن على الجانب الأيمن لمعرفة الإعداد المتقدم.

إذا كنت لا ترى إعدادات المكوِّن على الجانب الأيمن، فانقر على أيقونة الترس (⚙️) الموجودة في الزاوية العلوية اليُمنى لفتح الإعدادات.

يحتوي كل مكوِّن من المكوِّنات على إعداد متقدم حيث يمكنك إضافة فئة (فئات) CSS إضافية

يمكنك تعريف فئتك بوصفها:

• كلمة واحدة، مثل special
• مصطلح يتكون من عدة كلمات مع فصل كل كلمة بواصلات، مثل special-class

يمكنك كذلك إضافة فئات متعددة إلى المكوِّن نفسه عن طريق فصل كل فئة بمسافة. على سبيل المثال: special-class-1 special-class-2

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

ربما تعلم أنه عند كتابة كود CSS، فإننا نستهدف فئة عن طريق وضع نقطة أمام الفئة، على سبيل المثال .page. ومع ذلك، لا تضع نقطة أمام الفئة عند تعريفها في إعدادات المكوَّن بوصفها فئة CSS إضافية أو أنها لن تعمل.

نصائح لاستخدام فئات CSS الإضافية

استهداف مكوِّن معيّن في صفحة معيّنة

لنفترض أنك ترغب في تغيير مظهر مكوِّن وسائط ونص واحد على موقعك، ولكن اترك جميع مكوِّنات الوسائط والنص الأخرى الموجودة على موقعك من دون تغيير. في هذا المثال، نحدِّد فئة special-media-text-block في إعدادات المكوِّن المتقدمة:

بعد ذلك، يمكننا إضافة CSS هذا إلى موقعنا ضمن تخصيص ← تنسيقات CSS إضافية لمنح هذا المكوِّن لون خلفية متدرجًا رائعًا:

.special-media-text-block { background-image: linear-gradien (إلى أسفل اليمين، والأحمر والأزرق)؛ }

هذه هي النتيجة:

تغيير أيقونة نقطة الترقيم المدورة في قائمة

يمكنك تغيير الأيقونة المستخدمة في قائمة من قرص دائري إلى مربع ودائرة فارغة وأرقام رومانية والمزيد!

حدِّد فئة، مثل square-bullet-list-block على هذا النحو:

إضافة CSS مخصص إلى مكوِّن القائمة

ثم، أضف CSS هذا إلى محرِّر CSS الخاص بك:

.square-bullet-list-block { list-style-type: square؛ }

وستكون النتيجة:

مكوِّن قائمة يتضمن تعدادًا نقطيًا في شكل مربع!

ضع في الحسبان أنه بناءً على تصميم قالبك، قد تحتاج إلى إضافة فئة مثل

استغلال فئات CSS المخصصة الحالية

تأتي بعض الفئات مُعرفة سابقًا في ووردبريس، ويمكنك إضافتها إلى مكوِّناتك للحصول على تأثيرات رائعة.

على سبيل المثال، سيجعل is-style-circle-mask الصورة الموجودة في مكوِّن الصورة تظهر على هيئة دائرة:

تأثير فئة is-style-circle-mask

ستؤدي إزالة الفئة إلى إزالة تأثير الدائرة كذلك.

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

• aligncenter
• alignright
• alignleft
• alignwide
• alignfull
• has-small-font-size
• has-large-font-size
• has-huge-font-size
• has-drop-cap