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