كيفية استضافة الخطوط المحلية في WordPress لتسريع موقعك

Ahmad ِAlkhalaf
6 Min Read

تسريع موقعك عبر الووردبريس WordPress

هل تريد إضافة خطوط خارجية إلى موقع الويب الخاص بك دون إبطاء سرعة موقع الويب الخاص بك؟

تعمل الخطوط المخصصة على تحسين الطباعة وتجربة المستخدم لموقع الويب الخاص بك ، ولكنها تستغرق وقتًا أطول للتحميل. والخبر السار هو أنه يمكنك استضافة الخطوط محليًا للتأكد من أن موقع الويب الخاص بك سريع دائمًا.

في هذه المقالة ، سنوضح لك كيفية استضافة الخطوط المحلية في WordPress.

لماذا تستضيف الخطوط محليًا في WordPress؟

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

- Advertisement -

لحسن الحظ ، هناك طريقة لاستخدام الخطوط المخصصة دون إبطاء موقعك. تم تقديم واجهة برمجة تطبيقات Webfonts جديدة في WordPress 6.0. يسمح لك هذا باستضافة الخطوط محليًا بحيث يتم تحميلها بشكل أسرع.

مع ذلك ، دعنا نلقي نظرة على كيفية استضافة الخطوط المحلية في WordPress لموقع ويب أسرع. سنغطي طريقتين ، والطريقة الأولى موصى بها لمعظم المستخدمين.

الطريقة الأولى: استضافة الخطوط المحلية في WordPress باستخدام البرنامج المساعد

أول شيء عليك القيام به هو تثبيت وتنشيط OMGF (تحسين My Google Fonts) المكون الإضافي. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون WordPress الإضافي.

OMGF هي واحدة من أفضل المكونات الإضافية للطباعة في WordPress. يوفر طريقة سهلة للمبتدئين لتحسين الأداء والامتثال للائحة العامة لحماية البيانات من خلال استضافة خطوط Google محليًا.

عند التنشيط ، تحتاج إلى زيارة الإعدادات »تحسين خطوط جوجل لتكوين البرنامج المساعد. يجب أن تبحث في علامة التبويب “تحسين الخطوط”.

- Advertisement -

لاحظ العبارة الموجودة أسفل عنوان “تحسين خطوط Google” التي تحتاج فقط إلى استخدام الإعدادات الافتراضية لاستبدال خطوط Google تلقائيًا بنُسخ مستضافة محليًا.

إعدادات OMGF

هذا يعني أنه أثناء قيامك بالتمرير لأسفل في صفحة الإعدادات ، كل ما عليك فعله هو التأكد من أن “خيار عرض الخط” يحتوي على الإعداد الافتراضي “تبديل (موصى به)” المحدد.

كل ما عليك فعله الآن هو النقر فوق الزر “حفظ وتحسين” في أسفل الصفحة.

- Advertisement -
انقر فوق الزر Save & Optimize

سترى رسالة في الجزء العلوي من الشاشة تقول “اكتمل التحسين بنجاح”.

تهانينا! يتم الآن استضافة خطوط Google الخاصة بك محليًا. سيتم تحميل موقع الويب الخاص بك بشكل أسرع وقد قللت من مخاطر الدعاوى القضائية الأوروبية.

الطريقة الثانية: استضافة الخطوط المحلية في WordPress يدويًا

يمكنك أيضًا استضافة الخطوط محليًا دون استخدام مكون إضافي باستخدام طريقة @ font-face من دليلنا حول كيفية إضافة خطوط مخصصة في WordPress. بينما تتطلب هذه الطريقة مزيدًا من العمل ، إلا أنها تتيح لك استخدام أي خط تريده على موقع الويب الخاص بك.

تحتاج إلى تنزيل الخطوط التي ترغب في استخدامها بتنسيق ويب. هناك العديد من الأماكن للعثور على خطوط ويب مجانية رائعة ، مثل Google Fonts و Typekit و FontSquirrel والمزيد.

تنزيل أحد خطوط Google

إذا لم يكن لديك تنسيق الويب للخط الخاص بك ، فيمكنك تحويله باستخدام تنسيق مولد FontSquirrel Webfont.

أنت الآن بحاجة إلى تخزين الخطوط على خادم استضافة WordPress الخاص بك. يمكنك تحميل الملفات باستخدام FTP أو باستخدام cPanel File Manager الخاص بالمضيف.

يجب عليك إنشاء مجلد جديد يسمى “الخطوط” في دليل المظهر الخاص بك أو القالب الفرعي وتحميله هناك.

قم بتحميل الخطوط إلى موقع الويب الخاص بك

بمجرد تحميل الخط ، ستحتاج إلى تحميل الخط في ورقة أنماط السمة الخاصة بك باستخدام CSS المخصص. يمكنك إضافة الشفرة مباشرة إلى ملف style.css الخاص بالسمات الخاصة بك ، أو باستخدام قسم CSS الإضافي لمخصص السمة.

يمكنك القيام بذلك باستخدام قاعدة CSS3 @ font-face مثل هذا:

@font-face {
    font-family: Arvo;
    src: url(
    font-weight: normal;
}

لا تنسَ استبدال عائلة الخط وعنوان URL الخاصين بك.

بعد ذلك ، يمكنك استخدام هذا الخط في أي مكان في ورقة أنماط السمة الخاصة بك أو قسم CSS الإضافي لمخصص السمة. يعتمد CSS الذي تستخدمه على المظهر الخاص بك والمكان الذي ترغب في استخدام الخط المحلي فيه. هذا مثال من موقعنا التجريبي:

h1 {
font-family: Arvo, Arial, sans-serif;
}

كما ترى ، يستخدم عنواننا الآن خط Arvo المستضاف محليًا.

إضافة CSS مخصص باستخدام أداة تخصيص السمة

نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية استضافة الخطوط المحلية في WordPress لموقع ويب أسرع. قد ترغب أيضًا في معرفة كيفية زيادة حركة مرور مدونتك ، أو التحقق من قائمتنا التي يجب أن تحتوي على مكونات WordPress الإضافية لتنمية موقعك.

أضف موقعنا  إلى موجز أخبار Google الخاص بك. أضف موقعنا  إلى موجز أخبار Google الخاص بك.

إذا أعجبك هذا المقال ، تابعنا على Twitter و Facebook.

اقرا ايضاً:

Share this Article
Follow:
نائب مدير موقع AE
Leave a comment
best WordPress Plugins for Business Websites in 2023 5 Best WordPress Ecommerce Plugins Compared – 2023 أفضل 5 شركات استضافة مواقع للويب 2023
adbanner