ووردبريس

تغيير الخطوط في الووردبريس ( أسهل طريقة) 2020

تغيير الخطوط في الووردبريس – الكثير منا يرغب بتغير شكل الخط في موقعه او مدونته او تشكيلها بشكل مختلف , مثل فصل العنوان بخط والمحتوى بخط اخر لتنسيق القالب و اعطاؤه منظر جذاب وجميل , ومن الجدير بالذكر ان قوالب ووردبريس جميعها قابلة لتركيب الذي تريده والتي تحتاج اليه ولا تتعارض مع اي نوع من الخطوط او طريقة في تغيير تغيير الخطوط في ووردبريس

سنشرح لكم في هذه التدوينة طريقتين لـ تغيير الخطوط في ووردبريس

الخطوط المحلية وكيفية استخدامها

تغيير الخطوط في الووردبريس – العديد من القوالب في ووردبريس تدعم خاصية تغير الخطوط التلقائية ولكنها خطوط لمحتوى انجليزي في اغلب الاوقات ولا تصلح للمحتوى العربي , وقبل ان نتعرف على طريقة تغيير الخطوط في ووردبريس عليك أولاً معرفة صيغ الخطوط المقبولة أثناء التغيير وهي كالتالي :

  • WOFF / WOFF2: اختصاراً لـ ( Web Open Font Format ) مخصصة للإستخدام عبر الإنترنت، قامت بإنشاؤها موزيلا بالتعاون مع شركات أخرى، وتعتبر هذه الصيغة الأكثر استخدمًا عبر الإنترنت لسرعة تحمليها.
  • SVG / SVGZ: اختصاراً لـ (Scalable Vector Graphics )، حيثُ يعتبر هذا النوع من الخطوط الأكثر سهولةً ومرونةً في الإستخدام ومدعوم بالدرجة الأولى على متصفح سفاري للأيفون وغير مدعوم للمتصفحات الباقية كالكروم وفايرفوكس الخ …
  • EOT : اختصاراً لـ ( Embedded Open Type )، تمّ تصميمه بواسطة شركة مايكروسوفت بإستخدام خصائص الـ @font-face ولا يعمل إلا على متصفح إكسبلور وما دون ذلك .
  • OTF / TTF: اختصاراً لـ ( OpenType Font &TrueType Font )، يهتمّ العديد من المصممين بهذا النوع من الخطوط حيثُ يقومون بتكوين النوع WOFF من خلاله بكل يُسر وسهولة من أجل الإستخدام عبر الويب.

وبعد أنْ تعرفنا على الصيغ الهامّة في تكوين الخطوط التي نريد استخدامها سنتوجّه للتطبيق والبدء بإختيار الخطوط وتطبيقها على قالب Twenty Fifteen الافتراضي والذي يكون موجودا عند تنصيبك لملفات الووردبريس

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

الخطوة الاولى : قم بإنشاء مُجلّد جديد بإسم fonts ضمن مجلدات القالب.

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-1.png

الخطوة الثانية : قم بإنشاء مُجلّد جديد بإسم fonts ضمن مجلدات القالب.

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-2.png

الخطوة الثالثة : قم بفتح ملف style.css الخاص بالقالب.

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-3.png

الأن سنعمل على الخطوط التي قمنا بوضعها يدويًا داخل مُجلّد fonts بإستخدام الصيغ الموجودة بالأعلى، وسنوّظف الخط DroidKufi-Regular.woff ضمن ملف القالب style.css ونقوم بإستخدامه على ” عنوان التدوينة ” للقالب.

عن طريق ادخال الكود التالي في ملف الستايل Style.css  والذي عن طريقه نخبر القالب بتوفر

1 2 3 4 5@font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.woff') format('woff'); }

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

الآن وبعد وأن أضفنا الكود سنقوم بتعديل “خط ” عنوان التدوينة في القالب الموجود بهذه الصورة

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-4.png

وبالبحث داخل ملف style.css عن الكود الخاص بالترويسة او باستخدام خاصية Inspect elements في المتصحف والضغط على العنوان الذي نريد تغيره سيظهر لنا الـ Css الخاص فيه كالتالي :

1 2 3 4 5 6 7.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; }

ثمّ اضافة السطر التالي :

1font-family:'MyFontDroidKufi';

لتصبح النتيجة :

1 2 3 4 5 6 7.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family:'MyFontDroidKufi'; }

قم بحفظ الملف الآن ثمّ توجّه للمتصفح وشاهد ” عنوان التدوينة ” بعد الإضافة والتحرير على الكود السابق سترى النتيجة بهذا الشكل :

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-4-1.png

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

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

1 2 3 4 5 6 7 8 9@font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.eot'); /* متوافق مع اكسبلور 9 */ src: url('fonts/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'), /*متوافق مع اكسبلور 6 + 7  */ url('fonts/DroidKufi-Regular.woff2') format('woff2'), /* متوافق مع المتصفحات الحديثة*/ url('fonts/DroidKufi-Regular.woff') format('woff'), /*  متوافق مع المتصفحات الحديثة*/ url('fonts/DroidKufi-Regular.ttf')  format('truetype'), /*متوافق مع متصفح سفاري، وأندوريد، وأيفون*/ url('fonts/DroidKufi-Regular.svg#svgFontName') format('svg'); /* متوافق مع أيفون */ }

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

تغيير الخطوط في الووردبريس من خلال الخطوط المُخزنة على الويب كجوجل

 تغيير الخطوط في الووردبريس – هذه الطريقة تُعتبر الأسرع والأسهل في الإستخدام، ضمان وسرعة فائقة .. سنعتمد في هذه الطريقة استخدام Google Fonts | Early Access والتي ستُعطينا كوداً جاهزاً لإضافته داخل ملف style.css واستداعاء دالة الخط، فعلى سبيل المثال سنقوم بإختيار الخط التالي :

تحتوي هذه الصورة على سمة alt فارغة; اسم الملف هو تغيير-الخطوط-في-الووردبريس-5.png

في الصورة يُبين لنا رابط الإستدعاء ( Link ) وطريقة الإستخدام للخط، وسننفذ ذلك بفتح ملف style.css الخاص بالقالب:

ثمّ وضع الـ Link الخاص بالخط في منطقة المستطيل الأحمر، الآن يمكنك استخدام كود Example الموجود في الصورة السابقة بأيّ مكانٍ تريد وعلى سبيل المثال “عنوان التدوينة” بنفس الطريقة الأولى ليكون الكود كالتالي :

1 2 3 4 5 6 7.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family: 'Amiri', serif; }

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

إقرأ ايضا فيما يخص الووردبريس :

كيفية انشاء قالب الابن في الووردبريس

كيفية تثبيت الاضافات في الووردبريس

كيفية تسريع موقع الووردبريس

كيفية تثبيت الووردبريس على كل الاستضافات

السابق
الفرق بين IMAP و POP3 و SMTP دليل شامل
التالي
انشاء مدونة ووردبريس احترافية خطوة بخطوة