لماذا اضافة خطوط ووردبريس مخصصة؟

يعد اختيار خطوط ووردبريس مخصصة او خط أمر بالغ الأهمية لتصميم موقع الويب الخاص بك. قد تعتقد أن لا أحد يهتم بالخط الذي تستخدمه – طالما أنه ليس Comic Sans – لكن هذا لا يمكن أن يكون أبعد من الحقيقة.

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

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

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

لماذا يجب عليك النظر في استخدام خطوط ووردبريس مخصصة

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

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

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

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

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

عندما يتعلق الأمر بإضافة خطوط ووردبريس مخصصة ، فهناك ثلاث طرق يمكنك اتباعها. يمكنك إما استخدام مكون إضافي لإضافة خطوط ووردبريس مخصصة أو الانتقال إلى المسار اليدوي. إذا قررت الذهاب يدويًا، فيمكنك إضافتها من خلال ملف header.php الخاص بالقالب أو عن طريق (CSS) وهي تعني صفحات الأنماط الانسيابية. في هذا القسم، سنعرض الطرق الثلاث باستخدام خطوط مختلفة، بحيث يمكنك اختيار الطريقة التي تفضلها.

1. أضف خطوط جوجل إلى ووردبريس باستخدام مكون إضافي

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

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

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

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

لتثبيت الاضافة، توجه إلى علامة التبويب الإضافات > إضافة جديدة داخل ووردبريس. الآن، ادخل فى محرك البحث Easy Google Fonts في شريط البحث على يسار الشاشة وانتظر ظهور الاضافة بين النتائج:

انقر فوق الزر “التنصيب الآن” وسيهتم ووردبريس بتثبيت الاضافة. عندما يكون جاهزًا للاستخدام، يظهر زر التفعيل بجوار اسم الاضافة. انقر عليها ويمكننا العمل الأن.

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

بمجرد فتح علامة التبويب هذه، سترى خيارًا يسمى الطباعة الافتراضية (Default Typography). داخل هذا القسم، يمكنك تغيير الخطوط التي يستخدمها ووردبريس لكل قسم من أقسام موقع الويب الخاص بك:

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

2. قم بإعداد خطوط أدوبي

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

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

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

سيطلب منك النظام الأساسي الآن تعيين اسم للمجموعة الخاصة بك والإشارة إلى النطاقات التي ستستخدمها.

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

الاتصال بموقعك عن طريق بروتوكول FTP

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

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

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

على سبيل المثال، إذا كنت مستخدمًا لـ دكتورميجا، فيمكنك الحصول على بيانات اعتماد FTP الخاصة بك من خلال الانتقال إلى لوحة التحكم > العام داخل لوحة Cpanel. يوجد قسم يسمى الملفات في أعلى الشاشة مباشرةً، بما في ذلك حسابات FTP التي تحتاجها:

بمجرد كتابة المعلومات في برنامج FileZilla، يمكنك النقر فوق الزر اتصال سريع (Quickconnect) على اليمين. سيقوم العميل بإنشاء اتصال بموقع الويب الخاص بك، وإظهار اثنين او اكثر من المجلدات على الجانب الأيسر السفلي من الشاشة:

التعامل مع ملفات القالب

هناك مجلد يسمي public_html ويتضمن جميع ملفات ووردبريس الخاصة بك. من هنا، انتقل إلى دليل wp-content / theme. في الداخل، ستجد مجلدات فردية، واحدة لكل قالب مثبت على موقع الويب الخاص بك:

الآن، ابحث عن المجلد الذي يتوافق مع القالب النشطة الخاصة بك. في الداخل، يجب أن يكون هناك ملف يسمى header.php:

من المهم أن تجد header.php المطابق للقالب النشط. خلاف ذلك، لن يتم تحميل الخطوط التي تضيفها إليها إلا إذا قمت بتبديل القالب. في أي حال، انقر بزر الماوس الأيمن مرتين فوق ملف header.php واختر خيار عرض/ تحرير:

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

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

أضف خطوط ووردبريس مخصصة باستخدام CSS

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

للبدء، ارجع إلى مجلد القالب النشط، والموجود داخل دليل public_html / wp-content / theme. بمجرد دخولك، انقر بزر الماوس الأيمن في أي مكان داخل المجلد واختر خيار “إنشاء دليل”. سيطلب منك FileZilla تعيين اسم للمجلد الجديد، حيث ستقوم بتخزين الخطوط التي تريد استخدامها. في حالتنا، قمنا بإنشاء اسم الخطوط ليكون دليل الخطوط:

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

سيتولى FileZilla تحميل الملف وعندما يصبح جاهز،

كيفية اسخدام ملفات CSS

يمكننا الانتقال إلى جزء CSS من هذا القسم. إذا عدت إلى المجلد الرئيسي للقالب النشط، ستجد ملف style.css فية:

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

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

@font-face {
    font-family: Font Name;
    src: url(http://www.yourdomain.com/wp-content/themes/your-active-theme/fonts/font-name.ttf);  
    font-weight: normal;  
}

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

 /wp-content/themes/themename

والخط الذي تحاول تحميله، وإضافة لاحقة ttf. إليه.

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

.h1 class-name { 
font-family: "Font Name", Arial, sans-serif; 
}

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

الخاتمة

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

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

1. اضف خطوط جوجل إلى ووردبريس باستخدام اضافة Easy Google Fonts.
2. قم بإعداد خطوط أدوبي من خلال ملف header.php للقالب.
3. إضافة خطوط ووردبريس مخصصة باستخدام CSS.

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