أفضل 5 إضافات مجانية لـ WordPress CSS للتحرير المباشر لموقع الويب الخاص بك

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

في هذه المقالة ، سنلقي نظرة على أفضل 5 إضافات مجانية لـ WordPress CSS يمكنك استخدامها لتخصيص مظهر موقعك من خلال محرر مباشر. لا تقلق إذا كنت لا تعرف CSS. هذه المكونات الإضافية تعتني بذلك من أجلك!

شرح CSS

ترمز CSS إلى Cascading Style Sheets وهي تحدد كيفية عرض عناصر HTML على موقعك. يتحكم CSS في مظهر صفحة الويب وهذا هو الرمز الذي تحتاج إلى تخصيصه إذا كنت تريد تغيير تصميم موقعك.

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

ما هو Live Editing؟

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

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

محرر أسلوب CSS المرئي

Visual CSS Style Editor عبارة عن مكوّن إضافي لمحرر WordPress Live CSS مليء بالميزات يمكّنك من تخصيص موقع الويب الخاص بك ببضع نقرات. مع محرر نمط الواجهة الأمامية بنسبة 100٪ ، فهو سريع للغاية وسهل الاستخدام.

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

سمات:

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

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

SiteOrigin CSS

SiteOrigin CSS هو مكون إضافي قوي لمحرر WordPress CSS يوفر عناصر تحكم مرئية بسيطة ومعاينة في الوقت الفعلي. إذا كنت تستمتع بكتابة الكود ، فسوف تنبهر بالإكمال التلقائي لهذا البرنامج المساعد الذي يجعل كتابة CSS سريعة وسهلة.

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

سمات:

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

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

TJ Custom CSS

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

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

سمات:

• المعاينة الحية.
• بديل موضوع الطفل لإضافة التخصيص.
• بنيت في بناء الجملة تسليط الضوء على محرر النص.
• سهل التركيب والاستخدام.
• لا حاجة للتكوين.

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

WPCustomizer Pro

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

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

سمات:

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

يأتي WP Customizer Pro أيضًا مع إرشادات مفيدة للبدء ونظام دعم مفيد.

محرر CSS المتقدم

Advanced CSS Editor عبارة عن مكون إضافي محرر WordPress خفيف الوزن وسهل الاستخدام. يمكّنك من التحرير من قائمة التخصيص في أي من صفحات الواجهة الأمامية الخاصة بك ومشاهدة التغييرات الحية قبل الحفظ.

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

سمات:

• البرنامج المساعد خفيف الوزن.
• التحرير المباشر عبر Customizer.
• CSS مخصص لأجهزة مختلفة.
• يمكن تطبيق Global CSS.
• استجابة كاملة.

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

افكار اخيرة

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

ألقِ نظرة على ميزات كل مكون إضافي واختر المكون الذي تعتقد أنه الأكثر ملاءمة لاحتياجاتك. ثم جربها. لكن لا تقلق ، إذا لم تتمكن من التعامل معها ، فيمكنك دائمًا تجربة أخرى!

هل استخدمت مكونًا إضافيًا لمحرر CSS المباشر من WordPress؟ اي واحد تقترح؟ يرجى مشاركة أفكارك في التعليقات أدناه ...