3 طرق مختلفة لإضافة خطوط مخصصة إلى سمة موقع WordPress الخاص بك

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

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

أول الأشياء أولاً ، إيجاد الخط الصحيح ؛ هناك عدد لا يحصى من المواقع التي تقدم آلاف الخطوط المجانية لتنزيلها. جرب Google Fonts و TemplateMonster و MyFonts و FontSpring و Cufonfonts و Dafont و Font Squirrel و Edge Web Fonts و 1001 Free Fonts و Fonts.com.

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

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

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

يتضمن هذا الخطوات التالية:

الخطوة 1

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

الخطوة 2

بعد ذلك ، يمكنك تحميل ملف الخط هذا في خادم استضافة WordPress الخاص بك ضمن دليل "wp-content / theme / your-theme-folder / الخطوط". إذا لم تكن قد قمت بالفعل بإعداد مجلد مخصص لخطوطك المخصصة ، فأنشئ مجلدًا واحفظه هناك.

الخطوه 3

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

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

تذكر استبدال "عنوان URL" و "مجموعة الخطوط" في الكود بالقيم المناسبة لتتوافق مع الخط الذي اخترته. يجب عليك أيضًا لصق هذا القسم من التعليمات البرمجية في بداية ملف CSS ولكن بعد تعليق السمة.

الخطوة 4

أخيرًا ، تأكد من النقر فوق زر ملف التحديث المهم. يضمن ذلك حفظ تغييراتك بشكل صحيح قبل مغادرة الصفحة.

الخطوة الخامسة

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

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

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

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

موصى به لك: دليل المبتدئين: كيفية تثبيت سمة WordPress؟

ملاحظة سريعة:

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

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

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

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

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

يختار العديد من الأشخاص استخدام المكونات الإضافية لتضمين خطوطهم المخصصة في مواقع WordPress الخاصة بهم ، حيث يمكن أن يكون من نواح كثيرة أبسط طريقة للقيام بذلك. هذا صحيح بشكل خاص إذا كنت لا تريد التعامل مع ترميز CSS. يعد Google Fonts خيارًا شائعًا ، ويرجع ذلك إلى حد كبير إلى أنه يمكن استخدامه بسهولة جنبًا إلى جنب مع مكون WordPress الإضافي. أفضل خيارين لك هما Easy Google Fonts & Google Fonts Typography. بمجرد تنشيط أي من هذه المكونات الإضافية ، ستتمكن بسهولة من الوصول إلى كتالوج خطوط Google بالكامل لإضافتها إلى صفحاتك دون الحاجة إلى التعامل مع أي رمز معقد.

يعد استخدام Google Fonts هو أبسط طريقة للقيام بذلك ويمكنك معاينة التغييرات والخطوط المخصصة في الوقت الفعلي على الشاشة.

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

الخطوة 1

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

الخطوة 2

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

قد يعني المظهر الخاص بك أيضًا أنك لن تكون قادرًا على تعديل اختيارك للخط مباشرة لأقسام مختلفة من موقع الويب الخاص بك. ومع ذلك ، هناك حل بسيط لهذه المشكلة: ما عليك سوى التوجه إلى الإعدادات ، ثم Google Fonts ، حيث يمكنك إنشاء عناصر التحكم في الخطوط الخاصة بك. للقيام بذلك ، ما عليك سوى إدخال اسم عنصر التحكم في المربع وتحديد محددات CSS. يتيح لك ذلك إضافة أي عناصر HTML ترغب في استهدافها لهذا الخط. بمجرد إدخال هذه المعلومات ، تأكد من حفظ التغييرات بالنقر فوق الزر Save Font Control حتى يتم تحديث إعداداتك بالكامل. يمكنك بعد ذلك الاستمرار في إنشاء أكبر عدد ممكن من عناصر التحكم في الخطوط المخصصة التي ستحتاجها لكل قسم مختلف على موقع WordPress الخاص بك.

الخطوه 3

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

ملاحظة سريعة:

بعض الإضافات الرائعة الأخرى المخصصة لخطوط WordPress التي نوصي بها هي Custom Font Uploader و Use Any Font - ولكن هناك عددًا لا يحصى من الإضافات للاختيار من بينها ، لذا استكشف خياراتك قبل تحديد الخيار الذي تريد استخدامه.

قد يعجبك أيضًا: 20 من أفضل سمات ووردبريس المتخصصة الصغيرة الأكثر مبيعًا.

أخيرًا ، جرب استخدام السمات

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

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

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