شرح تغيير الخطوط في قوالب الووردبريس
السلام عليكم ورحمه الله وبركاته يرغب الكثير في تغيير خطوط الموقع بالترميز فيما بينها، وفصل العنوان بخطٍ والمحتوى بخطٍ آخر لتحسين التنسيق ولإتحاف العين بجمالِ المظهر، وقوالب ووردبريس كغيرها من القوالب تدعمُ الكثير من الخطوط والتنسيقات الغير محدودة وتعتمد في ذلك على ابداع المستخدم أو المصمم لهذا القالب.سأشرح في هذه التدوينة طريقتين لتغيير الخطوط في قوالب ووردبريس بالتطبيق على القالب الإفتراضي Twenty Fifteen . الخطوط المحلية وكيفية استخدامها قد تحصل على قالب ووردبريس يحتوي على خطوط افتراضية كخط تهوما أو خط اريل الخ…، سيجول في ذهنك كيف تقوم بإضافة خطوط جديدة من جهازك الشخصي، ولكن عليك أولاً معرفة صيغ الخطوط المقبولة أثناء التغيير وهي كالتالي :
والأن وبعد أنْ تعرفنا على الصيغ الهامّة في تكوين الخطوط التي نريد استخدامها سنتوجّه للتطبيق والبدء بإختيار الخطوط وتطبيقها على قالب Twenty Fifteen. قم بإنشاء مُجلّد جديد بإسم fonts ضمن مجلدات القالب. ضع الخطوط التي تُريدها داخل هذا المُجلّد. اقتباس:
الأن سنعمل على الخطوط التي قمنا بوضعها يدويًا داخل مُجلّد fonts بإستخدام الصيغ الموجودة بالأعلى، وسنوّظف الخط DroidKufi-Regular.woff ضمن ملف القالب style.css ونقوم بإستخدامه على ” عنوان التدوينة ” للقالب. كود:
@font-face { اقتباس:
الآن وبعد وأن أضفنا الكود سنقوم بتعديل “خط ” عنوان التدوينة في القالب الموجود بهذه الصورة بالبحث داخل ملف style.css عن : كود:
.entry-title { كود:
font-family:'MyFontDroidKufi'; كود:
.entry-title { رائع! ، تقريبًا الأمر سهل وليس مُعقد، كذلك نفس الألية تنطبق على بقية الصيغ، ولكن يُفضل أنْ يكون الخط بجميع الصيغ، لماذا ؟، لكي يعمل على المتصفحات بسهولة ومرونة وذلك بإستخدام الكود التالي : كود:
@font-face { الخطوط المُخزنة على الويب كجوجل هذه الطريقة تُعتبر الأسرع والأسهل في الإستخدام، ضمان وسرعة فائقة .. سنعتمد في هذه الطريقة استخدام Google Fonts | Early Access والتي ستُعطينا كوداً جاهزاً لإضافته داخل ملف style.css واستداعاء دالة الخط، فعلى سبيل المثال سنقوم بإختيار الخط التالي : في الصورة يُبين لنا رابط الإستدعاء ( Link ) وطريقة الإستخدام للخط، وسننفذ ذلك بفتح ملف style.css الخاص بالقالب: ثمّ وضع الـ Link الخاص بالخط في منطقة المستطيل الأحمر، الآن يمكنك استخدام كود Example الموجود في الصورة السابقة بأيّ مكانٍ تريد وعلى سبيل المثال “عنوان التدوينة” بنفس الطريقة الأولى ليكون الكود كالتالي : كود:
.entry-title { يمكنك استخدام الطريقة التي تناسبك وتُلبي مُتطلّباتك 🙂 .. شكرًا لقراءتك هذه التدوينة، دمت بخير وسعادة . المصدر : مُدَوّنَةْ مُحَمَّدْ عُكْفِي كود:
https://mokfie.com/ |
رد: شرح تغيير الخطوط في قوالب الووردبريس
شروحات مشرفه رغم انه منقول مشرف لصاحبه ولناقل المعلومه
|
رد: شرح تغيير الخطوط في قوالب الووردبريس
تسلم اااااالايادى
|
الساعة الآن 08:02 AM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By
Almuhajir