تغيير الخطوط في موقع ووردبريس بدون برمجة (وبدعم للخطوط العربية)

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

كيف تضيف خطوط إلى الموقع

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

هناك ثلاثة خيارات أساسية متاحة لإضافة الخطوط في الموقع

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

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

ماهي خطوط الويب

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

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

Adobe Edge Web Fonts: وهو أيضا موقع يوفر خطوط مجانية يمكنك استعمالها أيضا في موقعك بالإضافة إلى استعمالها في منتجات Adobe.

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

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

لماذا نستعمل خطوط الويب؟

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

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

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

تغيير الخطوط باستعمال إضافة

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

Google Fonts Typography

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

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

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

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

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

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

الإضافة “خطوط عربية”

هذه الإضافة من تطوير مبرمجين عرب لدعم موقع fontface.me الذي يوفر العديد من الخطوط العربية الجميلة مجانا و بمجهودات فردية مشكورة. وهي متوافقة مع آخر إصدار لووردبريس و يستعملها أزيد من 8000 موقع نشط.

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

https://www.youtube.com/watch?v=MoAGLEywBgg

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

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