كل ما تريد معرفته عن خطوط الووردبريس المناسبة لموقعك وكيفية تغيرها

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

ما هي أهمية الخطوط في موقع الووردبريس الخاص بك؟

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

أين تجد الخطوط التي تريدها؟

1- موقع Google Fonts.

2- موقع 1001Free Fonts.

3- موقع Adobe Fonts.

4- موقع Font Freak.

5- موقع Fontspace.

6- موقع Font.com.

7- موقع Font Squirrel.

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

– بدايةً، ستدخل على موقع Google Font.

– ‏ستبدأ بكتابة أي كلمة تريدها وذلك للمعاينة كما موضح أدناه.

– ‏بعدها يمكنك تحديد تصنيف من التصنيفات الموضحة، فـ Serif يعبر عن الخطوط التي يكون بها نسبة ميل أو تعرج، وSans-Serif يعبر عن الخطوط المستقيمة والتي لا يكون بها نسبة ميل أو تعرج، وDisplay يعبر عن الخطوط كبيرة الحجم، وHandwriting يعبر عن الخطوط المكتوبة بخط اليد. وأخيرًا، Monosp: يعبر عن الخطوط التي تشغل جميع حروفها نفس الإرتفاع والمساحة.

– عليك تحديد اللغة التي تريدها.

– ‏تحديد خصائص الخط من حيث مائل أم سميك.

– ‏من ثم تضغط على الخط الذي حددته، لتذهب إلى صفحة خاصة بخصائص الخط.

– ‏عليك بعدها التأكد من أن الخط متاح للاستخدام أو مفتوح المصدر وذلك بنزول أسفل الصفحة وفي جزء License، ستجد جملة Open Font License.

– ‏بعدها عليك حفظ اسم الخط لديك لأننا سنحتاجه لاحقًا.

كيفية إضافة الخطوط لموقع الووردبريس الخاص بك

هناك طريقتان مختلفتان لإضافة خطوط الووردبريس وهما:

الطريقة الأولى: يدويًا

إذا كنت لا ترغب في إضافة المزيد من المكونات الإضافية لموقعك، فيمكنك إضافة الخطوط يدويًا وذلك عن طريق تحميل الخط الخاص بك إلى حساب الاستضافة والتعديل في ملف CSS الخاص بالقالب وإليك الخطوات:

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

– ‏بعدها ستضيف ملف الخطوط الخاص بك إلى دليل wp-content وthemes وyour-theme وfonts.

– ‏عليك إنشاء مجلد خطوط منفصل إذا لم يكن لديك مجلد.

– ‏من لوحة تحكم الووردبريس، توجه إلى «المظهر-appearance» من ثم «محرر القوالب-Theme editor» ومرر لأسفل واضف الكود الخاص بالخط ويمكنك الحصول عليه عن طريق الصعود لأعلى صفحة الخصائص الخاصة بالخط والضغط على Select this Style. بعدها ستظهر قائمة جانبية، وستقوم بنسخ كود تضمين الخط وبعد ذلك تقوم بنسخ كود CSS. على سبيل المثال كما موضح بالأدنى.

– ‏بعد الذهاب لمحرر القوالب، اضغط على ترويسة القالب (Header.php) وقم بنسخ كود تضمين الخط الذي حصلت عليه من موقع Google Font.

– ‏نهايةً، عليك لصق الكود بين <Head> </Head>، ثم اضغط على تحديث الملف.

كما ننوه أن تلك الخطوات تحتاج إلى خبرة برمجية.

الطريقة الثانية: من خلال المكونات الإضافية

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

• المكون الإضافي WP Google Fonts

يمكنك مع هذا المكون استخدام الخطوط المخصصة وتطبيقها على عناصر CSS معينة وكل ما عليك اتباع الخطوات الآتية:

– عليك أولًا تثبيت المكون الإضافي WP Google Fonts وتنشيطه.

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

• المكون الإضافي Easy Google Fonts

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

– بعد أن تثبت وتنشط المكون الإضافي Easy Google Fonts، يمكنك تعديل الإعدادات.

– ‏ستذهب إلى «الإعدادات-Settings» ومن ثم Google Fonts.

– ‏كما إذا أردت تعديل أسلوب طباعة «المظهر-Appearance» الخاص بك، فعليك الانتقال من المظهر إلى «تخصيص-Customize» والبدء في تخصيص القسم، إذ يمكنك التحكم في الخطوط في أي جزء من موقعك.

– ‏بعد أن تفتح لك صفحة التخصيص، عليك الضغط Typography لكي تتمكن من إضافة الخطوط المخصصة لموقعك.

– ‏بعدها سيظهر لك جميع أنواع الخطوط في موقعك، وعليك تحديد الخط الذي تريد تغييره.

– ‏الآن، عليك الذهاب إلى Google Fonts واختيار خط وحفظ هذا الخط في Font Family ونحدد وزن الخط.

• المكون الإضافي Use Any Font

يُعد هذا المكون من المكونات الإضافية المميزة التي تتيح لك إضافة العديد من الخطوط، وإليك خطوات التعامل معه:

– بعد تثبيت وتنشيط المكون. قم بإنشاء مفتاح API مجانب واضغط على زر التحقق.

– ‏بعد التحقق، بإمكانك تحميل الخطوط بتنسيقات مثل TTF وOTF وWOFF.

5 طرق لتغيير الخطوط في موقع الووردبريس الخاص بك

1- تغيير الخطوط من خلال منشئ القوالب

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

– عليك أن تثبت وتنشط SeedProd.

– ‏بعدها عليك إدخال مفتاح الترخيص خاصتك والضغط على «التحقق من المفتاح-Verify Key» ويمكنك العثور على مفتاح الترخيص في حساب SeedProd الخاص بك.

– ‏بعد ذلك توجه من SeedProd إلى «منشئ القالب-Theme Builder» ومن ثم اضغط على «القوالب-Themes».

– ‏بعدها سيُعرض عليك المكون الإضافي عدة قوالب للاختيار من بينها وعليك فقط اختيار القالب الذي تريد استخدامه، وسنضرب هنا مثال باختيارنا قالب Starter.

– ‏بعدها سينشئ SeedProd قوالب نسقها مختلف، ويمكنك تحرير كل قالب وتخصيصه على حدى وسنبدأ بقالب الصفحة الرئيسية ونغير خطوط العناصر المختلفة وذلك بالضغط على «تعديل التصميم-Edit Design».

– ‏لتغيير خط أي قسم، عليك تحديده أولًا، فمثلًا سنحدد مربع النص أسفل عنوان Starter.

– ‏بعدها، انتقل إلى علامة تبويب «الخيارات المتقدمة-Advanced» والضغط على «تحرير-Edit» أمام الطباعة.

– ‏بعد ذلك سترى خيارات متعددة ويمكنك الضغط على القائمة المنسدلة «عائلة الخط-Font Family» واختيار خط للنص الخاص بك، كما أن هناك خيارات لتحديد وزن الخط وضبط الحجم وارتفاعه وتباعد الأحرف والمحاذاة وغيرها.

– ‏يمكنك تتبع تلك الخطوات في تغيير خط العناصر الأخرى، ولا تنس بالنهاية أن تضغط على «حفظ-Save».

2- تغيير الخطوط من خلال تخصيص قالب الووردبريس

تُعد تلك الطريقة من الطرق السهلة، وهنا سنطبق على قالب Astra وتتغير الخيارات طبقًا للقالب الذي تستخدمه ولكن الخطوات مشابهة:

– من لوحة تحكم الووردبريس، عليك الذهاب إلى «مظهر-Appearance» من ثم إلى «تخصيص-Customize».

– ‏لتغيير الخط في هذا القالب، يمكنك الضغط على خيار «عالمي-Global» كما موضح أدناه.

– ‏ستلاحظ خيارات مثل الطباعة والألوان والأزرار، عليك النقر على خيار «الطباعة-Typography». حيث يمكنك اختيار خطوط مختلفة ضمن قسم «الإعدادات المسبقة-Presets».

– ‏كما يمكنك استخدام خط مختلف للنص والعناوين، وعليك اختيار خط من القائمة المنسدلة Font Family لأي عنصر فردي. كذلك هناك خيارات أخرى لتغيير حجم الخط ووزنه وغيرها.

– ‏لا تنس بالنهاية الضغط على زر «نشر-publish».

3- تغيير الخطوط من خلال محرر الموقع

يمكنك محرر الموقع بتخصيص القالب باستخدام الكتل مثل تحرير المنشورات أو الصفحات باستخدام محرر محتوى الووردبريس وهنا سنطبق على قالب Twenty-Two-Two وقد تختلف بالطبع واجهة كل قالب عن الآخر، فعليك معرفة قالبك جيدًا، إليك خطوات تغيير الخطوط في قالب Twenty-Two-Two:

– من لوحة تحكم الووردبريس، عليك الذهاب إلى «مظهر-Appearance» ومن ثم «محرر-Editor».