كيفية إضافة خطوط جوجل إلى ووردبريس

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

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

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

ما هي خطوط جوجل؟

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

تتكون إضافة خطوط Google إلى صفحاتنا من عدة خطوات:

1- إيجاد خط جوجل الصحيح

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

2- اختيار الخط

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

يمكنك تحديد خطوط متعددة وتخطيطاتها في نفس الوقت ، ولكن كن على دراية بأن هذا قد يؤدي إلى إبطاء صفحاتك عند تحميلها. لأغراض العرض ، اخترنا ملف خط Lato Regular 400.

3- التنفيذ

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

بعد قيامك بنسخ محتوى الصندوق ، حدد موقع ملف function.php السمة الخاص بك وقم بتحريره. سنضيف الخط باستخدام دالة wp_enqueue_style ().

داخل ملف jobs.php الخاص بك ، اكتب هذا الرمز:

function add_google_fonts ( ) {
wp_enqueue_style ('add_google_fonts' , ' https://fonts.googleapis.com/css2?family=Lato&display=swap' ) ; }
add_action ( 'wp_enqueue_scripts' , 'add_google_fonts' ) ;

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

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

إضافة خطوط جوجل مع البرنامج المساعد

فيما يلي سنوضح لك كيفية إضافة Google Fonts باستخدام مكون إضافي.

قم بزيارة لوحة تحكم المسؤول ، ثم “المكونات الإضافية” ثم “إضافة جديد”. في حقل البحث ، اكتب “Google Fonts”.

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

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

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

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

بعد التثبيت ، سترى خيارًا جديدًا يظهر في خيار “Theme Customizer” – “Fonts Plugin”.

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

الإعدادات الأساسية – هنا يمكنك ضبط الخط للمحتوى الخاص بك والخط للعناوين والخط لحقول الإدخال والأزرار الخاصة بك ؛

إعدادات متقدمة – هنا يمكنك ضبط الخطوط المتعلقة بعلامتك التجارية والتنقل والمحتوى والشريط الجانبي والتذييل ؛

تحميل الخط – القدرة على إيقاف تشغيل الخطوط التي لا تستخدمها حتى لا تبطئ موقع الويب الخاص بك ؛

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

لأغراض التوضيح ، لقد وضعنا “Molle” كخط محتوى على موقعنا على الإنترنت. بالنسبة إلى عناويننا ، يكون الخط هو Courier New ، وبالنسبة إلى الأزرار ، يكون الخط متشابهًا. كما ذكرنا سابقًا ، يمكنك رؤية جميع التغييرات مباشرة. بمجرد تحديد الخطوط التي تريدها ، انقر فوق “نشر” وستصبح جميع التغييرات مرئية للعامة.

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

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