كيف تضيف برمجيًا مزايا جديدة إلى أي إضافة باستخدام محرر Cursor؟

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

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

ما هو محرر Cursor، ولماذا استخدمته؟

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

وقد استخدمت هذا المحرر دونًا عن بقية محررات الأكواد لأسباب عديدة أهمها:

• يفهم سياق المشروع: قبل تنفيذ أي أمر، يقرأ الذكاء الاصطناعي المدمج في البرنامج بنية المشروع ويفهمه جيدًا، ثم ينفذ التعديلات أو الإضافات، وهذا يضمن أن تكون متوافقة مع البنية الحالية للمشروع.
• يعدل ويضيف وينشئ تلقائيًا: Cursor ليس محرر أكواد مع نافذة تحدث مع الذكاء الاصطناعي، بل هو فعليًا محرر يعمل بالذكاء الاصطناعي، حيث يعدل الأكواد الموجودة أو يحذفها أو يضيف إليها أو ينشئ الملفات والمجلدات اللازمة دون تدخل منك، فقط عليك إعطاء الأمر.
• دعم نماذج ذكاء اصطناعي قوية: يدعم كافة نماذج الذكاء الاصطناعي الشهيرة، بما فيها النماذج الأكثر قوة في البرمجة والتطوير Gemini 2.5 Pro و Claude Sonnet 4.

اقرأ أيضًا: تجربة تطوير إضافة «ختّام» باستخدام برنامج Cursor

خطوات إضافة ميزة إلى إضافة ووردبريس باستخدام Cursor

لاستخدام Cursor لإضافة ميزة الحفظ التلقائي للبيانات لإضافة Contact Form 7 اتبعت الخطوات التالية:

تنصيب Cursor وإعداد الحساب

بداية حملت برنامج Cursor من موقعه الرسمي على الإنترنت، وذلك بالنقر على زر Download for Windows.

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

فتم فتح صفحة تسجيل الدخول إلى موقع Cursor في المتصفح، فنقرت على زر Continue with Google لمتابعة تسجيل الدخول باستخدام حساب جوجل، علمًا أنه سيتم التسجيل تلقائيًا وتسجيل الدخول إذا لم تكن قد أنشأت حسابًا في الموقع.

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

فتم تسجيل الدخول إلى الموقع، وطلب مني الموافقة على تسجيل الدخول باستخدام الحساب على برنامج Cursor على جهاز الكومبيوتر، فنقرت على زر Yes, Log In.

فظهر لي إشعار يوضح أن العملية تمت وأنه تم تسجيل الدخول.

فعدت إلى برنامج Cursor، وبالفعل ظهر لي أنه تم ربط الحساب بالبرنامج.

إعداد ووردبريس على البيئة المحلية

بعد تنصيب البرنامج وربط حساب Cursor به، أعددت ووردبريس على الخادم المحلي لدي، إذ استخدمت برنامج XAMPP لإعداد الخادم وتنصيب ووردبريس عليه كما هو مشروح في مقال (إنشاء موقع ووردبريس على الخادم المحلي باستخدام برنامج XAMPP).

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

فتح مجلد الإضافة في Cursor

بعد تنصيب الإضافة وتفعيلها، توجهت إلى واجهة Cursor، ثم من قائمة File اخترت خيار Open Folder.

فظهرت نافذة اختيار مجلد الخاصة بالنظام، فتوجهت إلى مجلد الإضافات الخاص بموقع ووردبريس المحلي وهو wp-content/plugins ثم اخترت مجلد الإضافة contact-form-7 ونقرت على زر Select Folder.

فتم فتح الإضافة في برنامج Cursor مباشرة، وظهرت كافة ملفاتها ومجلداتها في قسم التنقل على الجانب الأيسر.

استخدام Cursor لإضافة الميزة إلى الإضافة

بعد فتح مجلد الإضافة باستخدام برنامج Cursor، توجهت إلى نافذة التحدث مع الذكاء الاصطناعي عبر النقر على أيقونة Toggle AI Pane في الأعلى، وطلبت منه إضافة الميزة إلى الإضافة باللغة العربية، حيث شرحت الميزة بدقة بإدخال البرومبت أو الأمر التالي:

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

بعد ذلك أرسلك البرومبت بالنقر على Enter، فقرأ الذكاء الاصطناعي في البرنامج ملفات الإضافة التي يجب معرفتها لإضافة الميزة تلقائيًا، ثم أنشأ ملفين لإَضافة الميزة أحدهما هو auto-save.js والثاني هو auto-save.php، كما عدل ملف load.php الذي كان موجودًا أصلًا لإضافة ملف auto-save.php إلى الإضافة فعليًا.

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

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

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

وعندما أعدت تجربة أحد النماذج لاحظت أنه بالفعل أصبح يتم حفظ البيانات واستعادتها تلقائيًا بدون إشعارات.

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

تنصيب الإضافة بعد التحديث على الموقع

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

وبالتالي أصبح لدي إضافة ووردبريس على شكل ملف zip ويمكنني تنصيبها على أي موقع ووردبريس بنفس طريقة تنصيب الإضافات المدفوعة. اتبعت خطوات التنصيب الموضحة في مقال (كيف تقوم بتنصيب إضافة ووردبريس وتفعيلها على موقعك بالشكل الصحيح) على موقع العميل، وبالفعل تم تنصيب الإضافة، واختبرتها وكانت تعمل بلا أي مشاكل.

نصائح عند استخدام Cursor لتعديل الإضافات

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

• استخدم وضع Agent في المحادثة مع الذكاء الاصطناعي، وليس وضع Ask أو Manual، فهذا الوضع يجعل البرنامج يجري كافة التعديلات بنفسه دون تدخل منك، وهذا أسهل لك.
• راجع كافة الأكواد التي يولدها الذكاء الاصطناعي في Cursor والتعديلات التي يجريها، وذلك للتأكد من أنه يتبع أفضل الممارسات الأمنية والبرمجية.
• كن دقيقًا إلى أقصى درجة ممكنة عند طلب تعديل في البرنامج، فكلما كان الطلب أكثر دقة ووضوحًا، كلما حصلت على إجابة وتعديل أفضل.
• استخدم نموذج الذكاء الاصطناعي المناسب، فإذا كان الطلب أو المشكلة معقدة، فاستخدم نموذجًا قويًا، مثل Gemini 2.5 Pro أو Claude Sonnet 4، وإذا كان بسيطًا استخدم Auto.

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