كيفية إنشاء قصة ويب AMP لمدونة بلوجر قالب لا يدعم اصدار AMP

السلام عليكم ورحمة الله وبركات

مقدمة: لماذا تحتاج إلى قصة ويب لمدونتك؟

في عالم يتزايد فيه اعتماد المستخدمين على الهواتف الذكية، أصبحت قصص الويب (Web Stories) وسيلة فعالة لجذب الزوار وتقديم المحتوى بطريقة جذابة وسريعة التحميل. بينما توفر وردبريس أدوات مدمجة لإنشاء قصص ويب، يفتقر بلوجر إلى هذه الميزة - خاصة إذا كان القالب لا يدعم تقنية AMP.

ما هو الحل البديل؟

يمكنك استخدام Cloudflare Worker لتشغيل قصة ويب AMP خارج نطاق مدونة بلوجر، مع الحفاظ على القدرة على مشاركتها وربطها بمدونتك. هذا الحل مثالي لأن:

لا يتطلب تعديلات على قالب بلوجر
يعمل حتى مع القوالب غير المدعومة لـ AMP
يوفر أداءً ممتازًا بفضل بنية Cloudflare العالمية
مجاني في طبقة Cloudflare المجانية

يمكنك تنزيل الملف من خلال الزر أدناه، وهو بصيغة ZIP. بعد التنزيل، ستحتاج إلى فك الضغط عن الملف باستخدام تطبيق مثل ZArchiver أو MT Manager. نوصي باستخدام MT Manager لأنه يتيح لك ليس فقط فك الضغط، بل أيضًا تحرير ملفات story-web-worker.js مباشرة داخل التطبيق، مما يجعله الخيار الأنسب للمستخدمين الذين يرغبون في التعديل على الكود.

story-web-worker.zip 4.8KiB

شرح الكود خطوة بخطوة

1. البنية الأساسية للعامل (Worker)

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

هذا الجزء يستمع لطلبات الوصول ويوجهها للدالة الرئيسية التي تتعامل مع الطلب.

1. المتغيرات الأساسية

event

يمثل حدث Fetch الذي يتم تشغيله عند وصول طلب إلى Worker

request

يحتوي على معلومات الطلب الوارد (URL، headers، إلخ)

ampStoryContent

متغير نصي (string) يحتوي على كامل HTML لقصة AMP

2. بنية الكود الأساسية

الجزء الأول: الاستماع للطلبات

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

هذا الجزء ينصت لأي طلب يصل إلى Worker ويوجهه للدالة handleRequest

الجزء الثاني: معالجة الطلب

async function handleRequest(request) {
  // إنشاء محتوى HTML
  return new Response(ampStoryContent, {
    headers: { 'Content-Type': 'text/html;charset=UTF-8' }
  });
}

هذه الدالة تقوم بـ:

إنشاء متغير ampStoryContent الذي يحتوي على صفحة HTML كاملة
إرجاع رد HTTP مع:
- المحتوى: صفحة HTML الجاهزة
- الرأس (header): يحدد أن نوع المحتوى هو HTML

شرح متعمق لأجزاء HTML الأساسية في قصة AMP

1. علامات الميتا الأساسية (Meta Tags)

<meta charset="UTF-8">

يحدد ترميز الأحرف لصفحة الويب (UTF-8 للأحرف العربية واللغات العالمية)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

يجعل الصفحة متجاوبة مع أحجام الشاشات المختلفة
width=device-width تجعل العرض يتكيف مع الجهاز
initial-scale=1.0 تضبط مستوى التكبير الابتدائي

<meta name="robots" content="index, follow">

إرشادات لمحركات البحث: تسمح بالفهرسة ومتابعة الروابط

<meta http-equiv="X-UA-Compatible" content="IE=edge">

تضمن عرض الصفحة بأحدث نمط عرض في متصفح Internet Explorer

2. علامات Open Graph (للمشاركة على وسائل التواصل)

<meta property="og:title" content="مجلة شمول">
<meta property="og:description" content="بوابة إلى عالم من المعرفة والإلهام">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://www.shomole.com/my-story">
<meta property="og:type" content="website">

تحسن مظهر المشاركة عندما يتم مشاركة الرابط على وسائل التواصل الاجتماعي
og:title: عنوان المشاركة
og:description: الوصف الذي يظهر تحت العنوان
og:image: الصورة المصغرة للمشاركة
og:url: الرابط الأساسي للمحتوى
og:type: نوع المحتوى (موقع ويب في هذه الحالة)

3. سكربتات AMP الأساسية

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

المكتبة الأساسية لـ AMP (مطلوبة لكل صفحة AMP)
مكون قصة AMP الذي يمكنك من إنشاء تجربة "القصة"
مخصص لتحميل الخطوط الأمثل في AMP

4. AMP Boilerplate (البنية الأساسية)

<style amp-boilerplate>
body {
  -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
  -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
  -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
  animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
</style>

يخفي المحتوى حتى يتم تحميل AMP بالكامل لمنع وميض المحتوى غير المنسق (FOUT)
يستخدم animations CSS لضمان عدم ظهور المحتوى حتى يصبح جاهزًا

<noscript>
  <style amp-boilerplate>
    body { animation: none; }
  </style>
</noscript>

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

5. أنماط AMP المخصصة (amp-custom)

<style amp-custom>
  /* أنماط CSS المخصصة هنا */
</style>

لفهم تخصيصات apm-custom ارجع لهذا المقال تخصيص Web Story باستخدام amp-custom ستجد توضيح شامل و قوية لتخصيص قصة الويب الخاصة بك و ايضا يلزمك مراجعة مقال قصص ويب ستوري قسم الخاص html ampقصص الويب ستوري: كيفية إضافتها على مدونة بلوجر .

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

ما هو إصدار AMP? انصحك بالعودة الى هدا المقال لفهم ما هي قوالب AMP بلوجر؟ في المقال ستجد اجابة لكل اسئلتك عن هدا الاصدار.

تنبيه: قصة الويب المقدّمة عبر خدمة Cloudflare Worker قد لا تعمل على معظم المتصفحات المدمجة داخل التطبيقات، وذلك بسبب حظر تشغيل JavaScript في هذه المتصفحات. إذا لم تظهر القصة عند الضغط على زر المعاينة، يرجى التأكد من تفعيل خيار "السماح بتشغيل JavaScript" في إعدادات المتصفح.

المكان الوحيد المسموح به لإضافة CSS مخصص في AMP
يجب أن تكون جميع الأنماط مضمنة هنا (لا يسمح بملفات CSS خارجية)
تدعم جميع خصائص CSS3 العادية مع بعض القيود لأسباب تتعلق بالأداء

6. هيكل قصة AMP الأساسي

<amp-story standalone
  title="قصة ويب - مجلة شمول الإلكترونية"
  publisher="مجلة شمول الإلكترونية"
  publisher-logo-src="logo.png"
  poster-portrait-src="cover.jpg">
  
  <amp-story-page id="page1">
    <!-- محتوى الصفحة -->
  </amp-story-page>
  
</amp-story>

standalone: تشير أن هذه قصة مستقلة
title: عنوان القصة
publisher: اسم الناشر
publisher-logo-src: شعار الناشر
poster-portrait-src: صورة الغلاف

7. مكونات الصفحة الداخلية

<amp-story-page id="page1">
  <amp-story-grid-layer template="vertical">
    <!-- المحتوى هنا -->
  </amp-story-grid-layer>
</amp-story-page>

كل صفحة تحتوي على طبقات (layers)
template: يحدد تخطيط الطبقة (vertical, thirds, fill, إلخ)
يمكن إضافة صور، نصوص، أزرار، وغيرها من العناصر داخل الطبقات

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

معاينة

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

اختبار كود AMP هنا يمكنك اختبار صلاحية كود قصتك قبل نشرها للتاكد من ان كود صفحة اصدار AMP يعمل بنجاح اختبار كود AMP

أهمية هذه العناصر في Cloudflare Worker

جميع هذه العناصر يتم توليدها ديناميكيًا كاستجابة للطلب
لا تحتاج إلى ملفات خارجية (كل شيء مضمن في الرد)
يمكن تعديل أي جزء من هذه الأجزاء برمجيًا قبل إرسال الرد
خاصية التخزين المؤقت في Cloudflare تحسن أداء تحميل القصة

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

3. كيف يعمل عند الطلب؟

يصل طلب HTTP إلى Worker
يتم تشغيل حدث fetch
يتم تمرير الطلب إلى handleRequest
تقوم handleRequest بإنشاء صفحة HTML
ترجع الصفحة كرد على الطلب

4. ما الذي يمكنك تعديله؟

ampStoryContent: يمكنك تغيير محتوى HTML بالكامل
headers: يمكنك إضافة أو تعديل رؤوس HTTP
الدالة handleRequest: يمكنك إضافة منطق إضافي لمعالجة الطلبات

2. إنشاء محتوى قصة AMP

الدالة handleRequest تقوم بإنشاء صفحة HTML كاملة تحتوي على:

معلومات تعريفية (meta tags) لتحسين SEO ومشاركة الوسائط
مكونات AMP الأساسية والإضافية المطلوبة
تصميم متجاوب يعمل على جميع الأجهزة
تأثيرات بصرية لجعل القصة أكثر جاذبية

3. صفحات القصة

القصة النموذجية تحتوي على:

صفحة غلاف مع صورة وعنوان
صفحات محتوى تعرض المعلومات الرئيسية
إحصائيات أو نقاط مهمة
صفحة ختامية مع دعوة للعمل (زيارة المدونة)

كيفية تنفيذ الحل على Cloudflare

الخطوة 1: إنشاء حساب Cloudflare

انتبه: الخطة المجانية لـ Cloudflare Workers تسمح بـ 100,000 طلب/يوم. إذا تجاوزت هذا الحد، سيتم إيقاف الخدمة حتى نهاية الشهر أو الترقية لخطة مدفوعة.

اذهب إلى cloudflare.com
سجل حسابًا جديدًا (أو سجل الدخول إذا كان لديك حساب)

معلومة! Cloudflare Workers تتيح لك تشغيل كود JavaScript على خوادم Cloudflare مباشرة، مما يوفر سرعة وأداءً عاليين دون الحاجة إلى استضافة خارجية.

الخطوة 2: إعداد Worker

من لوحة التحكم، انتقل إلى "Workers"
انقر على "Create a Worker"
استبدل اسم الوركر مثلا لتسميه my-story
اضغط "Save and Deploy"
مباشرة قم بالدخول الى المحرر الوركر احدف الكود الافتراضي استبدله بالكود الذي ستعدله بعد نسخه مت الصندوق اعلاه.

نصيحة عند دخولك لمحرر كود الوركر في كلا,د فلير استخم الاختصارات التالية لتسهيل عملك مثلا لتحديد النص بالكامل انقر على Ctrl + A ثم انقر على زر Delet او زر برمز السهم لاحل اللصق انقر على Ctrl + V. نفس الاختصارات الموجودة في اي لوحة التحكم (اذا كنت تستخدم الهاتف اندرويد نزل تطبيق الكيبورد الاحترافي للوصول الى جميع الاختصارات الموجودة على معظم الاجهزة اسم التطبيق Unexpected Keyboard)

تحذير! لا تنس حذف الكود الافتراضي في محرر الـ Worker واستبداله بالكود المخصص لك قبل الضغط على "Save and Deploy".

الخطوة 3: تخصيص القصة

عدل المتغيرات في الكود لتتناسب مع مدونتك
استبدل عناوين الصور (حاليا تشير إلى GitHub)
عدل النصوص والعناوين
اضبط الألوان لتناسب هوية مدونتك

الخطوة 4: ربط القصة بمدونة بلوجر

تم بنجاح! لقد قمت بربط القصة بنجاح بمدونة بلوجر. تأكد من ظهورها بالشكل المطلوب عند زيارة الرابط.

احصل على رابط Worker (سيبدو مثل my-story.workers.dev)
عد الى قائمة الرئيسية في كلاود فلير (تاكد من انك موجود في الصفحة التي تحتوي على اسم نطاقك المقصود اذا كنت تمتلك اكثر من اسم نطاق)
اختر خانة Workers Routes من قائمة كلاود فلير
انقر على زر add route
في حقل Route اضف رابط مدونتك مثلا www.exampl.com/my-story.html و في حقل Workers اختر اسم الوركر الذي انشأته اذا اخترت اسم my-story ستجده في الغالب ستجد الاسم الذي اخترته الى الوركر الخاص بقصتك
أضف زرًا أو رابطًا في مدونة بلوجر يشير إلى هذا الرابط
يمكنك أيضًا استخدام iframe لتضمين القصة مباشرة في مقال

خطأ! إذا لم تعمل القصة عند فتح الرابط، تحقق من إعدادات Route وتأكد من تطابق الرابط مع ما أضفته في Cloudflare.

Route	Workers
www.exampl.com/my-story.html	my-story

الابتكار لا يتطلب دائمًا موارد ضخمة، بل أحيانًا يحتاج فقط إلى الأدوات الصحيحة في المكان الصحيح — تمامًا كما تفعل Cloudflare Workers.
جمال الحزازي

نصائح لتحسين القصة

استخدم صورًا عالية الجودة ولكن مع تحسين الحجم
اختر ألوانًا متناسقة مع هوية مدونتك
اجعل النصوص مختصرة وقوية
أضف دعوات واضحة للعمل في الصفحة الأخيرة
استخدم التأثيرات المتحركة بحكمة (لا تبالغ)

كيف تحسن ظهور قصتك في محركات البحث؟

لضمان فهرسة قصتك في جوجل وتحقيق زيارات أكثر:

استخدم Structured Data: أضف بيانات مُنظمة (Schema.org) لتحديد نوع المحتوى كـ WebStory.
اختر كلمات مفتاحية: ضعها في العنوان (<title>) ووصف القصة (og:description).
روابط داخلية: اربط القصة بمقالات ذات صلة في مدونتك.
نسخة احتياطية: أنشئ صفحة HTML عادية تحتوي على محتوى القصة (لكبار الزوار).

مقارنة بين الحلول المتاحة لإنشاء قصص الويب

عند التفكير في إنشاء قصص ويب لمدونتك، هناك عدة خيارات متاحة:

1. حل ووردبريس المدمج

يتطلب استخدام إضافات مثل "Web Stories"
يدعمه بشكل أساسي بعض القوالب الحديثة
يقدم واجهة سهلة للسحب والإفلات
يتكامل بشكل كامل مع نظام ووردبريس

2. الحل المقترح باستخدام Cloudflare Worker

يعمل بشكل مستقل عن نظام إدارة المحتوى
لا يتأثر بتحديثات القوالب أو المنصة
يتطلب بعض المعرفة التقنية الأساسية
يمنحك تحكماً كاملاً في كل التفاصيل

أهم الاعتبارات عند الاختيار:

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

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

خاتمة

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

هل يمكن استخدام هذا الحل إذا كان قالب بلوجر يدعم AMP؟

نعم، لكن الحل المقدم في المقال موجه بالأساس لمستخدمي القوالب غير المدعومة لـAMP. إذا كان قالبك يدعم AMP، يمكنك إنشاء قصص ويب مباشرة عبر أدوات مثل "Web Stories" لبلوجر (إن وجدت) دون الحاجة إلى Cloudflare Workers.

ما مميزات Cloudflare Workers؟

يتميز استخدام Cloudflare Workers بأنه لا يتطلب تعديلًا في القالب، ويوفر أداءً عاليًا بفضل شبكة Cloudflare العالمية، كما يتيح 100,000 طلب يوميًا مجانًا مع إمكانية تخصيص كاملة لتصميم ووظائف القصة.

كيف أُظهر القصة في بحث جوجل؟

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

ما البدائل بعد تجاوز الحد المجاني؟

إذا تم تجاوز الحد المجاني لطلبات Cloudflare، يمكن الترقية إلى خطة مدفوعة، أو استخدام حلول بديلة مثل الاستضافة العادية مع دعم AMP، أو الاعتماد على منصات قصص الويب مثل MakeStories، أو التوجه إلى ووردبريس الذي يدعم Web Stories من خلال إضافات خاصة.

منشورات ذات صلة

شكرًا لمساعدة DeepSeek في إعداد هذا المقال

كيفية إنشاء قصة ويب AMP لمدونة بلوجر بقالب لا يدعم اصدار AMP