[ شرح ] كيفية تغيير الخطوط في ووردبريس

Yahia

Yahia

Administrative
طاقم الإدارة
مــدير عـــام
11 يوليو 2022
688
4
51
28
Egypt
هناك طريقة رائعة لإضافة بعض العلامات التجارية والفردية إلى موقع WordPress الخاص بك وهي تغيير الخطوط في المظهر الخاص بك.

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

How to change fonts in wordpress featured image

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

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


هناك ثلاثة خيارات رئيسية متاحة لك لتغيير الخطوط في WordPress:

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

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


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

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

How to change fonts in wordpress web fonts

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

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

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


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

  1. للبدء ، قم بتسجيل الدخول إلى لوحة تحكم مسؤول WordPress الخاصة بك ، وحدد المكونات الإضافية> إضافة جديد .
How to change fonts in wordpress plugins add new
  1. اكتب طباعة خطوط Google في مربع البحث ، وحدد التثبيت الآن .
Fonts in wordpress google fonts typography install
  1. حدد تنشيط .
Onts in wordpress google fonts typography activate
  1. بعد ذلك ، قم بالوصول إلى Customizer بالانتقال إلى Appearance> Customize .
E fonts typography customizer appearance customize
  1. حدد قسم خطوط Google .
 to change fonts in wordpress google fonts section
  1. بعد ذلك ، انقر فوق الارتباط لفتح إعدادات الخطوط وتكوينها على النحو التالي:
  • ضمن الإعدادات الأساسية ، قم بتعيين الخط الافتراضي للنص الأساسي والعناوين والأزرار.
Oogle fonts typography basic settings google fonts
  • ضمن الإعدادات المتقدمة ، قم بتكوين عنوان الموقع والوصف والقائمة والعناوين والمحتوى والشريط الجانبي والتذييل.
Le fonts typography advanced settings google fonts
  • قم بإلغاء تحديد أي أوزان خطوط غير مرغوب فيها في قسم تحميل الخط
    من فضلك قم , تسجيل الدخول أو تسجيل لعرض المحتوى
    .
 google fonts typography font loading google fonts

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

Nts in wordpress google fonts typography debugging
  1. يمكنك اختبار هذه الإعدادات في "أداة التخصيص" للتأكد من أنها تعمل بالطريقة التي تريدها ، ثم حدد " نشر" .
Fonts in wordpress google fonts typography publish

ملاحظة : إذا نسيت تحديد النشر في أداة التخصيص ، فستفقد جميع التغييرات التي أجريتها.

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


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

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

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

  1. للبدء ، حدد خطًا من مكتبة
    من فضلك قم , تسجيل الدخول أو تسجيل لعرض المحتوى
    ، وحدد رمز + (علامة الجمع) لإضافته إلى مكتبتك.
Nts in wordpress web fonts manually code add fonts
  1. بعد ذلك ، حدد علامة التبويب في الجزء السفلي حيث ستجد الرمز لإضافته إلى موقعك. انتقل إلى قسم Embed Font ضمن علامة التبويب Embed . ستجد الرمز الذي تم إنشاؤه بواسطة Google Fonts ، والذي يبدو كالتالي:

<link href = ”https://fonts.googleapis.com/css2؟family=Work+Sans:wght@100&display=swap” rel = ”stylesheet”>

Manually code customize font styles embed tab code

ملاحظة : لقد اخترنا Work Sans لهذا الدليل ، لذا قد يختلف اسم الخط بناءً على ما اخترته.

  1. انسخ هذا الجزء من الشفرة: [URL unfurl = "true"] https://fonts.googleapis.com/css2؟family=Work+Sans [/ URL]
Nts in wordpress google fonts typography copy code

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

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

الوظيفة wosib_add_google_fonts () {
wp_register_style ('googleFonts'، '
من فضلك قم , تسجيل الدخول أو تسجيل لعرض المحتوى
Sans') ؛

wp_enqueue_style ("googleFonts") ،
}

add_action ('wp_enqueue_scripts'، 'mybh_add_google_fonts') ؛


Oogle fonts typography enqueue functions file code
  1. يمكنك إضافة سطر جديد إلى وظيفتك أو إلى نفس السطر إذا كنت ترغب في إضافة المزيد من الخطوط في المستقبل على النحو التالي:

function mybh_add_google_fonts () {
wp_register_style ('googleFonts'، '
من فضلك قم , تسجيل الدخول أو تسجيل لعرض المحتوى
Sans') ؛

wp_enqueue_style ("googleFonts") ،
}

add_action ('wp_enqueue_scripts'، 'mybh_add_google_fonts') ؛


في هذه الحالة ، قمنا بوضع خطوط Cambria و Work Sans في قائمة الانتظار.

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

  1. للقيام بذلك ، افتح ملف style.css الخاص بالسمة وأضف الكود لتصميم العناصر الفردية باستخدام خطوط الويب كما يلي:

جسم {
font-family: 'Work Sans'، sans-serif؛
}

h1, h2, h3 {
عائلة الخطوط: 'Cambria' ، serif ؛
}


Dpress google fonts typography style css file code

في هذه الحالة ، سيكون الخط الرئيسي هو Work Sans بينما ستستخدم عناصر الرأس مثل h1 و h2 و h3 Cambria.

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

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

جسم {
عائلة الخطوط: "Work Sans"، Arial، sans-serif؛
}

h1, h2, h3 {
عائلة الخطوط: 'Cambria'، Times New Roman، serif؛
}


إذا كان كل شيء على ما يرام ، فسيرى زوار موقعك خطوط الويب الافتراضية الخاصة بك ، في حالتنا Work Sans و Cambria. إذا كانت هناك مشكلات ، فسترى الخطوط الاحتياطية ، على سبيل المثال Arial أو Times New Roman في حالتنا.

2. كيفية تغيير الخطوط في ووردبريس عن طريق استضافة الخطوط


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

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

  1. للبدء ، قم بتنزيل ملف الخط وفك ضغطه وتحميله إلى موقعك ثم اربطه في ورقة الأنماط الخاصة بك. في هذه الحالة ، لا يتعين عليك إدراج الخطوط في ملف function.php في قائمة الانتظار كما فعلت مع خطوط الويب. تأكد من أن الملفات التي تقوم بتحميلها بتنسيق .woff قبل استخدامها على موقع الويب الخاص بك.
How to change fonts in wordpress download fonts
  1. بعد ذلك ، انتقل إلى wp-content / theme / themename لتحميل ملف الخط إلى السمة الخاصة بك.
  2. افتح ورقة الأنماط وأضف الكود التالي (في هذه الحالة ، نستخدم خط Work Sans ولكن يمكنك استبداله بخطوطك الخاصة):

@ font-face {
عائلة الخطوط: "Work Sans" ؛

src: url ("الخطوط / Work Sans-Medium.ttf") تنسيق ("woff") ؛ /* واسطة */
وزن الخط: عادي ؛
نمط الخط: عادي ؛
}

@ font-face {

عائلة الخطوط: "Work Sans" ؛
src: url ("الخطوط / Work Sans-Bold.ttf" تنسيق ("woff") ؛ /* واسطة */
وزن الخط: عريض ؛
نمط الخط: عادي ؛
}

@ font-face {
عائلة الخطوط: "Cambria" ؛

src: url ("الخطوط / Cambria.ttf") تنسيق ("woff") ؛ /* واسطة */
وزن الخط: عادي ؛
نمط الخط: عادي ؛
}

ملاحظة
: يسمح لك استخدامfontface باستخدام الخط الغامق والمائل والأشكال الأخرى للخط ، وبعد ذلك يمكنك تحديد الوزن أو النمط لكل خط.

  1. بعد ذلك ، أضف نمطًا لعناصرك على النحو التالي:

جسم {
عائلة الخطوط: "Work Sans"، Arial، sans-serif؛

src: url (“/ Fonts / Work Sans-Medium.ttf”)؛
}

h1, h2, h3 {
عائلة الخطوط: 'Cambria'، Times New Roman، serif؛
}


قم بتخصيص طباعة WordPress الخاصة بك


يعد تغيير الخطوط في WordPress فكرة رائعة لتحسين العلامة التجارية وتجربة المستخدم. إنها ليست مهمة مباشرة ، ولكن سيكون لديك المزيد من التحكم في المظهر الخاص بك.

هل تمكنت من تخصيص خطوط موقعك باستخدام الخطوات باستخدام النصائح الواردة في هذا الدليل؟ قل لنا في التعليقات.
 
تم اكتشاف مانع الاعلانات

نحن ندرك أن الإعلانات مزعجة!

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

لقد قمت بتعطيل AdBlock    ًلا شكرا