كيفية استضافة الخطوط محليًا في WordPress (السمات الكلاسيكية والمكتوبة!)

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

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

استضافة خطوط الويب محليًا مقابل عن بعد

لذا ، فإن أول شيء ربما يتعين علينا التحدث عنه هو ما تعنيه استضافة الخطوط محليًا.

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

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

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

لماذا يجب عليك استضافة الخطوط محليًا في WordPress؟

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

• مخاوف الخصوصية - خاصة إذا كنت تخضع لقوانين الخصوصية الأوروبية ، فإن استخدام خطوط الويب خاصة من Google قد يكون مشكلة. تقوم الشركة بجمع عناوين IP الخاصة بالزائر والمعلومات الأخرى ، والتي تحتاج إلى ذكرها في سياسة الخصوصية الخاصة بك إذا كنت ترغب في استخدامها. خلاف ذلك ، فإنك تخاطر بدفع غرامة. لتجنب مثل هذه المشكلات ، يختار العديد من الأشخاص ببساطة استضافة الخطوط محليًا بدلاً من ذلك.
• التوافر الرائع - تكمن مشكلة استخدام الخطوط المستضافة من جهة خارجية في أنك تجعل نفسك معتمدًا على الخدمة التي توفرها. إذا توقفوا عن العمل ، أو تعرضوا لعطل في الخادم ، أو إذا تغير عنوان URL الخاص بهم لسبب ما ، فجأة يصبح موقعك بدون المحرف الذي اخترته. في حين أن هذا غير محتمل في حالة Google ، فأنت لا تعرف أبدًا ، وحدثت أشياء أكثر جنونًا.
• اختيار أوسع - بينما تقدم المكتبات المنشأة نطاقًا واسعًا من الخطوط المختلفة ، إلا أن هناك الكثير المتاح غير الموجود في شكل خط الويب. وبالتالي ، فإن معرفة كيفية استضافة الخطوط محليًا يمنحك العديد من الإمكانيات لشراء واستخدام الخطوط المتميزة.
• الأداء - عند استضافة الخطوط الخاصة بك ، لديك سيطرة كاملة على كيفية تحميلها. يمكنك تكوين التخزين المؤقت الخاص بهم وإصلاح أي مشكلات على الخادم الخاص بك. بالإضافة إلى ذلك ، تؤدي استضافة الخطوط الخاصة بك إلى عدد أقل من طلبات HTTP حيث لا تحتاج إلى سحب البيانات من اتصال آخر. كل ما سبق مفيد لأداء الموقع.

العيوب والمحاذير

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

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

كلمة سريعة حول تنسيقات الملفات

شيء واحد يجب أن تعرفه هو أن الخطوط متوفرة بتنسيقات مختلفة ، وأكثرها شيوعًا هي:

• خطوط TrueType (.ttf) - هذا معيار خط تم تطويره في الثمانينيات بواسطة Apple و Microsoft. إنه التنسيق الأكثر شيوعًا لأنظمة التشغيل ويمكن استخدامه أيضًا على الويب. على الرغم من أنه ليس تنسيق الملف الموصى به ، إلا أنه يعد احتياطيًا جيدًا للإصدارات القديمة من Safari و iOS و Android.
• OpenType Fonts (.otf) - مبني على TrueType وتم تطويره وعلامة تجارية بواسطة Microsoft ، تنسيق .otf لخطوط الكمبيوتر القابلة للتحجيم.
• خطوط OpenType مضمنة (.eot) - هذا تنسيق قديم من OpenType للعرض على الويب. مطلوب من قبل الإصدارات القديمة من Internet Explorer.
• تنسيق خط الويب المفتوح (.woff) - تم تطوير WOFF بشكل صريح للاستخدام في صفحات الويب. إنه تنسيق OpenType / TrueType مع ضغط وبيانات وصفية إضافية. يوصى باستخدام هذا التنسيق بواسطة W3C وتدعمه جميع المتصفحات الرئيسية.
• Web Open Font Format 2.0 (.woff2) - نسخة محسنة من .woff مع ضغط أفضل لتنزيل أسرع. تم تطويره بواسطة Google ومتوافق مع المتصفحات الحديثة جدًا.
• خطوط SVG (.svg) - من الممكن أيضًا استخدام أشكال SVG للخطوط ولكن هذه الطريقة مدعومة حاليًا بواسطة Safari فقط.

إذن ، ما هو الشكل الذي يجب أن تختاره؟ بالطبع ، الأداء الحكيم WOFF / WOFF2 هو الأكثر منطقية. ومع ذلك ، من المفيد أيضًا أن تكون متوافقًا مع المتصفحات القديمة ، بما في ذلك التنسيقات الأخرى. بالإضافة إلى ذلك ، يوفر بعض الموفرين ، مثل Google Fonts ، تنسيقات .ttf أو ما شابه للتنزيل فقط. لحسن الحظ ، هناك طرق للتغلب على ذلك ، سنعرضها لك للحظات.

ومع ذلك ، ضع في اعتبارك ما سبق عند شراء خطوط مخصصة لموقع الويب الخاص بك من مزود.

استضافة الخطوط محليًا في WordPress (يدويًا ، السمات الكلاسيكية)

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

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

1. احصل على ملفات الخطوط الخاصة بك

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

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

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

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

ضمن Copy CSS ، يمكنك اختيار تنسيقات الملفات التي ستقوم بتنزيلها.

يتضمن إعداد "أفضل دعم " ملفات .eot و .ttf و .svg و .woff و .woff2 بينما تتضمن " المتصفحات الحديثة" الملفين الأخيرين فقط. من الجيد عادةً تركها في الإعداد الافتراضي.

بمجرد أن تكون سعيدًا باختياراتك ، قم بالتمرير طوال الطريق وانقر فوق الزر الأزرق الكبير لتنزيل ملفاتك.

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

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

لذلك ، اتصل به عبر عميل FTP وانتقل إلى دليل السمات (داخل wp-content> theme ). هنا ، من المنطقي وضع الملفات داخل الدليل الخاص بهم ، مثل fonts . لذلك ، قم أولاً بإنشاء الدليل ، ثم قم بسحب ملفات الخطوط وإفلاتها في عميل FTP لتحميلها.

الملفات صغيرة لذا لن يستغرق ذلك وقتًا طويلاً ويمكنك الانتقال إلى الخطوة التالية.

3. قم بتحميل الخطوط المحلية في قالب WordPress الخاص بك

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

في الجزء السفلي ، يمكنك تخصيص اسم المجلد ، في حالة عدم تسمية الملف الذي وضعت فيه ملفاتك fonts . يجب أن تكون قد حددت بالفعل اختياراتك حول ما إذا كنت تستخدم الرمز للحصول على أعلى توافق أو فقط للمتصفحات الحديثة في وقت سابق. لذلك ، حان الوقت الآن للنقر ببساطة في الحقل الذي يحتوي على الترميز لتمييزه بالكامل ، ثم نسخه باستخدام Ctrl / Cmd + C.

بعد ذلك ، انتقل إلى مجلد النسق على الخادم وافتح ورقة الأنماط ( style.css ). هنا ، الصق الترميز الذي نسخته مسبقًا في بدايته.

ملاحظة سريعة: من أجل استخدام المسارات النسبية مع @font-face ، مما يعني أنه إذا كنت تريد أن يصل WordPress إلى ملفات الخطوط المحلية داخل دليل fonts في مجلد السمة ، فأنت بحاجة إلى حذف ../ أمام عناوين URL أعلاه. لذلك ، في حالتي ، سيبدو كل سطر كما يلي:

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

هذا على افتراض أن ملف style.css الخاص بك موجود مباشرة في مجلد النسق الخاص بك.

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

4. القضاء على الخطوط التي يتم تحميلها بالفعل على موقعك

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

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

إذا تم ترميزها ، لسبب ما ، في ملف header.php الخاص بك ، فأنت بحاجة إلى إزالتها من هناك (استخدم قالبًا فرعيًا لذلك). إذا تم تحميلهم عبر functions.php ، يمكنك إزالة المكالمة من هناك. افعل ذلك في موضوع فرعي أيضًا.

أخيرًا ، هناك تعطيل وإزالة خطوط Google التي يمكنك تجربتها. يحتوي Autoptimize أيضًا على خيار لإزالة Google Fonts ، يمكنك العثور عليه ضمن علامة التبويب Extra .

4. استخدم الخطوط المحلية الخاصة بك

الخطوة الأخيرة هي أن تقوم بالفعل بتعيين الخطوط المحلية الخاصة بك إلى عناصر على موقعك. على سبيل المثال ، في نسق Twenty-One ، يمكنك استخدام العلامات التالية:

 .entry-title { font-family: Advent Pro; }

ينتج عن هذا ظهور عناوين منشورات المدونة الخاصة بك بخط Advent Pro الجديد:

استضافة الخطوط المحلية في السمات الكلاسيكية: إصدار البرنامج المساعد

إذا كان ما سبق معقدًا جدًا بالنسبة لك وكان لديك بالفعل خطوط Google على موقع الويب الخاص بك (على سبيل المثال من خلال سمة) ، يمكنك أيضًا استخدام حل مكون WordPress لاستضافة الخطوط محليًا. أحد أفضل الخيارات لذلك هو المكون الإضافي OMGF أو Optimize Google Fonts المتاح مجانًا في دليل WordPress. قم بتثبيته بالطريقة المعتادة عبر الإضافات> إضافة جديد .

بمجرد القيام بذلك ، ستجد عنصر قائمة جديدًا ضمن الإعدادات يسمى Optimize Google Fonts . انقر فوقه للوصول إلى هذه القائمة:

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

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

لقد دفعت OMGF أيضًا أداة إضافية لتثبيت المزيد من خطوط Google على موقعك. إنه ذو أسعار معقولة للغاية ويستحق المراجعة. تشمل خيارات المكونات الإضافية الأخرى Perfmatters وإصدار Pro من المكوّن الإضافي Disable and Remove Google Fonts المذكور أعلاه.

يدويًا استضافة الخطوط في قوالب بلوك ووردبريس

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

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

تحميل الخطوط داخل theme.json

في سمات الكتلة ، يعد theme.json الملف المركزي للتصميم وهناك يمكنك إعداد الخطوط. للقيام بذلك ، ابحث عن fontFamilies ضمن settings typography .

في سمات الكتلة ، تتم إضافة خطوط جديدة باستخدام القيم التالية:

• fontFamily - اسم الخط الجديد كما سيتم استخدامه في CSS. هذا يعني أنه يمكن أن يشمل الخطوط الاحتياطية.
• name - اسم الخط الذي سيظهر في الواجهة الخلفية لـ WordPress.
• slug - معرف فريد يستخدمه WordPress في خاصية CSS المخصصة.
• fontFace - يتوافق هذا مع قاعدة CSS @font-face وهو ما يميز الخط بالفعل.

من أجل العمل ، يتضمن fontFace العديد من المعلومات الأخرى:

• fontFamily - اسم الخط (مرة أخرى).
• fontWeight - قائمة بأوزان الخطوط المتاحة مفصولة بمسافات.
• fontStyle (اختياري) - يمكنك تعيين سمة font-style هنا ، على سبيل المثال normal أو italic .
• fontStretch (اختياري) - على سبيل المثال ، لمجموعات الخطوط التي تحتوي على إصدار مكثف.
• src - المسار إلى ملف الخط المحلي.

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

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

مع تنشيط ملحق Gutenberg ، يمكنك أيضًا استخدام wp_register_webfonts() داخل functions.php بدلاً من ذلك ، وهي وظيفة PHP جديدة لهذا الغرض لم يتم استخدامها في Core بعد. يأخذ نفس الحجج المذكورة أعلاه ولكن بتنسيق PHP.

الخطوط المحلية في قوالب القوالب: حل البرنامج المساعد

أخيرًا ، من الممكن أيضًا استضافة الخطوط محليًا في قوالب قوالب WordPress بمساعدة المكونات الإضافية. واحد منهم هو المكون الإضافي Create Block Theme. بعد تثبيته وتنشيطه ، فإنه يضيف خيار إدارة خطوط السمات الجديد إلى قائمة المظهر .

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

الأمر الأكثر إثارة للاهتمام هو الأزرار التي تشير إلى إضافة خط Google وإضافة خط محلي في الأعلى. لنبدأ بخيار Google Font.

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

سيقوم المكون الإضافي بعد ذلك بتنزيل الخطوط التي اخترتها وتضمينها تلقائيًا بحيث تكون متاحة في الكتلة ومحرر الموقع.

يعمل خيار الخط المحلي بشكل مشابه جدًا.

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

هل أنت جاهز لاستضافة الخطوط محليًا في WordPress؟

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

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

كيف اخترت استضافة الخطوط محليًا في WordPress؟ دعنا نعلم فى قسم التعليقات!