تغيير الخط ووردبريس اللون والحجم والشكل

تغيير الخط ووردبريس

39

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

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

 

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

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

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

إليك بعض الخيارات المتاحة لك:

  • استخدام خطوط الويب مثل Google Fonts عن طريق تثبيت مكون إضافي يمنحك الوصول.
  • استخدام خطوط الويب عن طريق ترميزها في السمة الخاصة بك وتثبيتها (ليس صعبًا كما يبدو).
  • استضافة الخطوط الخاصة بك على موقع الويب الخاص بك وإضافة تلك إلى السمة الخاصة بك.

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

استخدام خطوط الويب في WordPress

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

كيفية تغيير الخط ووردبريس

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

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

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

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

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

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

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

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

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

العثور على أفضل خطوط الويب لموقعك

بعد أن قررت أنك ستستخدم خطوط الويب ، لديك الآن قرار صعب: ما الخطوط التي ستستخدمها؟

في الأيام الخوالي عندما كان بإمكان جميع مطوري الويب الوصول إلى تلك الخطوط المثبتة مسبقًا على الويب ، كان هذا قرارًا سهلاً للغاية. هل تريد استخدام خط serif أم sans-serif؟ (خطوط Serif لها خط صغير أو حد في نهاية حد أكبر في كل حرف ، لا تفعل خطوط sans-serif.) بعد اتخاذ هذا القرار ، كانت اختياراتك محدودة للغاية.

 

اختيار الخطوط المناسبة لموقع الويب

انظر إلى المواد المطبوعة الخاصة بك. هل هناك خطوط مستخدمة بالفعل ويمكنك العثور عليها كخطوط ويب؟ إذا لم يكن كذلك ، هل يمكنك العثور على شيء مشابه؟ وبالتالي تتمكن من تغيير الخط ووردبريس.

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

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

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

اختر من خطوط Google الأكثر شيوعًا – وستكون هذه الخطوط مألوفة لزوار الموقع ويسهل قراءتها.

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

تجربة الخط الخاص بك

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

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

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

يمنحك المكون الإضافي لخطوط الطباعة في Google الوصول إلى مكتبة خطوط Google بالكامل ويتيح لك مراجعتها عبر WordPress Customizer.

قم بتثبيت المكون الإضافي على موقعك تمامًا كما تفعل مع أي مكون إضافي آخر ، ثم قم بتنشيطه.

انتقل إلى المظهر> تخصيص للوصول إلى أداة التخصيص. سترى قسمًا لخطوط Google.

خطوط Google في Customizer

انقر فوق هذا الارتباط للوصول إلى إعدادات الخطوط الخاصة بك. قم بتكوينها كما يلي:

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

تكوين الإعدادات الأساسية

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

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

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

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

تحرير ألوان الخطوط

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

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

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

تغيير لون العنوان

يمكنك تكرار هذا مع أي عناصر نصية تريد إضافة لون إليها وأيضًا أي عنصر تريد إضافة خطوط مخصصة أيضًا لم يتم تضمينها في الخيارات في الشاشات الأخرى.

كيفية إضافة خطوط الويب يدويا

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

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

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

للمزيد اضغط هنا

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.