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

لهذا السبب، تعتمد أنظمة إدارة المحتوى الإخبارية عادة على مكونين أساسيين:

• Sliders لعرض مجموعة محدودة من الأخبار البارزة بطريقة بصرية.
• Widgets لبناء وحدات مستقلة يمكن توزيعها داخل الصفحة وإعادة ترتيبها وإدارتها من لوحة التحكم.

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

أولًا: ما الفرق بين Slider وWidget؟

قبل تصميم الصفحة، يجب تحديد مسؤولية كل مكون بوضوح.

Slider

الـSlider هو مساحة مخصصة لعرض عدد صغير من العناصر البارزة، غالبًا باستخدام صورة كبيرة وعنوان واضح وإمكانية التنقل بين العناصر.

يُستخدم عادة في:

• الخبر الرئيسي.
• أهم أخبار اليوم.
• تغطية حدث كبير.
• ملف خاص أو تحقيق موسع.
• مجموعة أخبار يختارها فريق التحرير يدويًا.

الـSlider ليس مناسبًا لعرض عشرات الأخبار. وظيفته الأساسية هي إبراز عدد محدود من القصص ذات الأولوية العالية.

Widget

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

أمثلة شائعة:

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

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

ابدأ من الخريطة التحريرية وليس من شكل التصميم

من الأخطاء الشائعة أن يبدأ الفريق برسم مربعات على الصفحة ثم يبحث لاحقًا عن المحتوى الذي سيملأها.

الطريقة الأفضل هي البدء بأسئلة تحريرية واضحة:

1. ما أهم خبر يجب أن يراه الزائر فورًا؟
2. ما الأقسام التي تمثل هوية الموقع؟
3. ما المحتوى الذي يتغير كل عدة دقائق؟
4. ما المحتوى الذي يحتاج اختيارًا يدويًا من المحرر؟
5. ما الوحدات التي تُبنى تلقائيًا من البيانات؟
6. ما الفرق بين تجربة سطح المكتب وتجربة الهاتف؟

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

بنية مقترحة للصفحة الرئيسية

يمكن بناء صفحة إخبارية متوازنة باستخدام الطبقات التالية.

1. شريط الأخبار العاجلة

وحدة صغيرة أعلى الصفحة تعرض خبرًا عاجلًا أو مجموعة قصيرة من التنبيهات.

يفضل أن تحتوي على:

• عنوان مختصر.
• رابط مباشر إلى الخبر.
• إمكانية التفعيل والإيقاف.
• تاريخ انتهاء اختياري حتى لا يظل الخبر العاجل ظاهرًا بعد انتهاء أهميته.

يجب ألا يتحول شريط العاجل إلى قائمة دائمة؛ لأن الإفراط في استخدامه يفقده قيمته.

2. المنطقة الرئيسية Hero Area

هذه هي أهم مساحة في الصفحة، ويمكن تنفيذها كـSlider أو كتخطيط ثابت يجمع خبرًا رئيسيًا مع عدة أخبار مساندة.

أحد التخطيطات العملية:

• خبر رئيسي كبير يحتل نحو ثلثي العرض.
• خبران أو ثلاثة أخبار أصغر في الجانب الآخر.
• عنوان واضح وصورة محسنة ومعلومة زمنية مختصرة.

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

3. Widget أحدث الأخبار

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

يمكن أن تظهر كقائمة نصية سريعة، لأن هدفها هو متابعة التدفق اللحظي وليس تقديم تجربة بصرية ثقيلة.

إعداداتها الأساسية قد تشمل:

• عدد الأخبار.
• الأقسام المستبعدة.
• إظهار وقت النشر.
• التحديث التلقائي أو التخزين المؤقت لفترة قصيرة.

4. Widgets الأقسام الرئيسية

يخصص لكل قسم مهم Widget مستقل، مثل السياسة، والاقتصاد، والرياضة، والتكنولوجيا.

لا يجب أن تكون جميع الوحدات متطابقة. التنويع المدروس يساعد القارئ على التمييز بين المناطق المختلفة.

أمثلة:

• قسم الاقتصاد: خبر كبير وأربعة عناوين صغيرة.
• قسم الرياضة: شبكة صور من عمودين.
• قسم التكنولوجيا: بطاقات أفقية مختصرة.
• مقالات الرأي: صورة الكاتب والعنوان فقط.

5. Widget الأكثر قراءة

تعتمد هذه الوحدة على بيانات الزيارات خلال فترة زمنية محددة.

من الأفضل ألا تُحسب الأكثر قراءة منذ بداية الموقع، بل خلال نافذة زمنية مفيدة، مثل آخر 24 ساعة أو آخر 7 أيام، حتى تظل النتائج حديثة.

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

6. Widget المحتوى المرئي

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

يفضل أن توضح البطاقة نوع المحتوى باستخدام رمز بصري بسيط، مع صورة بنسبة أبعاد موحدة لتجنب تغير ارتفاع الصفحة أثناء التحميل.

7. المساحات الإعلانية

يجب اعتبار الإعلان Widget مستقلًا داخل مخطط الصفحة، لا كعنصر يُضاف عشوائيًا بعد اكتمال التصميم.

بهذه الطريقة يمكن التحكم في:

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

كيف نصمم نموذج البيانات للـSlider؟

يجب ألا يعتمد الـSlider على مصفوفة بسيطة من معرفات الأخبار فقط. من الأفضل أن يملك كل عنصر بيانات واضحة تسمح بالتحكم التحريري.

مثال منطقي للبيانات:

{
  "sliderId": 12,
  "name": "الواجهة الرئيسية",
  "isActive": true,
  "items": [
    {
      "postId": 1542,
      "order": 1,
      "customTitle": null,
      "customImageId": null,
      "startsAt": null,
      "endsAt": null
    }
  ]
}

وجود حقول مثل customTitle وcustomImageId يسمح للمحرر بتخصيص طريقة ظهور الخبر داخل الـSlider دون تغيير عنوان المقال أو صورته الأصلية.

كما أن حقول البداية والنهاية تساعد في جدولة الحملات أو التغطيات الخاصة.

كيف نصمم نموذج البيانات للـWidget؟

الـWidget يحتاج عادة إلى ثلاثة أجزاء:

1. الهوية: الاسم، النوع، والمكان داخل الصفحة.
2. مصدر البيانات: قسم، وسم، قائمة مختارة، أو استعلام تلقائي.
3. طريقة العرض: قالب بصري وإعدادات عدد العناصر والصور والعناوين.

مثال:

{
  "widgetId": 31,
  "type": "category_posts",
  "title": "اقتصاد",
  "source": {
    "categoryId": 8,
    "sortBy": "published_at",
    "direction": "desc"
  },
  "view": {
    "template": "featured_with_list",
    "itemsCount": 5,
    "showImages": true,
    "showExcerpt": false
  },
  "cacheSeconds": 120
}

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

الاختيار اليدوي أم التلقائي؟

كل Widget يجب أن يحدد بوضوح كيف يحصل على محتواه.

الاختيار اليدوي

يختار المحرر الأخبار ويرتبها بنفسه.

مناسب لـ:

• الخبر الرئيسي.
• مختارات المحرر.
• الملفات الخاصة.
• الحملات التحريرية.

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

الاختيار التلقائي

يُبنى المحتوى من استعلام، مثل أحدث أخبار قسم معين.

مناسب لـ:

• أحدث الأخبار.
• الأكثر قراءة.
• آخر فيديوهات.
• آخر مقالات كاتب.

ميزته أنه يتحدث تلقائيًا، لكن يجب وضع قواعد استبعاد ومنع التكرار والتحقق من توفر الصور والبيانات المطلوبة.

النموذج الهجين

يمكن للمحرر تثبيت خبر أو أكثر في البداية، ثم يكمل النظام بقية العناصر تلقائيًا.

هذا النموذج مفيد جدًا؛ لأنه يجمع بين التحكم التحريري واستمرار تحديث الوحدة.

منع تكرار الخبر في الصفحة

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

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

$usedPostIds = [];

$heroPosts = $heroService->getPosts();
$usedPostIds = array_merge($usedPostIds, $heroPosts->pluck('id')->all());

$latestPosts = $postService->latest(
    limit: 10,
    excludeIds: $usedPostIds
);

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

ترتيب الـWidgets وإدارة الصفحة

من الأفضل ألا يكون ترتيب الصفحة مكتوبًا داخل القالب بصورة ثابتة. يمكن تخزين مخطط الصفحة كقائمة من المناطق والمكونات.

مثال:

[
  { "position": 1, "type": "breaking_news", "id": 3 },
  { "position": 2, "type": "slider", "id": 12 },
  { "position": 3, "type": "widget", "id": 31 },
  { "position": 4, "type": "ad", "id": 7 },
  { "position": 5, "type": "widget", "id": 44 }
]

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

هل نستخدم Page Builder كاملًا؟

قد يبدو من الأفضل منح المحرر حرية سحب أي عنصر إلى أي مكان، لكن الحرية غير المحدودة قد تؤدي إلى صفحات بطيئة وغير متناسقة.

في المواقع الإخبارية، يكون الحل العملي غالبًا هو Page Builder مقيد:

• مناطق محددة داخل الصفحة.
• أنواع Widgets معتمدة.
• قوالب جاهزة لكل نوع.
• قيود على عدد العناصر.
• معاينة قبل النشر.
• منع وضع بعض المكونات في مناطق غير مناسبة.

بهذا يحصل فريق التحرير على المرونة دون التضحية بالهوية البصرية أو الأداء.

تصميم الصفحة للهاتف أولًا

نسبة كبيرة من زيارات المواقع الإخبارية تأتي من الهواتف، لذلك لا يكفي تصغير نسخة سطح المكتب.

عند تصميم الـSliders والـWidgets للهاتف:

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

يمكن أن يظهر Slider سطح المكتب كخبر رئيسي واحد وقائمة أفقية قابلة للتمرير على الهاتف، دون الحاجة إلى الاحتفاظ بالتخطيط نفسه حرفيًا.

الأداء: أكبر تحدٍ في الصفحة الرئيسية

الصفحة الرئيسية تجمع عددًا كبيرًا من الاستعلامات والصور والمكونات. إذا نُفذ كل Widget باستعلام منفصل في كل زيارة، ستتحول المرونة إلى مشكلة أداء.

1. التخزين المؤقت لكل Widget

لا تحتاج جميع الوحدات إلى مدة التخزين نفسها.

• الأخبار العاجلة: مدة قصيرة جدًا.
• أحدث الأخبار: من 30 إلى 120 ثانية حسب معدل النشر.
• الأكثر قراءة: عدة دقائق.
• أقسام بطيئة التحديث: مدة أطول.
• محتوى ثابت: يمكن تخزينه لفترات طويلة.

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

2. إبطال الكاش عند التغيير

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

هذا يتطلب معرفة العلاقة بين الأحداث التحريرية والمكونات المتأثرة.

3. تجميع الاستعلامات

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

4. تحسين الصور

يجب أن يدعم النظام:

• أحجامًا متعددة للصورة.
• تنسيقات حديثة مثل WebP أو AVIF عند توفرها.
• Lazy Loading للصور خارج الجزء المرئي.
• تحديد العرض والارتفاع لمنع تغير التخطيط.
• صورة بديلة عند غياب الصورة الأصلية.

5. تحميل الأولويات

صورة الخبر الرئيسي أهم من صورة خبر في نهاية الصفحة. يمكن تحميل الصورة الرئيسية مبكرًا، وتأجيل بقية الصور والمكونات غير الحرجة.

SEO داخل Sliders وWidgets

رغم أن الصفحة ديناميكية، يجب أن تظل بنيتها مفهومة لمحركات البحث.

• استخدم عنوان h1 واحدًا مناسبًا للصفحة.
• استخدم h2 لعناوين الوحدات الرئيسية.
• اجعل عناوين الأخبار روابط نصية حقيقية.
• لا تعتمد على JavaScript وحده لإظهار المحتوى الأساسي.
• أضف نصوصًا بديلة منطقية للصور.
• لا تكرر العنوان نفسه داخل الوحدة دون داعٍ.
• تأكد من أن التنقل داخل Slider لا يخفي الأخبار عن محركات البحث أو مستخدمي لوحة المفاتيح.

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

إتاحة الاستخدام Accessibility

الـSlider من أكثر المكونات التي تُنفذ بطريقة غير مريحة للمستخدمين.

يجب مراعاة:

• إمكانية التنقل باستخدام لوحة المفاتيح.
• وجود زر لإيقاف الحركة التلقائية إن وُجدت.
• عدم تغيير الشريحة بسرعة تمنع قراءة العنوان.
• وجود تسميات واضحة للأزرار.
• تباين كافٍ بين النص والخلفية.
• عدم الاعتماد على اللون وحده لتوضيح نوع المحتوى.

وفي كثير من الحالات، يكون Slider غير متحرك تلقائيًا أفضل من حركة مستمرة تشتت القارئ.

صلاحيات فريق التحرير

ليس كل مستخدم يجب أن يستطيع تعديل الصفحة الرئيسية.

يمكن تقسيم الصلاحيات مثلًا إلى:

• محرر يستطيع اقتراح خبر للواجهة.
• رئيس قسم يدير Widget القسم الخاص به.
• مدير تحرير يغير الخبر الرئيسي وترتيب الوحدات.
• مدير نظام ينشئ أنواع Widgets وقوالب جديدة.

الفصل بين إدارة المحتوى وإدارة بنية الصفحة يقلل الأخطاء ويجعل المسؤوليات واضحة.

المعاينة وسجل التغييرات

تعديل الصفحة الرئيسية قد يؤثر فورًا في تجربة جميع الزوار، لذلك يجب دعم:

• معاينة قبل النشر.
• نسخة مسودة من ترتيب الصفحة.
• تحديد من أجرى آخر تعديل.
• وقت التعديل.
• إمكانية العودة إلى ترتيب سابق.
• جدولة تغييرات مرتبطة بحدث أو مناسبة.

هذه الخصائص مهمة خصوصًا أثناء الانتخابات، والمباريات، والأزمات، والتغطيات التي تتغير أولوياتها بسرعة.

قياس نجاح الصفحة

لا يكفي أن تبدو الصفحة جميلة. يجب قياس أداء كل منطقة.

مؤشرات مفيدة:

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

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

أخطاء شائعة يجب تجنبها

عرض عدد كبير من الشرائح

كلما زاد عدد الشرائح، قلت فرصة رؤية العناصر الأخيرة. اجعل الـSlider محدودًا ومركزًا.

استخدام التصميم نفسه لكل Widget

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

عدم وجود صورة بديلة

يجب أن يتعامل التصميم مع الخبر الذي لا يملك صورة مناسبة دون أن ينهار التخطيط.

تحميل جميع الصور فورًا

هذه ممارسة مكلفة، خصوصًا على الهاتف. حمّل فقط ما يحتاجه الجزء المرئي أولًا.

ربط منطق البيانات بالقالب

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

إعطاء المحرر حرية غير محدودة

المرونة دون قواعد قد تدمر التسلسل البصري والأداء. قدم خيارات واضحة ومقيدة.

نسيان حالة البيانات الفارغة

قد لا يحتوي قسم جديد على خمسة أخبار، أو قد يُحذف خبر مختار يدويًا. يجب أن يعرف الـWidget كيف يتصرف: إخفاء نفسه، أو إكمال العناصر تلقائيًا، أو إظهار عدد أقل.

تطبيق الفكرة داخل 2ooly CMS

يمكن استخدام Sliders وWidgets في 2ooly لبناء صفحة رئيسية قابلة للإدارة دون وضع جميع اختيارات المحتوى داخل القالب.

المبدأ المقترح هو:

1. استخدام Slider للأخبار ذات الأولوية التحريرية العالية.
2. استخدام Widgets مستقلة للأقسام والقوائم والمحتوى المتخصص.
3. تحديد مصدر البيانات وطريقة العرض لكل Widget.
4. ترتيب الوحدات وفق خريطة الصفحة.
5. اختبار الشكل على الهاتف وسطح المكتب.
6. تطبيق التخزين المؤقت المناسب حسب سرعة تحديث كل وحدة.
7. قياس النقرات والأداء ثم تعديل الترتيب بناءً على البيانات.

بهذا يصبح القالب مسؤولًا عن الهوية البصرية، بينما تصبح لوحة الإدارة مسؤولة عن اختيار المحتوى وترتيب الوحدات ضمن قواعد محددة.

قائمة تحقق قبل إطلاق الصفحة

• هل توجد أولوية واضحة للخبر الرئيسي؟
• هل عدد الشرائح محدود؟
• هل لكل Widget هدف تحريري محدد؟
• هل تم منع التكرار غير المفيد؟
• هل تعمل حالة البيانات الفارغة؟
• هل يمكن للمحرر المعاينة قبل النشر؟
• هل ترتيب الصفحة مناسب للهاتف؟
• هل تستخدم الصور بالحجم الصحيح؟
• هل لكل Widget سياسة كاش مناسبة؟
• هل الروابط والعناوين قابلة للوصول لمحركات البحث؟
• هل الـSlider قابل للاستخدام بلوحة المفاتيح؟
• هل توجد صلاحيات وسجل للتعديلات؟
• هل تم قياس Core Web Vitals؟
• هل يمكن تغيير المحتوى دون تعديل القالب؟

الخلاصة

تصميم الصفحة الرئيسية لموقع إخباري باستخدام Sliders وWidgets ليس مجرد قرار شكلي، بل هو تصميم لنظام تحرير وعرض متكامل.

الـSlider يبرز عددًا محدودًا من القصص المهمة، بينما تقسّم الـWidgets الصفحة إلى وحدات مستقلة يمكن إدارتها وتخزينها مؤقتًا وقياس أدائها.

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

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