ماذا عن تخصيص Live WordPress Theme في الوقت الفعلي؟ حسنًا ، CSSHero عبارة عن مكون إضافي لإجراء تغييرات بطريقة سهلة

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

في هذا المنشور سنناقش البرنامج المساعد الجديد CSSHero بكل التفاصيل. لكن قبل أن نبدأ ، دعونا نركز على these questions .

• كيفية make live changes على موقع WordPress الخاص بك؟
• يتغير الموضوع في الوقت الحقيقي؟
• هل هناك أي طريقة سهلة لمعرفة عدد خصائص CSS لموضوع WordPress؟
• قم بتحرير مدونة WordPress الخاصة بك باستخدام معاينات في الوقت الفعلي
• تخصيص سمات WordPress قبل نشرها

إذا كان لديك أي من الأسئلة أعلاه ، فأنت في المكان الصحيح.

إذا كنت تريد إجراء تغييرات مباشرة بنفسك without any help من البرنامج المساعد ، فأنت بحاجة إلى معرفة ما يقرب ~300 of CSS properties . من المستحيل تعديلها لرؤية تغييرات حقيقية في وضع السمة الحية. يسمح لك customizer WordPress بتعديل بعض الخصائص ولكن ليس كلها وهذه مشكلة حقيقية لدينا.

أود أن أقول إن لدينا خياران:

الخيار 1) إجراء تغييرات CSS يدويًا

• افتح مدونتك في Chrome / Mozilla
• انقر بزر الماوس الأيمن فوق عناصر CSS ، مثل Header ، Post ، image ، إلخ
• انقر فوق Inspect لرؤية خصائص CSS
• قم بإجراء تغييرات لترى التأثير
• بمجرد أن تكون بخير - انتقل إلى ملف style.css الخاص بالثيم واحفظ التغييرات
• كرر العملية عدة مرات

الخيار 2) استخدم البرنامج المساعد مع الوظائف المضمنة ، في حالتنا هو CSSHero

• قم بإجراء التغييرات على live site باستخدام المحرر
• انظر النتيجة الحية
• انقر فوق Save button " وتكون قد done

CSSHero بالتعاون مع Crunchify ، يمنح 10 free Licenses لقراء Crunchify. اكمل هذا شكل جوجل للحصول على اسمك في القائمة. - انتهى الهبة

لنقم بتثبيت CSSHero وإجراء تغييرات مباشرة على سمة WordPress

NOTE : Checkout Complete Video في الجزء السفلي من هذا المنشور.

الخطوة 1

لماذا CSSHero؟ premium هو مكون إضافي لبرنامج WordPress. يبدأ الترخيص الأساسي بـ $29/site . أود أن أقول - إذا كنت مبتدئًا أو محترفًا ، فإن الأمر يستحق المحاولة. يأتي مع ضمان استرداد الأموال 30 days .

استخدم الكود CRUNCHIFY للحصول على 34% off على الباقات الأولية والخطط الشخصية و 40% off على خطة Pro.

سجل ترخيصك وقم بتنزيل أحدث إصدار من CSSHero plugin من لوحة القيادة: http://www.csshero.org/

الخطوة 2

• قم بتثبيته من لوحة إدارة WordPress الخاصة بك وقم بتنشيطها
• عند التنشيط سيطلب Key
• فقط اضغط على Get my Key Now! الزر وسيفتح صفحة بها مفتاح الترخيص
• انقر فوق Get License وأنت على أتم استعداد

النقطة 1) لنبدأ في الوظائف

• انتقل الآن إلى home page لمدونتك وسترى زر CSSHero المتحرك في الزاوية top right العليا.
• انقر فوق ذلك وسيقوم المكون الإضافي بتحميل control panel التي تعمل مع المظهر الخاص بك

ألق نظرة على الصورة المتحركة أدناه مع جميع CSSHero options :

النقطة 2) خيار محرر موضوع CSSHero

تتمثل فكرة theme editor في تغيير كل theme's style الخاص بك باستخدام محرر مرئي بسيط. بمساعدة محرر موضوع CSSHero ، يمكنك التغيير

• نص العنوان
• الخط
• الحدود
• الأنماط ، إلخ.

الأمر نفسه ينطبق على

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

النقطة 3) انقر نقرة واحدة في متناول يدي خيارات تخطيط الجهاز

كما ترى في الصورة أدناه ، يمنحنا محرر السمات خيارًا للتحقق من عدد Layouts المختلفة للهاتف المحمول و iPhone و iPad لموضوعك بنقرة واحدة فقط.

النقطة 4) كيف يمكنك التراجع عن تغييراتك الأخيرة؟

لدى المستخدم خيار التراجع عن جميع التغييرات الأخيرة باستخدام وحدة سجل Change history البسيطة. أراهن ، لا أحد من المطور ينجز أي شيء بشكل صحيح في المحاولة الأولى ، وليس على الأقل أنا :). هذا مفيد جدا بالنسبة لي.

يوفر CSSHero أيضًا وحدة سهلة الاستخدام تعرض all of your save changes . يمكنك العودة في timeline والعودة إلى الإصدار السابق. أليست هذه أداة يدوية؟ لقد استخدمت هذه الأداة حتى الآن عدد مرات مختلفة وأحبها.

النقطة 5) خيارات الإعدادات والأدوات

Preset Settings Tools Options .

ألق نظرة على مقطع فيديو مفصل تم التقاطه والذي يعرض جميع وظائف المكون الإضافي CSSHero WordPress Custom CSS Editor.

فيديو يوتيوب مفصل:

الآن بعد أن رأيت كل الوظائف ، حان الوقت لطرح الأسئلة أدناه :).

النقطة 6) هل يعمل هذا البرنامج المساعد مع موضوعي؟

وفقًا للمعلومات الواردة من موقع CSSHero الرسمي ، يعمل المكون الإضافي مع جميع أطر عمل WordPress Theme أدناه.

• إطار التكوين
• توليد الضغط
• طبقات
• موضوع الانذار
• المجموع
• صريح
• WP Bootstrap
• موضوعي
• مطلوب + مؤسسة
• أوميغا
• Pagelines DMS

إذا كان موضوعك isn't compatible مع CSSHero no worries . سيُظهر لك خيارًا لتمكين Rocket mode .

Message : الدعم الأصلي لهذا الموضوع غير موجود. هل تريد تجربة الكشف التلقائي في وضع الصاروخ؟ فقط قم enable it وحاول تعديل CSS again وسترى نفس الخيارات كما رأيت في الفيديو أعلاه.

النقطة 7) ماذا عن دعم البرنامج المساعد والتوثيق؟

تتوافق بعض إضافات WordPress الشائعة ، مثل Gravity Forms و WooCommerce و Contact Form7 و WP Pools والمزيد مع إطار عمل CSSHero.

هذا يعني أن CSSHero لا يعمل فقط مع theme customization السمات ولكنه يعمل أيضًا مع plugin layout customization .

أخيرًا وليس آخرًا ، في الموقع الرسمي ، هناك عدد من tips and tricks التفصيلية والمقالات المتاحة لقراءتها.

Only Cons التي يمكنني التفكير فيها هي التعرف على جميع الوظائف. قد يستغرق الأمر بعض الوقت حتى تبدأ وتصبح محترفًا. بمجرد أن تصبح على دراية بـ CSSHero ، أنا متأكد من أنه سيكون very handy solution لجميع مدونين WordPress.

تواصل معنا إذا كان لديك منتج ، ومكوِّن إضافي ، وموضوع ، وما إلى ذلك تعتقد أنك تريد الترويج له.

هنا صفقات Crunchify الحصرية لـ CSSHero:

مرحبا Crunchify القراء -

يسعدنا أن نعلن up-to 40% off على المكون الإضافي لتخصيص CSSHero WordPress Theme.

يرجى إلقاء نظرة على الخطوات أدناه

الخطوة 1

• انتقل إلى موقع CSSHero: https://www.csshero.org/
• انقر فوق ارتباط Pricing Plans

الخطوة 2

• انقر فوق الزر I have a coupon code

الخطوه 3

• أدخل رمز القسيمة: CRUNCHIFY

الخطوة 4

• انقر فوق الزر "استرداد" للحصول على 34% off على خطة المبتدئين والخطة الشخصية
• احصل على 40% off على خطة Pro

قائمة بجميع الصفقات: https://crunchify.com/deals/