طريقة تغيير الخطوط في قالب Plus UI لمدونة بلوجر (دليل شامل)

يُعتبر تخصيص الخطوط أحد العوامل الأساسية التي تمنح مدونة بلوجر هوية بصرية فريدة وتُحسن من تجربة القراءة للمستخدم. ولحسن الحظ، يتيح قالب Plus UI مرونة كبيرة في تغيير الخطوط بسهولة واحترافية عبر استخدام خطوط Google Fonts.

طريقة تغيير الخطوط في قالب Plus UI لمدونة بلوجر (دليل شامل)

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

---

الخطوة :1 اختيار الخط المناسب من Google Fonts

تُعد Google Fonts أكبر مكتبة خطوط مجانية على الإنترنت، وتدعم دمج الخطوط بسهولة في أي موقع أو قالب. لاختيار خط مناسب، يُفضل أن تراعي النقاط التالية:

1. اختيار خط يدعم اللغة العربية (إن كنت تكتب بالعربية).
2. اختيار خط له وزن متوسط وخفيف وثقيل ليمنحك تنوعًا في العرض.
3. اختيار خط حديث ومرن من حيث المساحات بين الحروف وسهولة القراءة.

الدخول إلى موقع Google Fonts

افتح المتصفح وانتقل إلى: موقع Google Fonts

تصفح واختيار الخط

1. استخدم شريط البحث في الأعلى للبحث باسم خط معين مثل Cairo أو أي خط آخر تريده.
2. يمكنك فلترة الخطوط حسب اللغة من خلال "Languages → Arabic" إذا كنت تبحث عن خطوط عربية.
3. بعد الدخول إلى صفحة الخط، سترى قائمة بالأوزان المختلفة (مثل 400، 600، 700...). اختر الأوزان التي تحتاجها بالنقر على الزر Select this style.
4. نسخ رابط الخط
5. بعد اختيار الأوزان المطلوبة، ستظهر نافذة جانبية على اليمين تحتوي على كود الاستدعاء (link tag). بها ثلاثة روابط تاكد من نسخ الرابط الداخلي والذي يكون بهذا الشكل

   https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap

6. قم بنسخ الجزء الداخلي والذي هو الرابط كما في الاعلى فقط: قم بتعديل الرابط ستجد هذا الرمز & في الرابط. استبدلة من هاذا & إلى هذا & ليصبح الرابط بهذا الشكل

   "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap"

7. ملاحظة تقنية: تأكد من أن الرابط يحتوي على الأحرف المشفرة بشكل صحيح. عند لصقه في محرر HTML داخل بلوجر، يجب تحويل أي رمز & إلى & لتجنب أخطاء في التفسير.

نسخ اسم الخط

عادةً ما يكون اسم الخط ظاهرًا بوضوح في عنوان الصفحة الخاصة به على Google Fonts، أو مذكور في كود CSS المخصص للاستخدام مثل:

font-family: 'Cairo', sans-serif;

في هذه الحالة، اسم الخط الذي يجب نسخه هو: Cairo

---

الخطوة 2: إضافة رابط الخط إلى قالب Plus UI

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

1. انتقل إلى لوحة تحكم بلوجر → المظهر → تحرير HTML.
2. ابحث عن المتغير التالي:

   <Variable name="font.link1"

3. ستجد كود مشابه لهذا:

   <Variable name="font.link1" description="Font Link 1" type="string" default="" value=""/>

4. الصق رابط الخط بين علامتي value="" مع التاكد من الرموز المعدلة، ليصبح بهاذا الشكل:

   <Variable name="font.link1" description="Font Link 1" type="string" default="" value="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&amp;display=swap"/>

---

الخطوة 3: تغيير أسماء الخطوط في المتغيرات

قالب Plus UI يستخدم متغيرات مخصصة لأسماء الخطوط. يجب تعديلها لتفعيل الخط الجديد على جميع عناصر التصميم.

1. ابحث عن هذه المتغيرات:

   <Variable name="font.head" ... value="Google Sans Text"/>
   <Variable name="font.body" ... value="Google Sans Text"/>
   <Variable name="font.bodyAlt" ... value="Google Sans Text"/>
   <Variable name="font.code" ... value="Google Sans Mono"/>

2. استبدل القيم باسم الخط الجديد كما هو موضح أدناه:

   <Variable name="font.head" ... value="Cairo"/>
   <Variable name="font.body" ... value="Cairo"/>
   <Variable name="font.bodyAlt" ... value="Cairo"/>
   <Variable name="font.code" ... value="Cairo"/>

---

الخطوة 4: حفظ التعديلات والتحقق من النتيجة

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

إذا لم يظهر الخط:

• تأكد من كتابة اسم الخط بشكل صحيح (مطابق لما هو في Google Fonts).
• تحقق من تحويل جميع رموز & إلى & في رابط الخط.
• جرب استخدام خط مختلف للتأكد من أن المشكلة ليست من القالب.

---

نصيحة إضافية: استخدام أكثر من خط

يمكنك إدراج خط ثانٍ لعناصر أخرى مثل العناوين الثانوية أو الفقرات. فقط أضف رابط الخط الثاني في:

<Variable name="font.link2" ... />

ثم حدّد اسم الخط الثاني في متغيرات مثل font.head أو font.bodyAlt حسب حاجتك.

---

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

شاهد ايضا :