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

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

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

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

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

الاستضافة مع all-inkl.com وشركائها

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

• نطاق تطوير/تجريبي (Staging-Domain)
• إدارة مريحة للبريد الإلكتروني
• شهادات 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 هو أكثر من مجرد تحديث عادي: تم إعادة بناء أداة البناء داخليًا بالكامل ووضعها على أساس حديث وأكثر رشاقة بشكل ملحوظ. وهذا يضمن أوقات تحميل أسرع بشكل ملحوظ، وعبء كود أقل، وأساسًا أفضل للوظائف المستقبلية.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إنشاء محتوى تحسين محركات البحث (SEO)

من الآن فصاعدًا، نبدأ في إنشاء صفحة تلو الأخرى – مع الأخذ في الاعتبار RankMath على الفور. العنوان، الوصف، og:image، h1، h2، h3... عناوين ونصوص صديقة لتحسين محركات البحث وسهلة القراءة مع إبرازات ذات معنى ومواد صور معبرة ومحسنة جيدًا. 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، الخرائط، الصور، مقاطع الفيديو، الأخبار، إلخ... نحن مزودو خدمة ومسؤولون أيضًا عن البيانات التي يراها الزائر. غالبًا ما تكون هذه البيانات هي التي تجذب الزائر إلى موقع الويب في المقام الأول أو تدفعه لإجراء مكالمة.