تطوير الويب CMS باستخدام ووردبريس و DIVI، برمجة الإضافات

مقدمة إلى ووردبريس

يمكن للشركات والأفراد تولي جزء من تطوير الويب باستخدام ووردبريس و DIVI بأنفسهم. يمكننا تولي برمجة الإضافات الخاصة، وتحسين محركات البحث (SEO)، والتحديد الجغرافي (GEO)، وتطبيقات الذكاء الاصطناعي (AI). تعمل أنظمة إدارة المحتوى (CMS) على تسهيل إنشاء وإدارة مواقع الويب بشكل كبير. أشهر أنظمة إدارة المحتوى هي WordPress، Joomla، Drupal، Contao و TYPO3، حيث يشغل ووردبريس حاليًا حوالي 43% من جميع مواقع الويب حول العالم، مما يجعله النظام الأكثر استخدامًا بفارق كبير.

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

طالما أن الأنظمة تعمل بثبات وتلتزم بجميع المتطلبات التقنية (إصدار PHP الحالي، تحديثات الأمان، اللائحة العامة لحماية البيانات (DSGVO)، الأداء)، فلا يوجد سبب لإعادة تطوير كاملة. بشكل عام، تعمل مواقع الويب عادةً لمدة تتراوح بين 4 و 6 سنوات قبل أن يتم إعادة تصميمها بشكل جذري.

تطوير الويب CMS باستخدام ووردبريس و DIVI

تطوير الويب CMS باستخدام ووردبريس و DIVI، برمجة الإضافات

مقدمة إلى ووردبريس

تعمل أنظمة إدارة المحتوى (CMS) على تسهيل إنشاء وإدارة مواقع الويب بشكل كبير. بدون الحاجة إلى مهارات برمجية، يمكن للشركات والأفراد إدارة المحتوى وتخصيص التصميم وجعل مواقع الويب تفاعلية. أشهر أنظمة إدارة المحتوى هي WordPress، Joomla، Drupal، Contao و TYPO3، حيث يشغل ووردبريس حاليًا حوالي 43% من جميع مواقع الويب حول العالم، مما يجعله النظام الأكثر استخدامًا بفارق كبير.

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

طالما أن الأنظمة تعمل بثبات وتلتزم بجميع المتطلبات التقنية (إصدار PHP الحالي، تحديثات الأمان، اللائحة العامة لحماية البيانات (DSGVO)، الأداء)، فلا يوجد سبب لإعادة تطوير كاملة. بشكل عام، تعمل مواقع الويب عادةً لمدة تتراوح بين 4 و 6 سنوات قبل أن يتم إعادة تصميمها بشكل جذري.

الاستضافة لدى all-inkl.com وغيرها

لا يتطلب ووردبريس الكثير بشكل أساسي. يكفي PHP و MySQL/MariaDB، وبالتالي فإن صفحات ووردبريس قابلة للتشغيل لدى جميع مزودي الخدمة تقريبًا. ومع ذلك، يتوقع المرء الآن المزيد - على سبيل المثال:

  • نطاق تطوير/تجريبي
  • إدارة مريحة للبريد الإلكتروني
  • شهادات LetsEncrypt لـ HTTPS بما في ذلك التجديد التلقائي
  • وصول FTP/SFTP أو مدير ملفات الويب
  • نسخ احتياطية تلقائية واستعادة سهلة
  • دعم سريع ومجاني
  • ذاكرة وصول عشوائي كافية وإصدارات PHP حديثة (مثل 8.1/8.2+)
  • إمكانية إجراء إعدادات DNS خاصة
  • نقل سريع وتوفير رموز المصادقة بضغطة زر
  • مساعد تثبيت سهل لووردبريس وغيرها

أحد المزودين المفضلين منذ سنوات عديدة هو all-inkl.com (رابط تابع)، الذي يتميز بأسعار باقات عادلة للغاية ودعم ممتاز. من يرغب فقط في استضافة أنظمة CMS سيجد هذا الخيار الأفضل.

من يحتاج إلى MongoDB أو Node.js أو Express بالإضافة إلى ذلك، يجب عليه إما استئجار خادم خاص/VPS أو اللجوء إلى مزودين يقدمون هذه الوظائف. ومع ذلك، لا تزال 99% من جميع مواقع الويب الكلاسيكية لا تحتاج إلى ذلك. ولكن، بفضل الأدوات المدعومة بالذكاء الاصطناعي، تتزايد التطبيقات الفردية - مثل تطبيقات الويب، واجهات برمجة التطبيقات (APIs)، أو الأتمتة. nuonu.com هو أيضًا أحد هذه التطبيقات، الذي يوسع ووردبريس بإضافات خاصة به، وبالتالي يوفر وظائف فردية للغاية.

لماذا ووردبريس و DIVI؟

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

مزايا DIVI كمنشئ صفحات

يتميز DIVI عن العديد من منشئي الصفحات الآخرين بأنه يمكن استخدامه كقالب + منشئ كامل ولا يتطلب قالبًا إضافيًا. هذا يعني:

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

جديد: DIVI 5 – الأداء والأمان المستقبلي

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

  • نظام أساسي جديد ورشيق – تم تطوير المنشئ من الألف إلى الياء ويعمل بكفاءة أكبر في استهلاك الموارد.
  • أوقات تحميل أسرع ومحرر سريع الاستجابة – تستفيد الصفحات المعقدة التي تحتوي على العديد من الوحدات بشكل خاص من البنية الجديدة.
  • عدد أقل من الأكواد المختصرة، كود أنظف – وهذا يسهل الصيانة طويلة الأمد، والترحيل، ويؤثر إيجابًا على تحسين محركات البحث (SEO).
  • وظائف تصميم جديدة مثل متغيرات التصميم، الوحدات الموسعة، الصفوف المتداخلة، ونقاط التوقف القابلة للتعديل بشكل فردي لتخطيطات استجابة أكثر دقة.
  • معالجة أفضل للمشاريع الكبيرة – تم تصميم DIVI 5 للمواقع الشاملة التي تحتوي على العديد من القوالب والعناصر العالمية وتخطيطات المكتبة.

الوضع الحالي لدينا: يعمل موقع nuonu.com بالفعل على نسخة DIVI 5 التجريبية. يمكن ترحيل جميع مشاريع العملاء التي يتم تنفيذها حاليًا باستخدام DIVI 4، بعد الإصدار النهائي لـ DIVI 5، بشكل تدريجي ومتحكم فيه – ويفضل أن يكون ذلك أولاً في بيئة تجريبية. وبهذا تبقى الصفحات الحالية مستقرة، ولكن يمكنها الاستفادة من مزايا الأداء والراحة للإصدار الجديد بمجرد أن يكون ذلك منطقيًا وآمنًا.

البنية العامة لمواقع الويب الحديثة

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

  • الألوان والخطوط يجب أن تتناسب بشكل متناسق مع هوية الشركة.
  • الشعار والمسافات يجب دمجها بشكل متناسق في التخطيط.
  • رأس وتذييل مخصص لتصفح سهل.
  • تذييل منظم، الذي يحتوي على روابط قانونية، وملفات تعريف وسائل التواصل الاجتماعي، وطرق الاتصال.
  • تحديد الصفحة الرئيسية، بحيث يتم تعيين الصفحة الرئيسية عبر “الإعدادات > قراءة”.

المتطلبات القانونية: البصمة، حماية البيانات، وموافقة ملفات تعريف الارتباط

تحتاج كل صفحة ويب إلى بصمة (Impressum) وسياسة خصوصية. بالإضافة إلى ذلك، يلزم وجود أداة موافقة على ملفات تعريف الارتباط (Cookie Consent) تعمل بشكل صحيح لتلبية متطلبات اللائحة العامة لحماية البيانات (DSGVO) وقانون حماية البيانات والخصوصية في الاتصالات السلكية واللاسلكية (TTDSG). مثال على ذلك هو Reel Cookie Consent، والذي يمكن اختباره وتوسيعه بسكريبتات خاصة، لدمج Matomo بما يتوافق مع اللائحة العامة لحماية البيانات (DSGVO) على سبيل المثال.

استخدام Matomo في نطاق فرعي

يمكن تشغيل Matomo إما على النطاق الرئيسي أو على نطاق فرعي. مزايا استخدام النطاق الفرعي هي:

  • تحكم أفضل في البيانات والأمان – تبقى البيانات بالكامل على الخادم الخاص بك.
  • تكوين صديق للخصوصية، حيث لا يتم نقل البيانات إلى أطراف ثالثة.
  • خيارات إلغاء الاشتراك الخاصة للمستخدمين، لتلبية متطلبات اللائحة العامة لحماية البيانات (DSGVO).

إضافات أساسية لموقع ووردبريس-الويب

لإنشاء موقع ووردبريس احترافي وعملي، تعتبر بعض الإضافات من وجهة نظرنا لا غنى عنها تقريبًا (يمكن أن تختلف القائمة بالطبع حسب المشروع):

  • RankMath – إضافة SEO مع دعم المخطط، وعمليات إعادة التوجيه، والعديد من المساعدات على الصفحة.
  • Happy Files – إدارة الملفات مع مجلدات للوسائط، المنشورات، الصفحات، وغيرها الكثير.
  • Reel Cookie Consent – إدارة ملفات تعريف الارتباط (أو بدائل مثل Real Cookie Banner، Borlabs Cookie، أو Complianz).
  • DIVI Supreme – وحدات وتأثيرات متقدمة لـ DIVI.
  • WP Armour – حماية ضد رسائل البريد العشوائي في النماذج.
  • AIOS (All in One Security) – إضافة أمان شاملة لتعزيز أمان تسجيل الدخول، نظام الملفات، وجدار الحماية.

تكوين الأمان في ووردبريس

بعد التثبيت، يجب تحسين إعدادات الأمان فورًا:

  • تفعيل AIOS و WP Armour للحماية ضد هجمات القوة الغاشمة، والبريد العشوائي، وهجمات الروبوتات البسيطة.
  • تغيير اسم مستخدم المسؤول الافتراضي لجعل الهجمات المستهدفة أكثر صعوبة.
  • المصادقة الثنائية لمزيد من الأمان (اختياري، ولكن موصى به).
  • نسخ احتياطية منتظمة إعداد (على سبيل المثال، باستخدام Duplicator، UpdraftPlus، أو BackWPup) واختبار الاستعادة.

تخصيص إعدادات وسائط ووردبريس

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

مرحلة التصميم بعد التثبيت الأساسي

بعد التثبيت الأساسي، يبدأ التصميم الفعلي:

  • تحديد الألوان والخطوط والمسافات – في DIVI عالميًا كأساس للتصميم (أو في DIVI 5 بالإضافة إلى ذلك عبر متغيرات التصميم).
  • إنشاء رأس وتذييل مخصص لجعل التصفح سهلًا.
  • تخصيص التذييل، الذي يحتوي على بصمة، وسياسة خصوصية، وروابط وسائل التواصل الاجتماعي، وطرق الاتصال.
  • جعل أرقام الهواتف قابلة للنقر باستخدام tel: وعناوين البريد الإلكتروني باستخدام mailto:.
  • إنشاء الصفحة الرئيسية ثم تعيينها كصفحة رئيسية تحت “الإعدادات > قراءة”.

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

عملية التطوير المشتركة

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

الشعار والأيقونة المفضلة (Favicon)

غالبًا ما لا تتوفر تصاميم قديمة أو لا توجد تصاميم خاصة بعد. في هذه الحالة، نقوم أيضًا بإنشاء شعارات وأيقونات مفضلة (Favicons) كملفات متجهة (Vector) وصور PNG شفافة. بفضل Midjourney و Illustrator، يمكننا توفير مجموعة مختارة من الشعارات ثنائية وثلاثية الأبعاد حسب الطلب. كما نتولى عملية اختيار الاسم بما في ذلك التحقق وتسجيل النطاقات المتاحة أو نقلها.

روابط وسائل التواصل الاجتماعي

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

إنشاء محتوى متوافق مع SEO

من الآن فصاعدًا، نبدأ بإنشاء صفحة تلو الأخرى – مع الأخذ في الاعتبار RankMath فورًا. العنوان، الوصف، og:image، h1، h2، h3 ... عناوين ونصوص سهلة القراءة ومتوافقة مع SEO مع إبرازات ذات معنى، بالإضافة إلى مواد صور معبرة ومحسّنة جيدًا. SEO أولاً يعني: يتم تصميم المحتوى ليس فقط للزوار، بل أيضًا لمحركات البحث ووسائل التواصل الاجتماعي. ما يجب مراعاته والأدوات التي تحتاجونها لذلك، ستجدونها في دليل استراتيجية SEO.

الانتهاء من جميع المحتويات وبيانات SEO

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

مرحلة الاختبار مع تحسينات الأداء

الصفحة الجاهزة هي دائمًا تجربة – ولكن يجب اختبارها الآن بشكل شامل. نقوم بالتحقق من:

  • جميع الروابط الداخلية والخارجية،
  • جميع توصيات RankMath،
  • العرض في الشبكات الاجتماعية (على سبيل المثال، باستخدام Facebook Debugger / URL Debuggers)،
  • أوقات التحميل باستخدام اختبارات السرعة (على سبيل المثال، PageSpeed Insights، GTmetrix، WebPageTest).

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

إنشاء خريطة الموقع والتسجيل في Google Search Console

الخطوة النهائية في الإنشاء هي التسجيل في Google Search Console. يتم إيداع خريطة الموقع التي تم إنشاؤها بواسطة RankMath أو ووردبريس، حتى تتمكن Google من فهرسة جميع المحتويات ذات الصلة بشكل منظم.

المراقبة قصيرة وطويلة الأمد

بعد بضعة أيام، يجب أن تظهر الصفحة في نتائج البحث. باستخدام site:domain.de أو مباشرة في Google Search Console، نتحقق مما إذا كانت جميع المحتويات الهامة قد تم فهرستها بالفعل. في هذه المرحلة، يجب أن تظهر أي أخطاء محتملة ويتم تصحيحها.

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

إدخال Google Business

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