سأكون صريحًا — عندما بدأت في إنشاء الصفحة الرئيسية لكتابي «Restart»، لم أكن متأكدًا مما يمكن أن أتوقعه من استخدام «Claude AI» مع «WordPress». لكن ما حدث خلال الساعات القليلة التالية غيّر تمامًا طريقة تفكيري في تطوير المواقع الإلكترونية والذكاء الاصطناعي!
التحدي: إنشاء صفحة هبوط احترافية
كنت بحاجة إلى صفحة هبوط كاملة لكتابي — صفحة ذات طابع احترافي، ومتوافقة مع الأجهزة المحمولة، ومحسّنة لمحركات البحث، وجاهزة للتصنيف على جوجل. وهو نوع من المشاريع التي تستغرق عادةً ساعات طويلة أو حتى أيامًا.
وبدلاً من اتباع طريقة العمل المعتادة في تطوير المواقع الإلكترونية، قررت تجربة أسلوب مختلف: العمل مباشرةً مع Claude AI من خلال موصل المكون الإضافي WPVibe الخاص بـ WordPress.
كانت جميع أدوات الذكاء الاصطناعي لإنشاء المواقع الإلكترونية التي استخدمتها من قبل إما لا تعمل بشكل جيد مع ووردبريس، أو أنها مصممة لتقوم بكتابة كود خاص بها لا يعمل إلا مع إعدادات معينة – مثل التحرير بالكتل في غوتنبرغ – أو أنها تعمل فقط مع سمة معينة مثل Elementor Pro.
لم أجرّب من قبل أداة ذكاء اصطناعي لتصميم المواقع الإلكترونية تمنحني حرية العمل مع أي شيء أريده، بما في ذلك سمة Divi المفضلة لدي.
ما أنجزناه معًا
من خلال العمل بشكل تفاعلي مع كلود، قمنا بإنشاء صفحة هبوط كاملة من الصفر تتضمن:
- 7 أقسام مصممة بالكامل — العنوان الرئيسي، العنصر الجذاب، بطاقات الميزات، السيرة الذاتية للمؤلف، الجدول الزمني للرحلة، عرض البودكاست، ودعوة العمل النهائية
- توافق تام مع الأجهزة المحمولة — تصميمات خطية ومسافات وتخطيطات مخصصة لكل نقطة توقف، تعمل بشكل مثالي على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية
- تحسين محركات البحث (SEO) الشامل — الأوصاف التعريفية، وعلامات Open Graph، وبطاقات تويتر، ورموز سكيما (الكتاب + الشخص)، وجميع التفاصيل الفنية المتعلقة بتحسين محركات البحث
- تحسين الصور — صور بحجم مناسب لتحسين الأداء، ونص بديل كامل لتسهيل الوصول
- التفاعلات المخصصة — تصميم الأزرار، وحالات التمرير فوق العناصر، والتسلسل الهرمي البصري
تم إطلاق الموقع على amrselim.com — وهو يعمل بكامل طاقته، ويتم تحميله بسرعة، وجاهز لتحويل الزوار إلى قراء لكتابي.
كيف سارت الأمور في الواقع
وإليكم ما أدهشني أكثر من أي شيء آخر: لم أكتب سطراً واحداً من التعليمات البرمجية. ولم أستخدم أداة إنشاء الصفحات Divi. ولم أقم بالاتصال بخادمي عبر SSH أو أتعامل مع بروتوكول FTP.
بدلاً من ذلك، أجريت محادثة. كانت محادثة مثمرة حقاً.
كنت أقول شيئًا مثل «يحتاج قسم العناوين الرئيسية إلى مساحة أكبر على الأجهزة المحمولة»، فيقوم كلود على الفور بتعديل المسافات التفاعلية. وكنت أقول «يجب تبديل ترتيب الأزرار — أمازون أولاً، ثم كندا»، فيقوم البرنامج بمعالجة كل من الترتيب المرئي والتصميم دفعة واحدة.
عندما واجهتنا مشكلة بسبب استمرار عرض مخطط Yoast SEO لعنوان URL القديم لموقع التطوير الخاص بي، قام كلود بإرشادي خطوة بخطوة لإضافة مقتطف PHP عبر WPCode، مما أدى إلى حل المشكلة بشكل نهائي. لم يكن هناك أي لبس. ولم نضطر إلى التجربة والخطأ. بل كانت الحلول واضحة ومحددة.
الأمور الفنية (التي لم أضطر إلى التفكير فيها)
وراء الكواليس، كان كلود يتولى أمورًا كنت أقضي عادةً ساعات في البحث عنها:
- تكوين وحدة Divi — قيم تباعد مخصصة لنقاط التوقف الخاصة بأجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف
- تصميم خطوط متجاوب — حجم H1 عند 56 بكسل/42 بكسل/32 بكسل، وأحجام أقسام H2 عند 36 بكسل/28 بكسل/24 بكسل، مع ضبط الأحجام بشكل صحيح
- ترتيب عناصر Flexbox في CSS — جعل الأزرار تظهر بترتيب مختلف بصريًا مع الحفاظ على بنية DOM نظيفة
- ترميز Schema.org — مخطط "الكتاب" مع رقم ISBN والتقييمات والعروض؛ مخطط "الشخص" مع المسمى الوظيفي والموقع والملفات الشخصية على مواقع التواصل الاجتماعي
- تحسين قابل للفهرسة بواسطة Yoast — إصلاح عناوين URL المخزنة مؤقتًا في قاعدة البيانات بعد ترحيل الموقع
- استراتيجية تحديد حجم الصور — استخدام غلاف كتاب بحجم 683 بكسل بدلاً من 1500 بكسل، وصور مصغرة لـ YouTube بحجم 480 بكسل بدلاً من 1280 بكسل
حدث كل هذا في الوقت الفعلي من خلال محادثة طبيعية. بدون دروس تعليمية. وبدون التعمق في الوثائق. فقط طلبت ما أردت ورأيت ذلك يتحقق.
كانت سرعة التكرار خيالية
وهنا كان الأمر الذي أدركته حقًا: عندما كان هناك خطب ما، كان إصلاحه يستغرق ثوانٍ بدلاً من ساعات.
عادةً ما يعني طلب إجراء تغيير شرحه للمطور، والانتظار حتى يقوم بتنفيذه، ومراجعة النتيجة، وربما طلب تعديل آخر. وتستمر هذه الدورة حتى يتم الوصول إلى النتيجة المطلوبة.
مع كلود، كانت عملية التفاعل سريعة للغاية. كنت أرى شيئًا ما على الصفحة، وأشير إليه بشكل عفوي، فيتم إصلاحه على الفور بعد لحظات. قمنا بعشرات من عمليات التعديل — تعديلات على تخطيط الصفحة على الأجهزة المحمولة، وتعديلات على تصميم الأزرار، وتحسينات في التباعد — في الوقت الذي يستغرقه عادةً إتمام جولة أو جولتين من المراجعات.
لماذا تتيح WP Vibe تحقيق ذلك
المكون السري هنا هو المكون الإضافي WP Vibe. فهو الذي يربط Claude مباشرةً بموقع WordPress الخاص بك — مما يمنحه القدرة على قراءة المحتوى الخاص بك، وتحديث الصفحات، وتحسين الصور، وتهيئة المكونات الإضافية، والتعامل مع جميع التفاصيل الفنية.
بدون WP Vibe، يظل كلود مجرد روبوت دردشة يمكنه تقديم النصائح لك. أما مع هذا البرنامج، فيصبح كلود شريكًا فعالاً في التطوير قادرًا على القيام بالعمل فعليًّا إلى جانبك.
يتم التعامل مع كل شيء من خلال واجهة برمجة التطبيقات REST الأصلية في WordPress وWP-CLI — دون أي وصول غير آمن، ودون أي مخاطر أمنية. يظل موقعك آمنًا بينما تستفيد من مزايا التطوير المدعوم بالذكاء الاصطناعي.
ماذا يعني ذلك للمؤسسين غير التقنيين
أنا أعمل في مجال إنشاء المواقع الإلكترونية منذ سنوات، لذا فأنا على دراية جيدة بالبرمجة. لكن ما لفت انتباهي هو: لا تحتاج إلى أن تكون خبيرًا تقنيًا لاستخدام هذا بشكل فعال.
التفاعل برمته يتم بطريقة حوارية. ما عليك سوى وصف ما تريده بلغة بسيطة وواضحة. أما كلود فيتولى تفاصيل التنفيذ. وسترى النتيجة على موقعك على الفور.
هذا يمثل نقطة تحول بالنسبة لـ:
- المؤلفون والمبدعون الذين يحتاجون إلى صفحات هبوط احترافية دون الحاجة إلى توظيف مطورين
- أصحاب الشركات الصغيرة الذين يرغبون في إجراء تعديلات سريعة على مواقعهم الإلكترونية دون الحاجة إلى عقود مكلفة مع وكالات
- رواد الأعمال الذين يختبرون أفكارهم ويحتاجون إلى التحرك بسرعة ولا يمكنهم الانتظار لأسابيع حتى تنتهي دورات التطوير
- أي شخص يدير موقعًا على ووردبريس وقد سئم من التعامل مع أدوات إنشاء الصفحات وإعدادات المكونات الإضافية
توفير الوقت والتكلفة
دعوني أوضح الأمر. كانت الصفحة المقصودة التي أنشأناها ستكلفني:
- 2,000 إلى 5,000 دولار أمريكي إذا قمت بتعيين مصمم ومطور عبر Upwork أو Fiverr
- 2-3 أسابيع من المراجعات المتبادلة وإدارة المشروع
- تكاليف مستمرة كلما أردت إجراء تغيير أو تحديث
بل قمنا بإنشائها في غضون ساعات قليلة من العمل المكثف. والجودة احترافية. والصفحة متاحة الآن. ويمكنني إجراء تغييرات في أي وقت بمجرد الطلب.
هذا الأمر ليس مجرد مسألة راحة — بل إنه يُحدث تغييرًا جذريًا في الطريقة التي يمكنك بها العمل كمؤسس منفرد أو ضمن فريق صغير.
توصيتي الصادقة
إذا كنت تدير موقعًا على ووردبريس ولم تستخدم «كلود» مع «WP Vibe» بعد، فأنت تبذل جهدًا أكبر بكثير مما ينبغي.
لا يتعلق الأمر هنا باستبدال المطورين، بل بمنح نفسك القدرة على العمل بسرعة أفكارك. لاختبار الأمور بسرعة. وللتكرار دون عوائق. ولإنشاء صفحات ذات جودة احترافية دون الحاجة إلى تعلم Divi، أو حل مشكلات CSS، أو فهم إعدادات مكونات SEO الإضافية.
لقد بدأت هذا المشروع وأنا متشكك، لكنني انتهيت منه وأنا معجب حقًا. هذا هو المستقبل الذي ستصبح عليه طريقة إنشاء وإدارة المواقع الإلكترونية — وهو متاح الآن.
البدء
إذا كنت ترغب في تجربة ذلك بنفسك:
- قم بتثبيت المكون الإضافي WP Vibe على موقع WordPress الخاص بك
- اربط موقعك بـ Claude (يستغرق الأمر حوالي دقيقتين)
- ابدأ بوصف ما تريد إنشاؤه أو تغييره
- شاهد ما يحدث في الوقت الفعلي
الصفحة الرئيسية التي أنشأناها متاحة الآن على amrselim.com إذا كنت ترغب في الاطلاع على النتائج. كل قسم، وكل نقطة توقف تفاعلية، وكل تفصيل متعلق بتحسين محركات البحث — تم إنشاؤها جميعًا من خلال محادثة مع كلود.
هذا ليس مجرد كلام. إنها ببساطة طريقة أفضل للبناء.
هل لديك أسئلة حول استخدام Claude مع WordPress؟ اترك تعليقًا أدناه أو تواصل معي عبر LinkedIn. يسعدني أن أسمع عن تجربتك.