شرح كيفية تغير شكل خطوط المنتدى الزينفورو

مهدي حميد

مهدي حميد

Moderator
طاقم الإدارة
مشرفين انكور
عضو انكور

إضافة الخطوط الخارجية (Google Fonts) لمنتديات XenForo 2.x​


تعتبر الخطوط من أهم عناصر الـ Modern UI في تصميم الويب. في هذا الشرح، سنتعلم كيفية ربط الخطوط الخارجية بمنتداك عبر قالب PAGE_CONTAINER وتطبيقها برمجياً لضمان مظهر احترافي وسرعة في التحميل.

🛠 المرحلة الأولى: جلب رابط الخط​

بدايةً، عليك اختيار الخط المناسب من موقع Google Fonts أو أي مزود آخر.
  • اختر الأوزان المطلوبة (مثلاً: 400 للعادي و 700 للخط العريض).
  • قم بنسخ الرابط المباشر الذي يوفره لك الموقع، وسيكون بهذا الشكل:
HTML: 
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

📁 المرحلة الثانية: ربط الخط بالمنتدى​

سنقوم الآن بوضع الرابط في الهيدر الرئيسي للموقع:
  1. توجه إلى لوحة التحكم > المظهر > القوالب.
  2. ابحث عن قالب PAGE_CONTAINER.
  3. ابحث عن الوسم <head> وقم بلصق الكود الخاص بك أسفله مباشرة.

🎨 المرحلة الثالثة: تطبيق الخط عبر CSS​

الآن سنستخدم قالب extra.less لتعميم الخط على كافة عناصر المنتدى بلمسة واحدة:
  1. ابحث عن قالب extra.less وأضف الكود التالي:
CSS: 
/* تعيين الخط لكافة نصوص المنتدى - كود نت */
body, i, b, span, div, p, a, .p-nav-list, .p-title-value {
font-family: 'Cairo', sans-serif !important;
}
/* تحسين مظهر العناوين */
h1, h2, h3, h4 {
font-family: 'Cairo', sans-serif !important;
font-weight: 700;
}

💡 نصائح من "انكور التطويري" لتحسين الأداء (SEO)​

  • السرعة: لا تقم باستدعاء أكثر من خطين، لأن ذلك يؤثر على سرعة استجابة الموقع في محركات البحث.
  • التوافق: استخدم خاصية &display=swap في نهاية رابط الخط لضمان ظهور النص فوراً للمستخدم بخط احتياطي حتى يكتمل تحميل الخط الأساسي.
  • الأوزان: اختر فقط الأوزان التي تحتاجها فعلياً لتقليل حجم البيانات المحملة.
تم إعداد هذا الشرح بواسطة: مهدي حميد
حقوق النشر محفوظة لـ: انكور التطويري
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى