أفضل 7 إضافات لـ CSS & CSS Live Editor WordPress 2022 (مجاني ومحترف)

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

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

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

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

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

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

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

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

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

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

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

تحميل هذا البرنامج المساعد مجانا.

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

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

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

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

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

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

إلى جانب الإصدار المتميز مقابل 29.00 دولارًا ، هناك إصدار مجاني أيضًا.

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

بمجرد تثبيت المكون الإضافي وتنشيطه ، ابحث عن طريقك إلى Appearance> Customize وسترى تمت إضافة علامة تبويب CSS مخصصة إلى قائمة عناصر قائمة Customizer.

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

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

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

البرنامج المساعد المجاني. لا توجد تكلفة.

يتم تضمين Visual CSS Style Editor في المكون الإضافي Yellow Pencil ، جنبًا إلى جنب مع مكون إضافي خالٍ من التعليمات البرمجية ؛ ومع ذلك ، يحتوي المكون الإضافي أيضًا على محرر CSS لأولئك الذين يفضلون العمل يدويًا مع أوراق الأنماط.

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

تم تحسين المكون الإضافي للسماح لك بتخصيص أي عنصر في أي سمة أو مكون إضافي في غضون دقائق. يمكنك الآن تعديل المظهر الخاص بك في غضون دقائق أو إعادة تصميم موقع الويب الخاص بك بالكامل.

يمكنك تحديد محددات CSS الفردية في المظهر الخاص بك باستخدام Yellow Pencil ، مما يسهل تغييرات السمة بشكل أسهل وأكثر كفاءة من خلال تمكينك من تحديد محددات CSS في السمة الخاصة بك بسهولة وبشكل مباشر.

أكثر من 300 خلفية مختلفة ، و 600 مجموعة خطوط مختلفة ، وأكثر من 50 رسمًا متحركًا تجعل من الممكن لك تخصيص مظهرك بالكامل لمظهر وشكل عملك.

قد يكون المستخدم الجديد للمكوِّن الإضافي WordPress Live CSS Editor غير مألوف لهذا البرنامج المساعد القوي ؛ ومع ذلك ، هناك توثيق شامل لـ Yellow Pages.

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

سعر هذا البرنامج المساعد هو 26.00 دولارًا.

يمكن إضافة أكواد CSS أو تحريرها باستخدام البرنامج المساعد Custom CSS و JavaScript WP CSS Editor. بالإضافة إلى CSS ، يمكنك أيضًا تضمين كود Javascript ، كما هو الحال مع المكونات الإضافية الأخرى المذكورة أعلاه.

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

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

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

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

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

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

يمكنك تنزيل البرنامج المساعد مجانًا.

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

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

هناك بالطبع خيار للمطورين للتشفير في CSS و SCSS و JavaScript مع وضع المعاينة المباشرة ، لكن هذا الخيار غير متاح لجافا سكريبت.

يتيح لك Themeover تحديد وضع المسودة كلما قمت بإنشاء سمة موقع ويب جديدة لتجربة تصميمات مختلفة دون تغيير تجربة المستخدم.

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

بالإضافة إلى المكون الإضافي نفسه ، يأتي Themeover مع مجموعة شاملة من البرامج التعليمية والوثائق ومنتدى الدعم الذي يوضح مزيدًا من المعلومات حول Themeover. يمكن شراء Themeover كعملية شراء لمرة واحدة بقيمة 78 دولارًا بالإضافة إلى ترقيات مجانية مدى الحياة.

يتضمن هذا المكون الإضافي دعمًا مجانيًا لمدة 12 شهرًا. السعر 19.99 دولار.