هل تريد إضافة خطوط مخصصة في ووردبريس؟ تسمح لك الخطوط المخصصة باستخدام مجموعة جميلة من الخطوط المختلفة على موقع الويب الخاص بك لتحسين الطباعة وتجربة المستخدم.
بصرف النظر عن المظهر الجيد ، يمكن أن تساعدك الخطوط المخصصة أيضًا في تحسين قابلية القراءة وإنشاء صورة للعلامة التجارية وزيادة الوقت الذي يقضيه المستخدمون على موقع الويب الخاص بك.
في هذه المقالة ، سنوضح لك كيفية إضافة خطوط مخصصة في ووردبريس باستخدام Google Fonts و TypeKit وطريقة CSS3 @ Font-Face.
ملاحظة: قد يؤدي تحميل عدد كبير جدًا من الخطوط إلى إبطاء موقع الويب الخاص بك. نوصي باختيار خطين واستخدامهما عبر موقع الويب الخاص بك. سنوضح لك أيضًا كيفية تحميلها بشكل صحيح دون إبطاء موقع الويب الخاص بك.
قبل أن ننظر في كيفية إضافة خطوط مخصصة في ووردبريس، دعنا نلقي نظرة على العثور على الخطوط المخصصة التي يمكنك استخدامها.
كيفية البحث عن خطوط مخصصة لاستخدامها في ووردبريس
كانت الخطوط باهظة الثمن ، ولكن ليس بعد الآن. هناك العديد من الأماكن للعثور على خطوط ويب مجانية رائعة مثل Google Fonts, Typekit, FontSquirrel,fonts.com.
إذا كنت لا تعرف كيفية مزج الخطوط ومطابقتها ، فجرّب Font Pair . يساعد المصممين على إقران خطوط Google الجميلة معًا.
أثناء انتقاء الخطوط الخاصة بك ، تذكر أن استخدام الكثير من الخطوط المخصصة سيؤدي إلى إبطاء موقع الويب الخاص بك. هذا هو السبب في أنه يجب عليك اختيار خطين واستخدامهما في جميع أنحاء التصميم الخاص بك. سيؤدي ذلك أيضًا إلى تحقيق الاتساق في التصميم الخاص بك.
إضافة خطوط مخصصة في ووردبريس من Google Fonts
إذا كنت ترغب في إضافة واستخدام خطوط Google على موقع الويب الخاص بك ، فهذه الطريقة هي الأسهل والموصى بها للمبتدئين.
أول شيء عليك القيام به هو تثبيت وتفعيل الإضافة Google Fonts Typography . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت الإضافة في WordPress.
عند التنشيط ، ستتاح لك الفرصة لإدخال عنوان بريدك الإلكتروني لتلقي دليل البدء السريع الرسمي.
بعد ذلك ، ستحتاج إلى النقر فوق Fonts Plugin »تخصيص الخطوط في الشريط الجانبي للمسؤول.
سينقلك هذا تلقائيًا إلى تخصيص ، ويفتح تلقائيًا قسم “Fonts Plugin” الجديد.
معاينة الخط في ووردبريس مباشرة على الموقع قبل النشر
هنا يمكنك اختيار الخطوط الافتراضية لموقع الويب الخاص بك في قسم “الإعدادات الأساسية” ، والخطوط الخاصة بأجزاء معينة من موقع الويب الخاص بك ضمن “الإعدادات المتقدمة”.
لنبدأ بالنقر فوق “الإعدادات الأساسية”. هنا يمكنك تحديد الخطوط للمحتوى والعناوين والأزرار والحقول.
تتيح لك القوائم المنسدلة “عائلة الخط” اختيار خط جديد. ستجد الخط الافتراضي في الأعلى ، ثم خطوط النظام ، وأخيراً قائمة ضخمة تضم أكثر من 1000 خط من خطوط Google.
عندما تختار خطًا جديدًا ، ستتغير المعاينة تلقائيًا لتظهر لك كيف يبدو.
الآن يمكنك استخدام الإعدادات المتقدمة للإضافة لضبط تحديدات الخطوط الخاصة بك.
ستحتاج إلى النقر فوق زر السهم الخلفي “<” في الجزء العلوي الأيسر من الصفحة ثم النقر فوق قسم “الإعدادات المتقدمة”.
ستجد هنا إعدادات لأقسام مختلفة من موقع الويب الخاص بك ، مثل عنوان الموقع وقائمة التنقل ومنطقة المحتوى والشريط الجانبي والتذييل.
على سبيل المثال ، يمنحك قسم “المحتوى” خيارات لتغيير خط مستويات العناوين والاقتباسات المختلفة.
يمكنك تحديد الخطوط المخصصة التي ترغب في استخدامها من القوائم المنسدلة.
يمكنك اختيار الخطوط المخصصة لمنطقة الشريط الجانبي بطريقة مماثلة.
ما عليك سوى النقر فوق زر الرجوع وإدخال إعدادات “الشريط الجانبي”. ستجد هناك قوائم منسدلة لتحديد الخطوط لعناوين ومحتويات الشريط الجانبي.
عندما تكون سعيدًا باختياراتك المخصصة للخط ، لا تنس النقر فوق الزر “نشر” لتخزين تغييراتك.
الطريقة الثانية: إضافة خطوط Google يدويًا في ووردبريس
تتطلب هذه الطريقة إضافة كود إلى ملفات قالب ووردبريس الخاصة بك
أولاً ، قم بزيارة مكتبة Google Fonts وحدد الخط الذي تريد استخدامه. بعد ذلك ، انقر فوق زر الاستخدام السريع أسفل الخط.
في صفحة الخط ، سترى الأنماط المتوفرة لهذا الخط. حدد الأنماط التي تريد استخدامها في مشروعك ، ثم انقر فوق زر الشريط الجانبي في الأعلى.
بعد ذلك ، ستحتاج إلى التبديل إلى علامة التبويب “تضمين” في الشريط الجانبي لنسخ كود التضمين.
هناك طريقتان يمكنك من خلالهما إضافة هذا الكود إلى موقع ووردبريس الخاص بك.
أولاً ، يمكنك تعديل ملف header.php الخاص بقالبك ولصق الكود قبل <body>العلامة.
ومع ذلك ، إذا لم تكن معتادًا على تحرير التعليمات البرمجية في ووردبريس ، فيمكنك استخدام إضافة لإضافة هذا الكود.
ما عليك سوى تثبيت وتفعيل الإضافة WPCode . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت الإضافة WordPress .
عند التنشيط ، انتقل إلى مقتطفات التعليمات البرمجية »صفحة الهيدر والتذييل والصق كود التضمين في مربع” الهيدر”.
لا تنس النقر فوق الزر “حفظ التغييرات” لتخزين تغييراتك. ستبدأ الإضافة الآن في تحميل رمز تضمين خط Google في جميع صفحات موقع الويب الخاص بك.
يمكنك استخدام هذا الخط في ورقة أنماط السمة الخاصة بك مثل هذا:
|
1
2
3
|
.h1 site-title {font-family: 'Open Sans', Arial, sans-serif;} |
إضافة خطوط مخصصة في ووردبريس باستخدام Typekit
يعد Typekit by Adobe Fonts موردًا مجانيًا ومتميزًا آخر للخطوط الرائعة التي يمكنك استخدامها في مشاريع التصميم الخاصة بك. لديهم اشتراك مدفوع بالإضافة إلى خطة مجانية محدودة يمكنك استخدامها.
ما عليك سوى الاشتراك للحصول على حساب Adobe Fonts وزيارة قسم “استعراض الخطوط”. من هنا تحتاج إلى النقر فوق </>الزر لتحديد خط وإنشاء مشروع.
بعد ذلك ، سترى رمز التضمين مع معرف المشروع الخاص بك. سيوضح لك أيضًا كيفية استخدام الخط في CSS الخاص بقالبك.
تحتاج إلى نسخ هذا الكود ولصقه داخل قسم <head> في موقع الويب الخاص بك.
هناك طريقتان يمكنك من خلالهما إضافة هذا الكود إلى موقع WordPress الخاص بك.
أولاً ، يمكنك تعديل ملف header.php الخاص بقالبك ولصق الكود قبل <body>العلامة.
ومع ذلك ، إذا لم تكن معتادًا على تحرير التعليمات البرمجية في ووردبريس، فيمكنك استخدام الإضافة لإضافة هذا الكود.
ما عليك سوى تثبيت وتفعيل الإضافة WPCode .
عند التنشيط ، انتقل إلى مقتطفات التعليمات البرمجية »صفحة الهيدر والتذييل والصق كود التضمين في مربع” الهيدر”. ثم انقر فوق الزر “حفظ التغييرات”.
هذا هو. يمكنك الآن استخدام خط Typekit الذي حددته في ورقة أنماط قالب ووردبريس الخاص بك كما يلي:
|
1 2 3 |
h1 .site-title { font-family: gilbert, sans-serif; } |
إضافة خطوط مخصصة في ووردبريس باستخدام CSS3 @ font-face
الطريقة المباشرة لإضافة الخطوط المخصصة في ووردبريس هي إضافة الخطوط باستخدام @font-faceطريقة CSS3. تتيح لك هذه الطريقة استخدام أي خط تريده على موقع الويب الخاص بك.
أولاً ، تحتاج إلى تنزيل الخط الذي تريده بتنسيق ويب. إذا لم يكن لديك تنسيق الويب للخط الخاص بك ، فيمكنك تحويله باستخدام منشئ FontSquirrel Webfont .
بمجرد حصولك على ملفات خطوط الويب ، ستحتاج إلى تحميلها على خادم استضافة WordPress الخاص بك . أفضل مكان لتحميل الخطوط هو داخل مجلد “الخطوط” الجديد في نسقك أو دليل القالب الفرعي.
يمكنك استخدام FTP أو File Manager في cPanel لتحميل الخط.
بمجرد تحميل الخط ، ستحتاج إلى تحميل الخط في ورقة أنماط القالب الخاصة بك باستخدام قاعدة CSS3 @ font-face مثل هذه:
|
1 2 3 4 5 |
@font-face { font-family: Arvo; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal; } |
لا تنسَ استبدال عائلة الخط وعنوان URL الخاصين بك.
بعد ذلك ، يمكنك استخدام هذا الخط في أي مكان في ورقة أنماط القالب الخاص بك مثل هذا:
|
1 2 3 |
.h1 site-title { font-family: "Arvo", Arial, sans-serif; } |
تحميل الخطوط مباشرة باستخدام CSS3 @ font-face ليس دائمًا الحل الأفضل. على سبيل المثال ، إذا كنت تستخدم خطًا من Google Fonts أو Typekit ، فمن الأفضل تقديم الخط مباشرةً من الخادم الخاص بهم للحصول على الأداء الأمثل.
نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية إضافة خطوط مخصصة في ووردبريس.