نظام إدارة محتوى WordPress بلا واجهة أمامية (Headless CMS) مع Next.js و ACF وهندسة مكونات قابلة لإعادة الاستخدام

لقد قمنا ببناء هندسة WordPress بلا واجهة أمامية (headless WordPress) + Next.js باستخدام Advanced Custom Fields (ACF) كطبقة نمذجة محتوى مرنة، ونظام مكونات قابل لإعادة الاستخدام على الواجهة الأمامية (frontend)، وتحسين آلي لمحركات البحث (SEO) في جميع أنحاء الموقع.

الهندسة المعمارية

• نظام إدارة المحتوى (CMS): WordPress (بلا واجهة أمامية) مع ACF Pro لنمذجة المحتوى المنظم
• طبقة الـ API: WPGraphQL + WPGraphQL for ACF لعرض المحتوى المكتوب (typed content) عبر GraphQL
• الواجهة الأمامية (Frontend): Next.js مع App Router و React Server Components و TypeScript
• التصميم (Styling): Tailwind CSS لتصميم يعتمد على الأدوات (utility-first) ومتوافق مع نظام التصميم (design-system-aligned)
• تحسين محركات البحث (SEO): Next.js Metadata API، بيانات JSON-LD المنظمة، وتوليد خرائط المواقع (sitemap) الآلي
• الاستضافة (Hosting): Vercel (للواجهة الأمامية) + استضافة WordPress مُدارة (لنظام إدارة المحتوى)
• الوسائط (Media): تحسين الصور في Next.js (Next.js Image optimization) مع مكتبة وسائط WordPress كمصدر

نمذجة المحتوى باستخدام ACF

حقول المحتوى المرنة (Flexible Content Fields)

تسمح حقول ACF Flexible Content للمحررين بإنشاء صفحات من كتل محتوى محددة مسبقًا. ترتبط كل كتلة مباشرة بمكون React على الواجهة الأمامية (frontend)، وتغطي أنماطًا شائعة مثل أقسام البطل (hero sections)، وشبكات الميزات (feature grids)، وعروض الشهادات الدوارة (testimonial carousels)، وأزرار الحث على اتخاذ إجراء (CTAs)، وقوائم الأسئلة الشائعة القابلة للطي (FAQ accordions)، وعدادات الإحصائيات (stats counters)، وتخطيطات الصور والنصوص (image-text layouts)، ومقاطع الفيديو المضمنة (video embeds)، وجداول الأسعار (pricing tables)، وخلاصات المدونة (blog feeds).

حقول Repeater & Group

• حقول Repeater للقوائم (أعضاء الفريق، عناصر المحفظة، إدخالات الجدول الزمني)
• حقول Group للبيانات المتداخلة المنظمة (كتل العناوين، روابط وسائل التواصل الاجتماعي، تجاوزات تحسين محركات البحث SEO)
• حقول العلاقة (Relationship fields) لربط المنشورات والصفحات وأنواع المنشورات المخصصة (custom post types)
• صفحات الخيارات (Options pages) للإعدادات العامة (الرأس، التذييل، روابط وسائل التواصل الاجتماعي، ألوان العلامة التجارية)

هندسة المكونات القابلة لإعادة الاستخدام

مبادئ تصميم المكونات

تتبع الواجهة الأمامية (frontend) هندسة معمارية معيارية (modular architecture) ذات طبقات متميزة:

• مكونات الكتل (Block components) — مكون React واحد لكل كتلة ACF Flexible Content
• مكونات واجهة المستخدم البدائية (Primitive UI components) — عناصر قابلة لإعادة الاستخدام مثل الأزرار والبطاقات والشارات
• مكونات التخطيط (Layout components) — الرأس والتذييل والتنقل ومغلفات الحاويات (container wrappers)
• مكونات تحسين محركات البحث (SEO components) — مولدات المخططات (Schema generators) وأدوات علامات الـ meta

نمط حل الكتل (Block Resolver Pattern)

يقوم مُحلّل مركزي (central resolver) بربط أنواع كتل ACF بمكونات React، مما يمكّن المحررين من إنشاء الصفحات دون تدخل المطورين:

1. يختار محرر WordPress الكتل من قائمة منسدلة ويملأ الحقول
2. يعرض WPGraphQL الصفحة كـ JSON منظم مع أنواع الكتل وبيانات الحقول
3. يجلب Next.js بيانات الصفحة في وقت البناء (ISR) أو وقت الطلب (SSR)
4. يقوم مُحلّل الكتل (Block resolver) بالمرور عبر مصفوفة الكتل ويعرض مكون React المطابق
5. يتلقى كل مكون بيانات حقل ACF الخاصة به كـ typed props

تحسين محركات البحث (SEO Optimization)

تحسين محركات البحث التقني (Technical SEO)

• علامات الـ meta الديناميكية — يتم إنشاء علامات العنوان والوصف و Open Graph و Twitter Card لكل صفحة من بيانات CMS
• عناوين URL الأساسية (Canonical URLs) — توليد آلي لعلامة canonical لمنع المحتوى المكرر
• توليد خريطة الموقع (Sitemap Generation) — خريطة موقع XML ديناميكية مبنية من بيانات صفحات/منشورات WordPress في وقت البناء
• robots.txt — توليد برمجي بقواعد تراعي البيئة
• البيانات المنظمة (Structured Data) — مخطط JSON-LD لأنواع Organization و Article و FAQ و BreadcrumbList و Product

تحسين محركات البحث المتعلق بالأداء (Performance SEO) (Core Web Vitals)

• التوليد الثابت (Static Generation) (ISR) — يتم عرض الصفحات مسبقًا وإعادة التحقق منها عند تغيير المحتوى عبر webhook
• تحسين الصور (Image Optimization) — تحويل تلقائي إلى WebP/AVIF، التحميل الكسول (lazy loading)، و srcset المتجاوب
• تحسين الخطوط (Font Optimization) — تحميل خطوط مخصصة بدون إزاحة في التخطيط (zero-layout-shift)
• تقسيم الكود (Code Splitting) — تقسيم تلقائي للكود لكل مسار باستخدام React Server Components
• التخزين المؤقت عند الحافة (Edge Caching) — شبكة حافة عالمية (global edge network) لتحقيق TTFB أقل من 100 مللي ثانية

تحسين محركات البحث المتعلق بالمحتوى (Content SEO)

• حقول تحسين محركات البحث لكل صفحة (Per-page SEO fields) — تجاوز العنوان الوصفي (meta title) والوصف وصورة OG عبر الحقول المخصصة
• مسارات التنقل (Breadcrumbs) — تنقل مسارات تنقل (breadcrumb navigation) مُنشأ تلقائيًا مع ترميز المخطط (schema markup)
• الربط الداخلي (Internal Linking) — حقول العلاقات (Relationship fields) تُمكّن اقتراحات الروابط الداخلية المنظمة
• فرض النص البديل (Alt Text Enforcement) — نص بديل (alt text) مطلوب لجميع حقول الصور

تدفق البيانات من WordPress إلى Next.js

1. تغيير المحتوى — يقوم المحرر بنشر أو تحديث المحتوى في لوحة تحكم WordPress
2. تفعيل Webhook — يطلق WordPress webhook إلى نقطة نهاية إعادة التحقق (revalidation endpoint) في Next.js
3. إعادة التحقق (ISR Revalidation) — يعيد Next.js إنشاء الصفحات المتأثرة فقط
4. إلغاء صلاحية CDN — تُقدم الصفحات المحدثة من الحافة (edge) في غضون ثوانٍ من النشر

الميزات الرئيسية

1. منشئ صفحات مرئي (Visual Page Builder) — يقوم المحررون بإنشاء صفحات من كتل ACF دون الحاجة إلى لمس الكود
2. واجهة برمجة تطبيقات محتوى مُحددة النوع (Typed Content API) — WPGraphQL + ACF توفر مخطط GraphQL مُحدد النوع بالكامل
3. مكتبة المكونات (Component Library) — أكثر من 10 كتل قابلة لإعادة الاستخدام تغطي جميع أنماط صفحات التسويق الشائعة
4. ISR + Webhooks — تحديثات المحتوى تظهر على الموقع المباشر في غضون ثوانٍ
5. أتمتة تحسين محركات البحث (SEO Automation) — بيانات منظمة، خرائط مواقع، وعلامات meta يتم إنشاؤها من بيانات CMS
6. Core Web Vitals — صور وخطوط محسّنة وتقسيم الكود للحصول على أعلى درجات Lighthouse
7. وضع المعاينة (Preview Mode) — زر معاينة WordPress يعرض المحتوى المسودة في واجهة Next.js الأمامية
8. جاهز للغات متعددة (Multi-Language Ready) — تكامل ACF + WPML/Polylang للمحتوى الدولي