كيفية استخدام Google Fonts في موضوع WordPress Child

إذا كنت تستخدم قالبًا فرعيًا في WordPress وترغب في الاستفادة من العديد من خطوط Google المتاحة ، فهناك بعض الخطوات السهلة التي تحتاج إلى اتباعها. في هذه المقالة ، سنوضح لك كيفية استخدام Google Fonts في قالب WordPress الفرعي. أولاً ، عليك تحديد أي خط من خطوط Google تريد استخدامه. هناك الكثير للاختيار من بينها ، لذا خذ بعض الوقت لتصفح الخيارات. بمجرد أن تقرر ، توجه إلى موقع Google Fonts وانقر على الزر "إضافة إلى المجموعة" للخط الذي تريد استخدامه. بعد ذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانقر فوق علامة التبويب "المظهر". ثم اضغط على رابط "المحرر". سينقلك هذا إلى صفحة محرر السمات. في محرر السمات ، ابحث عن ملف "Stylesheet" (style.css). هذا هو المكان الذي ستحتاج فيه إلى إضافة رمز خط Google الخاص بك. قم بالتمرير لأسفل إلى أسفل ورقة الأنماط وابحث عن قسم "الطباعة". في هذا القسم ، سترى حقلاً يسمى "google_fonts". الصق الرمز الذي نسخته من موقع Google Fonts في هذا الحقل. الآن ، احفظ التغييرات وانتهيت! يجب أن يستخدم قالب WordPress الفرعي الخاص بك الآن خط Google الذي حددته.

يمكن إضافة خطوط Google إلى موقع WordPress باستخدام مساعدة سمة فرعية. تعد إضافة Google Font إلى موقعك أمرًا بسيطًا مثل ثلاث خطوات. باستخدام علامة التبويب التضمين ، ابحث عن الخيارimport ، وأمسك الخط ، والصقه في ملف style.html الخاص بالقالب الفرعي الخاص بك. يمكنك استخدام خاصية font-family لإظهارها في أنماطك. سترى رابطًا إلى مجموعات الخطوط المفضلة لديك في علامة تبويب التضمين الخاصة بتحديد الخط تحت المعيار. يجب تضمين هذا في ملف header.php الخاص بالقالب. على سبيل المثال في العام السابع والعشرين يجب أن تكون الصورة على النحو التالي: طريقة الربط. يمكنك استخدام الخطوط الجديدة في طريقتك. لا توجد تغييرات في بنية الملف كنتيجة لملف css الجديد.

كيف يمكنني إضافة خطوط Google إلى سمة WordPress الخاصة بي؟

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

يمكن عمل الخطوط التي تضيفها إلى موقع WordPress الخاص بك بطريقتين مختلفتين. يمكنك إما الحصول على خدمة مستضافة من Google Fonts أو تثبيت مكون إضافي لمدير الخطوط لإدارة خط موقعك. في هذا الدليل ، سنوضح لك كيفية إعداد الخطوط المخصصة باستخدام المكونات الإضافية. علاوة على ذلك ، سنزودك ببعض المكونات الإضافية التي يمكنك استخدامها. يمكنك تحديد خط مختلف من صفحة المنشور باستخدام المكون الإضافي Supreme Google WebFonts. يأتي هذا المكون الإضافي مع 26 عائلة من الخطوط بالإضافة إلى الإضافات الخاصة به. Styleguide هو مكون إضافي مجاني يسمح لك بتغيير ألوان خطوط موقع الويب الخاص بك.

فهو لا يحول الأحرف البسيطة إلى رموز مطبعية فحسب ، بل يولد أيضًا أحرفًا مناسبة للعرض. عند استخدام WP Typography ، يمكنك تخصيص خط WordPress الخاص بك ليناسب أسلوبك. لاستبدال حرف مثل رمز الطرح ، يمكن استخدام رمز واصلة (en أو شرطة em). هذا البرنامج المساعد يجعل من السهل التعامل مع الرموز المعقدة مثل علامات الاقتباس ، والأس ، ورموز حقوق النشر ، والأحرف الأخرى. WordPress Font Manager هو تطبيق WordPress يسمح لك بإنشاء وإدارة سمات WordPress الخاصة بك. باستخدام الخطوط ، يمكنك العثور على الخطوط وتنزيلها من مجموعة متنوعة من أدلة خدمات طباعة الويب ، مثل خطوط Google و Adobe Typekit و Cuffons وFontface. اسم السنجاب مشتق من الكلمة اليونانية للسنجاب. يمكن استخدام أداة Font Squirrel لدمج خطوط CSS مع مواقع WordPress. باستخدام هذا البرنامج المساعد ، يمكنك بسهولة معاينة أي نوع من الخطوط عن طريق تغيير لونه ومخططه وحجمه ووزنه.

هل يجب أن أقوم بتحميل خطوط Google محليًا ووردبريس؟

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

كيفية تحميل خطوط جوجل في ووردبريس

إضافة خطوط جوجل في الووردبريس
أول شيء عليك القيام به هو التوجه إلى موقع Google Fonts على الويب وتصفح مكتبة الخطوط.
بمجرد العثور على الخط الذي يعجبك ، انقر فوق الزر "إضافة إلى المجموعة".
بعد ذلك ، انقر فوق الزر "استخدام" في الجزء العلوي من الصفحة.
في الصفحة التالية ، ستحتاج إلى تحديد الأنماط التي تريد استخدامها ، بالإضافة إلى مجموعات الأحرف.
بمجرد القيام بذلك ، انقر فوق الزر "الحصول على الرمز".
في الصفحة التالية ، ستحصل على جزء من التعليمات البرمجية التي تحتاج إلى إضافتها إلى موقع WordPress الخاص بك.
أسهل طريقة للقيام بذلك هي تثبيت المكون الإضافي Insert Headers and Footers.
بمجرد تثبيت المكون الإضافي وتنشيطه ، توجه إلى صفحة الإعدادات »إدراج الرؤوس والتذييلات وإضافة الكود في قسم الرأس.
لا تنس النقر فوق الزر "حفظ التغييرات" لتخزين إعداداتك.
وهذا كل شيء! لقد نجحت في إضافة خطوط Google إلى موقع WordPress الخاص بك.

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

تم دمج خطوط Google بالفعل في العديد من سمات WordPress. تتيح لك واجهة مستخدم البرنامج المساعد الوصول إلى مجموعة واسعة من الخطوط. يمكنك الاختيار من بين أكثر من 100 نوع مختلف من الخطوط في القائمة المنسدلة لخيار "عائلة الخطوط" لأقسام مختلفة من موقع الويب الخاص بك. في معاينة Customizer ، سترى قائمة بالخطوط التي يمكنك إضافتها إلى خطك المخصص .

WordPress خطوط Google الاتصال المسبق

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

اتصل بـ https://Fonts.gstatic.com باستخدام طريقة الاتصال المسبق. يعد استخدام المكوّن الإضافي المقتطف dotsfired الطريقة الأكثر ملاءمة لعرض 9 ردود ، من 1 إلى 9 (من إجمالي 9). يبدو أن واحدًا أو أكثر من الإعدادات مع Autoptomize و YITH Zoom Magnifier تتعارض. نتيجة لذلك ، عندما تقوم بإلغاء تزامن خطوط Google مع jQuery ، فسيؤدي ذلك إلى ظهور خطأ وحدة التحكم "لم يتم تعريف jQuery". لا يوجد اتصال مسبق ، ولا يوجد أي سبب للقلق بشأن (خصائص العرض غير المحددة). يمكنني تقديم مقتطف كود قوي للغاية يوجه AO لإزالة جميع JS باستخدام السلسلة WebFontConfig فيه ، لكنني أفضل استخدام تكوين السمة أو المكون الإضافي الخاص بك.

إضافة خطوط الويب من Google

تعد إضافة Google Web Fonts سهلة للغاية ولا تستغرق سوى بضع دقائق للقيام بها. أولاً ، تحتاج إلى العثور على Google Web Fonts التي تريد استخدامها على موقع الويب الخاص بك. بمجرد العثور على الخطوط التي تريد استخدامها ، تحتاج إلى إضافة الكود التالي إلى قسم موقع الويب الخاص بك: استبدل "Roboto" باسم Google Web Font الذي تريد استخدامه. بمجرد إضافة الكود إلى موقع الويب الخاص بك ، يمكنك استخدام الخط عن طريق إضافة CSS التالية إلى ورقة أنماط موقع الويب الخاص بك: font-family: 'Roboto'، sans-serif؛ استبدل "Roboto" باسم Google Web Font الذي تستخدمه. هذا كل ما في الامر!

خط Google (اختصار لشبكة توصيل المحتوى) عبارة عن مكتبة على الإنترنت لمحارف Google . يسمح لنا بالاختيار من بين مجموعة متنوعة من مجموعات الخطوط. يرجى مراجعة الأقسام التالية للحصول على مزيد من المعلومات حول خط Google. إذا كنت تستخدم خطوط Google متعددة ، فستحتاج إلى نسخ الرابط في رأس ملف HTML ، ثم لصقه في منطقة خطوط Google المتعددة. اختر من بين خطين مختلفين من خطوط Google: Comforter و Open Sans. لتصميم قواعد CSS ، استخدم محددات العناصر لجعلها تظهر بالشكل المطلوب. في المقتطف التالي ، سيكون هناك إخراج مطابق. من خلال البحث عن خطوط Google في العائلة والفئة ، يمكنك إنشاء خط يتوافق مع نمطك المفضل.

3 طرق لإضافة خطوط جوجل إلى موقع الويب الخاص بك

اختر خطوط Google وأضفها إلى موقع الويب الخاص بك. يعد تثبيت خطوط Google أحد الخيارات القليلة المتاحة على موقع الويب الخاص بك. إذا كنت تريد تغيير نمط الخط ، فانتقل إلى Google وابحث عن الخطوط ؛ ثم ، في فئة الخط والعائلة ، اختر النمط الذي تريده. بعد اختيار الخط ، ستحتاج إلى نسخ رابط الخط ولصقه في قسم رأس ملف HTML. إذا كنت بحاجة إلى استيراد خطوط Google من موقع ويب آخر ، فاتبع هذه الخطوات. تتيح لك عمليات استيراد الخطوط من Google استخدام خط دون الحاجة إلى نسخ رابط الخط من موقع الويب الخاص بك. من خلال فتح خطوط Google والنقر على الخط (بطاقة بها) ، يمكنك تحديد النمط الذي تريده. إلى اليمين ، ستجد حاوية باسم العائلة المختارة. عند مطالبتك بـEmbed ، حدد ارتباط> أو استيراد [/ رابط] ، اعتمادًا على مكان إضافة الخط (بتنسيق HTML أو CSS).