السلام عليكم ورحمة الله وبركاته،
في هذا المقال التفصيلي، أشارككم الحل النهائي لمشكلة إعادة التوجيه في منصة بلوجر عند استخدام دومين مخصص وربطه بخدمة Cloudflare، وهي مشكلة تؤثر على تجربة المستخدم وترتيب الموقع في نتائج البحث، خاصة عند التصفح من الهواتف المحمولة.
الشرح التالي مستند إلى تجاربي الشخصية بعد عدة محاولات، بالإضافة الى بعض التعديلات الهامة لضمان نجاح الطريقة.
ملاحظات وتنبيهات قبل بدء التطبيق:
- الطريقة تعمل فقط مع النطاقات المدفوعة (دومينات مخصصة) ولا تنطبق على blogspot.com.
- لابد من ربط الدومين بـ Cloudflare بشكل صحيح قبل تنفيذ الخطوات.
- قم بتوثيق إعداداتك الحالية في بلوجر وكلاودفلير (بالصور) قبل إجراء أي تعديل.
- اتبع الخطوات بحذر وبدقة، ولا تعدل على الأكواد إلا إذا كنت متأكداً مما تفعل.
- التنفيذ على مسؤوليتك الشخصية.
الخطوة 1: إعداد بلوجر
-
توجه إلى لوحة التحكم في مدونتك على بلوجر.
-
من قائمة الإعدادات، تأكد من تفعيل الخيارات التالية:
- نطاق إعادة التوجيه: مفعل (ON)
- HTTPS: مفعل (ON) (تأكد أن الحالة "متوفر")
- إعادة التوجيه باستخدام HTTPS: مفعل (ON)
الخطوة 2: الدخول إلى Cloudflare وإنشاء Worker
- قم بتسجيل الدخول إلى حسابك في Cloudflare.
- لا تدخل إلى أي دومين الآن.
- من القائمة الجانبية، اختر Workers & Pages.
- اضغط على Create Application أو "Hello World" حسب ما يظهر لديك.
الخطوة 3: إعداد كود Worker
- بعد فتح الـ Worker، اضغط على Deploy.
- بعد نشره، سوف تضهر واجهة كالتالي اضغط على 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 مجدداً.
الخطوة 4: إعداد سجلات DNS
- انتقل إلى تبويب DNS في Cloudflare.
تأكد من وجود السجلات التالية:
سجلات A (IP لجوجل):
- 216.239.32.21
- 216.239.34.21
- 216.239.36.21
- 216.239.38.21
سجل CNAME:
- الاسم:
www
- الهدف:
ghs.google.com
- الاسم:
- تأكد أن كل السجلات مفعّل عليها Proxied (السحابة برتقالية).
الخطوة 5: إعداد SSL
- من القائمة الجانبية، انتقل إلى SSL/TLS.
- ضمن Overview، اختر الوضع: Full (strict).
- اضغط Save.
الخطوة 6: تفعيل إعدادات HTTPS المتقدمة
-
من تبويب Edge Certificates داخل SSL/TLS، فعّل:
- Always Use HTTPS
- Opportunistic Encryption
- TLS 1.3
- Automatic HTTPS Rewrites
الخطوة 7: إنشاء قاعدة تحويل Redirect Rule
- توجه إلى قسم Rules > Redirect Rules.
- اضغط على Create Rule، ثم اختر Custom filter expression.
- في خانة التعبير (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.
الخطوة 8: ربط Worker بالدومين
- من قسم Workers Routes، اضغط Add route.
- في خانة Route اكتب:
www.yourdomain.com/*
- اختر الـ Worker الذي أنشأته، ثم اضغط Save.
الخطوة 9: مسح الكاش
- انتقل إلى قسم Caching > Configuration.
- اضغط على Purge Everything لتسريع ظهور التغييرات.
تهانينا! تم حل المشكلة بنجاح
الآن تم تفعيل نظام إعادة التوجيه الصحيح على مدونتك، سواء من الهاتف أو الحاسوب، مع دعم HTTPS وتحسين تجربة التصفح.
هل واجهت مشكلة في التطبيق؟
اكتب استفسارك في التعليقات وسأكون سعيداً بالرد عليك.