حل نهائي لمشكلة إعادة التوجيه في بلوجر باستخدام Cloudflare

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

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

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

ملاحظات وتنبيهات قبل بدء التطبيق:

  • الطريقة تعمل فقط مع النطاقات المدفوعة (دومينات مخصصة) ولا تنطبق على blogspot.com.
  • لابد من ربط الدومين بـ Cloudflare بشكل صحيح قبل تنفيذ الخطوات.
  • قم بتوثيق إعداداتك الحالية في بلوجر وكلاودفلير (بالصور) قبل إجراء أي تعديل.
  • اتبع الخطوات بحذر وبدقة، ولا تعدل على الأكواد إلا إذا كنت متأكداً مما تفعل.
  • التنفيذ على مسؤوليتك الشخصية.

الخطوة 1: إعداد بلوجر

  1. توجه إلى لوحة التحكم في مدونتك على بلوجر.

  2. من قائمة الإعدادات، تأكد من تفعيل الخيارات التالية:

    • نطاق إعادة التوجيه: مفعل (ON)
    • HTTPS: مفعل (ON) (تأكد أن الحالة "متوفر")
    • إعادة التوجيه باستخدام HTTPS: مفعل (ON)
لقطة شاشة توضح إعدادات HTTPS ونطاق إعادة التوجيه في بلوجر

الخطوة 2: الدخول إلى Cloudflare وإنشاء Worker

  • قم بتسجيل الدخول إلى حسابك في Cloudflare.
  • لا تدخل إلى أي دومين الآن.
  • من القائمة الجانبية، اختر Workers & Pages.
صورة توضح كيفية الوصول إلى خيار Workers في لوحة تحكم Cloudflare

  • اضغط على Create Application أو "Hello World" حسب ما يظهر لديك.
واجهة Cloudflare مع تحديد خيار "Hello World" لإنشاء Worker جديد


الخطوة 3: إعداد كود Worker

  • بعد فتح الـ Worker، اضغط على Deploy.
صفحة إعدادات Worker في Cloudflare مع زر Deploy لبدء النشر
  • بعد نشره، سوف تضهر واجهة كالتالي اضغط على Edit code.
واجهة Cloudflare بعد نشر الـ Worker مع زر Edit Code لتعديل الكود


  • احذف كل الكود الظاهر، ثم الصق الكود التالي:
const MOBILE_REGEX = /(?:phone|windows\s+phone|ipod|blackberry|(?:android|bb\d+|meego|silk|googlebot) .+? mobile|palm|windows\s+ce|opera\ mini|avantgo|mobilesafari|docomo|KAIOS)/i;
const TABLET_REGEX = /(?:ipad|playbook|(?:android|bb\d+|meego|silk)(?! .+? mobile))/i;

const getDeviceType = (userAgent) => {
  if (typeof userAgent === "string") {
    if (MOBILE_REGEX.test(userAgent)) return "mobile";
    if (TABLET_REGEX.test(userAgent)) return "tablet";
  }
  return "desktop";
}

const worker = {
  async fetch(request) {
    const deviceType = getDeviceType(request.headers.get("User-Agent"));
    const url = new URL(request.url);

    if (deviceType !== "desktop") {
      url.searchParams.set("m", "1");
    }

    const modifiedRequest = new Request(url, {
      method: request.method,
      body: request.body,
      headers: request.headers,
      redirect: "follow"
    });

    const response = await fetch(modifiedRequest);
    return new Response(response.body, response);
  }
};

export default worker;

  • بعد لصق الكود، اضغط Deploy مجدداً.
واجهة محرر كود Cloudflare Worker بعد لصق الكود المخصص لإعادة التوجيه


الخطوة 4: إعداد سجلات DNS

  • انتقل إلى تبويب DNS في Cloudflare.
واجهة Cloudflare توضح قسم DNS والسجلات المرتبطة بالدومين
  • تأكد من وجود السجلات التالية:

    • سجلات A (IP لجوجل):

      • 216.239.32.21
      • 216.239.34.21
      • 216.239.36.21
      • 216.239.38.21
    • سجل CNAME:

      • الاسم: www
      • الهدف: ghs.google.com
  • تأكد أن كل السجلات مفعّل عليها Proxied (السحابة برتقالية).
إدخال بيانات سجل A في Cloudflare وربطه بعنوان IP الخاص بجوجل


الخطوة 5: إعداد SSL

  1. من القائمة الجانبية، انتقل إلى SSL/TLS.
  2. ضمن Overview، اختر الوضع: Full (strict).
  3. اضغط Save.
واجهة إعدادات SSL/TLS في Cloudflare مع خيار Configure لتعديل مستوى الأمان

الخطوة 6: تفعيل إعدادات HTTPS المتقدمة

  1. من تبويب Edge Certificates داخل SSL/TLS، فعّل:

    • Always Use HTTPS
    • Opportunistic Encryption
    • TLS 1.3
    • Automatic HTTPS Rewrites
خيارات Edge Certificates في Cloudflare مع تفعيل إعدادات HTTPS وTLS

الخطوة 7: إنشاء قاعدة تحويل Redirect Rule

  • توجه إلى قسم Rules > Redirect Rules.
  • اضغط على Create Rule، ثم اختر Custom filter expression.
واجهة إعداد Redirect Rule في Cloudflare مع حقول إدخال البيانات المخصصة

  • في خانة التعبير (Expression Editor)، أدخل:
http.host eq "yourdomain.com"

(استبدل yourdomain.com بدون www أو https)

  • في خانة "Dynamic redirect"، أدخل:

concat("https://www.yourdomain.com", http.request.uri)

(استبدل www.yourdomain.com بالرابط الكامل لمدونتك)

  • اختر 301 كرمز التحويل، وفعل Preserve query string.
  • اضغط Deploy.
محرر التعبير الشرطي في Cloudflare لكتابة فلتر مخصص لإعادة التوجيه


الخطوة 8: ربط Worker بالدومين

  1. من قسم Workers Routes، اضغط Add route.
  2. في خانة Route اكتب:
www.yourdomain.com/*
  1. اختر الـ Worker الذي أنشأته، ثم اضغط Save.
واجهة قسم Workers Routes في Cloudflare لتحديد نطاق تفعيل الكود

الخطوة 9: مسح الكاش

  1. انتقل إلى قسم Caching > Configuration.
  2. اضغط على Purge Everything لتسريع ظهور التغييرات.
واجهة إعدادات Caching في Cloudflare مع خيار Purge Everything لتفريغ الكاش

تهانينا! تم حل المشكلة بنجاح

الآن تم تفعيل نظام إعادة التوجيه الصحيح على مدونتك، سواء من الهاتف أو الحاسوب، مع دعم HTTPS وتحسين تجربة التصفح.

هل واجهت مشكلة في التطبيق؟

اكتب استفسارك في التعليقات وسأكون سعيداً بالرد عليك.

تعليقات