في عالم تطوير WordPress، فإن امتلاك الأدوات المناسبة يمكن أن يحدث فرقًا كبيرًا. لهذا السبب يسعدنا أن نعلن عن إطلاق تطبيق Code App الجديد للمساعد - وهو أداة قوية ومتعددة الاستخدامات مصممة لتبسيط سير عمل البرمجة لديك وتسهيل إدارة مقتطفات التعليمات البرمجية في WordPress.

يقع تطبيق Code ضمن المكون الإضافي المساعد ويتيح لك إنشاء مقتطفات كود CSS وJavaScript وتحريرها وإدارتها لموقعك على الويب. باستخدام تطبيق Code، يمكنك بسهولة إضافة مقتطفات جديدة وتعيينها إلى أقسام محددة والتحكم في حالة التنشيط الخاصة بها. تتضمن الميزات تكرار المقتطفات وتصديرها وحفظها في مكتبة (باستخدام Assistant Pro). تضمن الواجهة البديهية التبديل السريع بين المقتطفات الممكّنة والمعطلة، مما يؤدي إلى تبسيط عملية تخصيص موقع الويب الخاص بك.

دعونا نتعمق ونستكشف بعض ميزاته وقدراته المبتكرة:

ما هو تطبيق الكود المساعد؟

ربما تعلم بالفعل أنه يمكنك حفظ مقتطفات التعليمات البرمجية في Assistant Pro Libraries. الآن، مع إضافة تطبيق Code، يمكنك بسهولة إضافة وتحرير وإدارة مقتطفات التعليمات البرمجية لموقع WordPress الخاص بك، كل ذلك ضمن المكون الإضافي المساعد:

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

• إدارة مقتطفات التعليمات البرمجية بسهولة: قم بإدارة كود CSS وJavaScript لموقع الويب الخاص بك مباشرة داخل تطبيق Code. لا داعي للتنقل بين الأدوات والمنصات المتعددة، فكل ما تحتاجه أصبح في متناول يدك.
• حفظ مقتطفات التعليمات البرمجية في Assistant Pro Cloud: يتكامل تطبيق Assistant Code بسلاسة مع حساب Assistant Pro الخاص بك، مما يسمح لك بحفظ مقتطفات التعليمات البرمجية وتنظيمها داخل المكتبات السحابية. قم بتبسيط سير العمل الخاص بك عن طريق إعادة استخدام مقتطفات التعليمات البرمجية بسهولة عبر مشاريع مواقع الويب المتعددة، مما يوفر لك وقتًا ثمينًا.
• التعاون مع فريقك: يعد التعاون أمرًا أساسيًا، ويسهل تطبيق Code App العمل مع فريقك أكثر من أي وقت مضى. من خلال التحرير في الوقت الفعلي، يمكنك التعاون في موقع WordPress الخاص بك في الوقت الفعلي والبقاء متزامنًا مع فريقك بغض النظر عن مكان وجودك.

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

كيفية إضافة مقتطف كود في ووردبريس

يوفر تطبيق Assistant Code طريقة سلسة لتحسين موقع الويب الخاص بك باستخدام مقتطفات CSS وJavaScript المخصصة. البدء بسيط:

الخطوة 1: افتح تطبيق Code في المساعد

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

لاحظ أنه إذا كنت تريد عرض رمز تطبيق Code في الشريط الجانبي، فيمكنك إعادة ترتيب التطبيقات عن طريق سحب تطبيق Code لأعلى في القائمة:

الخطوة 2: إنشاء مقتطف باستخدام تطبيق Code

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

في الشاشة التالية، سترى أن تطبيق Code يقبل ما يلي:

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

• مقتطف الرمز : أدخل مقتطف الرمز الخاص بك في مقطع التعليمات البرمجية:

قم بالتمرير لأسفل إلى قسم الموقع وقم بتعيين الحالة والقواعد للمقتطف الخاص بك:

• الحالة : قم بالتبديل إلى تمكين أو تعطيل حالة مقتطف الرمز.
• القواعد : اختر المكان الذي تريد تحميل هذا المقتطف فيه. يبدو هذا مشابهًا لقواعد موقع Themer. انقر فوق إضافة قاعدة لتمكين القواعد الإضافية.

الخطوة 3: انقر فوق تحديث لحفظ التغييرات

بمجرد الانتهاء من إضافة مقتطف الرمز الخاص بك داخل تطبيق Assistant Code، انقر فوق الزر "تحديث" الموجود في الزاوية اليمنى العليا لحفظ التغييرات:

بعد ذلك، قم بتحديث صفحتك لتصبح التغييرات سارية المفعول.

تكرار أو حفظ في المكتبة أو تصدير أو حذف مقتطفات التعليمات البرمجية

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

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

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

الآن عندما تنقر على أيقونة تطبيق Code، سترى جميع مقتطفات التعليمات البرمجية الخاصة بك في عرض القائمة وكلها في مكان واحد:

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

أمثلة على مقتطفات كود ووردبريس

هناك العديد من مقتطفات أكواد CSS وJavaScript الخاصة بـ WordPress والتي يتم استخدامها بشكل شائع لتحسين الوظائف أو عناصر النمط أو إضافة التفاعل إلى مواقع الويب. فيما يلي بعض الأمثلة الشائعة:

مقتطفات كود CSS

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

مقتطفات كود جافا سكريبت

• التمرير السلس: رمز JavaScript لتمكين التمرير السلس عندما ينقر المستخدمون على الروابط الداخلية.
• تحميل الصور البطيئة: قم بتنفيذ التحميل البطيء لتحسين أوقات تحميل الصفحة عن طريق تحميل الصور عند الحاجة إليها فقط.
• Windows Modal: قم بإنشاء نوافذ مشروطة أو نوافذ منبثقة لعرض محتوى أو رسائل إضافية.
• الأكورديون/الأقسام القابلة للطي: كود JavaScript لإنشاء أقسام بنمط الأكورديون التي تتوسع أو تنهار عند النقر عليها.
• تبديل الرؤية: كود JavaScript لتبديل رؤية العناصر الموجودة على الصفحة.
• التمرير اللانهائي: قم بتحميل المزيد من المحتوى أثناء قيام المستخدمين بالتمرير إلى أسفل الصفحة، دون مطالبتهم بالنقر فوق روابط ترقيم الصفحات.
• القوائم المنسدلة: قم بتحسين قوائم التنقل بوظيفة القائمة المنسدلة باستخدام JavaScript.
• شريط التمرير/العرض الدائري: قم بإنشاء أشرطة تمرير أو دوارات للصور لعرض المحتوى بطريقة جذابة بصريًا.
• Ajax Load More: قم بتحميل محتوى إضافي ديناميكيًا دون إعادة تحميل الصفحة بأكملها، وهو مفيد للمدونات أو المحافظ.

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

خاتمة

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

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