من السهل استخدام خطوط جوجل في ووردبريس. إنها مكتبة مجانية تضم أكثر من 800 خط ويب يمكنك استخدامها على موقعك الإلكتروني. تُعد خدمة خطوط جوجل خدمة مجانية رائدة يستخدمها ملايين مواقع ووردبريس لتحسين مظهرها وسهولة استخدامها. إليك كيفية استخدام خطوط جوجل على ووردبريس دون التأثير على أداء الموقع وتحسين تحميل صفحاته .
الطريقة الأولى: استضافة خطوط جوجل على خادم ووردبريس الخاص بك
الخطوة 1: اختر خطًا من خطوط جوجل
سيؤدي استخدام عدد أقل من خطوط جوجل إلى تقليل الطلبات (عدد أقل من الخطوط = عدد أقل من الطلبات).
اختر أوزان الخطوط بعناية – سيؤثر عدد أوزان الخطوط التي تستخدمها على سرعة تحميل صفحتك. لضمان تحميل خطوط جوجل للأوزان التي تحتاجها فقط، قم بإلغاء تحديد الأوزان الأخرى بحيث يتم تحميل الأوزان المطلوبة فقط.
الخطوة الثانية: تحميل الخط
يُعدّ تنزيل الخط الخطوة الثانية في العملية. من المهم ملاحظة أن جوجل سيقوم بتنزيل جميع أوزان الخطوط تلقائيًا، لذا لا يلزم تحديد أوزان الخطوط في هذه المرحلة. بدلاً من ذلك، يلزم تحديد أوزان الخطوط في الخطوة الثالثة.
الخطوة 3: تحويل الخطوط إلى خطوط ويب
انقر على زر "إضافة خطوط" في موقعهم، واختر الخطوط التي ستستخدمها فقط على موقعك الإلكتروني، ثم ارفعها. الملفان هما roboto-regular.ttf و roboto-bold.ttf، لذا يتضمن الملف كلا الوزنين. بما أن WOFF و WOFF2 يدعمان جميع المتصفحات الرئيسية، اترك الإعدادات كما هي. انقر على زر "تحويل" لبدء عملية التحويل.
الخطوة الرابعة: تنزيل ملفات الخطوط المحولة
بمجرد تحويل الخطوط، يمكنك تنزيلها. بما أنه تم تنزيل خطين على جهاز الكمبيوتر، فسيكون لدينا 4 ملفات خطوط في ملف ZIP (بما أننا قمنا بتنزيل خطين، فسيكون لدينا أربعة ملفات خطوط في ملف ZIP).
الخطوة 5: تحميل ملفات الخطوط إلى ملفات ووردبريس
يرجى التأكد من تحميل ملفات خطوط الويب عبر بروتوكول نقل الملفات (FTP) أو لوحة تحكم الاستضافة (cPanel) ، ويفضل وضعها في مجلد wp-content/uploads، لتجنب استبدالها بتحديثات القالب أو النظام الأساسي. لقد قمنا بتحميل الخطوط إلى مجلد "fonts" (لفصلها عن الملفات الأخرى). ستتمكن من تنزيل الخطوط بعد فتح الروابط في متصفحك، ما يتيح لك التأكد من تحميلها بنجاح.
الخطوة 6: إضافة خط مخصص إلى CSS
بعد تنزيل الملف المضغوط، سنضيف ملف CSS المسمى stylesheet.css إلى الملف. يربط كود CSS أدناه الخطوط بملف CSS الموجود لديك ويجعلها متاحة.
يمكنك وضع كود CSS في ملف functions.php أو في بداية ملف style.css الخاص بك. يمكنك استخدام ملف CSS خارجي أو دالة wp_enqueue_style الخاصة بـ WordPress في كود CSS. سنقوم بلصقه في ملف style.css الافتراضي للقالب. استبدل أي عناوين URL نسبية بعناوين URL مطلقة عن طريق نسخ الكود ولصقه في ملف أنماط CSS.
عناوين URL الافتراضية للثيم في ملف stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
التغيير إلى:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
لاستخدام الخط بسهولة في كود HTML الحالي، أنشئ فئة مخصصة. فئات CSS هي roboto_font و roboto_bold_font .
.roboto_font {
font-family: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
font-family: “Roboto”, “Arial”, sans-serif;
وزن الخط: غامق؛
}
الخطوة 7: تعيين الخط الافتراضي
لجعل هذا الخط هو الخط الافتراضي على موقعك الإلكتروني، يجب عليك تضمين كود CSS في ملف style.css الخاص بك.
قد تحتاج إلى تصحيح الأخطاء أو تعديل الخط لاستبدال خصائص عائلة الخط الحالية.
الخطوة التالية هي تحميل ملف stylesheet.css الذي حصلت عليه داخل ملفك المسمى stylesheet.css وإضافة كود CSS. سيجعل كود CSS أدناه الخطوط متوافقة مع CSS الحالي لديك، وستكون جاهزة للاستخدام فور إدخاله. يمكنك استخدام ملف أنماط خارجي أو دالة wp_enqueue_style في ووردبريس لإضافة ملفات الأنماط.
الطريقة الثانية: التحميل المسبق لخطوط الويب - تحسين الجزء العلوي من الصفحة
إذا كنت تستخدم خطوط جوجل، فقد تحتاج إلى الرجوع إلى ملف أنماط CSS الذي أعدته جوجل وأرسلته إلى موقعك على ووردبريس من خوادمها. عند استخدام أداة مطوري جوجل كروم لفحص موقعك، قد تتمكن من الاطلاع على تفاصيل العملية. من المحتمل أن تجد مدخلين لخطوط جوجل ضمن قسم "المصدر".
يرجى الاطلاع على الصورة المرفقة هنا.
عند النقر على fonts.googleapis ، ستلاحظ ظهور ملف أنماط CSS الذي أنشأتَ الرابط الخاص به في الصفحة المفتوحة. بالإضافة إلى ذلك، يتم استدعاء ملف الخط المحدد لكل تعريف لنمط الخط.
هذا يعني أنه يتعين على المستخدم زيارة موقع fonts.gstatic.com للحصول على الوزن المناسب للخط في حال استخدام وزن مختلف. قد تؤدي هذه الخطوة إلى إطالة وقت تحميل صفحة ووردبريس الخاصة بك.
لذلك، قم بالوصول إلى ملف functions.php الخاص بقالبك الحالي، وأدخل كود PHP التالي داخل الدالة المسؤولة عن إدارة الخطوط.
دالة twentyeleven_resource_hints( $urls, $relation_type ) {
إذا كان نمط ووردبريس هو 'rumi-fonts'، 'queue' وكان 'preconnect' يساوي $relation_type، {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
"crossorigin,"
);
}
أعد $urls؛
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
الطريقة الثالثة: تحسين خطوط جوجل في ووردبريس باستخدام إضافة
تُسهّل الإضافات، كما هو الحال مع معظم مهام ووردبريس، تحسين خطوط جوجل بشكل كبير. إضافةً إلى ذلك، فهي تتولى الجانب البرمجي نيابةً عنك، فلا داعي للقلق بشأن مكان وضع الكود في النظام.
إذا قمت بتثبيت Google Fonts على موقع WordPress الخاص بك وقمت بتشغيل اختبار الأداء باستخدام PageSpeed Insights أو GTmettrix، فستتلقى رسالة الخطأ التالية: fonts.googleapis.com.
يحدث هذا لأن خطوط جوجل غير متوافقة مع منصة ووردبريس. وهذا يعني أن موقع ووردبريس الخاص بك يحتاج إلى تحسين خطوط جوجل الخاصة به.
يمكن استخدام إضافة مجانية لحل هذه المشكلة. وهي: OMGF | استضافة خطوط جوجل محليًا
بعد اكتمال التثبيت، سيبدأ الملحق فورًا بتحويل دالة wp en queue script() الخاصة بـ Google Fonts في ووردبريس إلى دالة wp head(). يقوم هذا الملحق بكل شيء تلقائيًا.
يمكنكم الاطلاع على المزيد من هذه المقالات على موقع Seahawk Media .
