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

#1 19 - 12 - 2016, 07:51 AM

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

December 9th, 2016
11:48
يرغب الكثير في تغيير خطوط الموقع بالترميز فيما بينها، وفصل العنوان بخطٍ والمحتوى بخطٍ آخر لتحسين التنسيق ولإتحاف العين بجمالِ المظهر، وقوالب ووردبريس كغيرها من القوالب تدعمُ الكثير من الخطوط والتنسيقات الغير محدودة وتعتمد في ذلك على ابداع المستخدم أو المصمم لهذا القالب.
سأشرح في هذه التدوينة طريقتين لتغيير الخطوط في قوالب ووردبريس بالتطبيق على القالب الإفتراضي Twenty Fifteen .

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

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

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 ضمن مجلدات القالب.
ضع الخطوط التي تُريدها داخل هذا المُجلّد.
الخطوط المُدخلة للإختبار فقط .
قم بفتح ملف style.css الخاص بالقالب.
الأن سنعمل على الخطوط التي قمنا بوضعها يدويًا داخل مُجلّد fonts بإستخدام الصيغ الموجودة بالأعلى، وسنوّظف الخط DroidKufi-Regular.woff ضمن ملف القالب style.css ونقوم بإستخدامه على ” عنوان التدوينة ” للقالب.
@font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.woff') format('woff'); }
التسمية MyFontDroidKufi ما بين علامة التنصيص لك الحرية في تغييره، ولكن يجب عليك الإحتفاظ به لإستخدمه في النقاط المرغوب إضافة الخط إليها أو تحريرها، وأيضًا هذا الكود والنوع من الخطوط يعمل على متصفحات فايرفوكس، كروم، اكسبلور، و سفاري.
الآن وبعد وأن أضفنا الكود سنقوم بتعديل “خط ” عنوان التدوينة في القالب الموجود بهذه الصورة
بالبحث داخل ملف style.css عن :
.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; }
ثمّ اضافة السطر التالي :
font-family:'MyFontDroidKufi';
لتصبح النتيجة :
.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family:'MyFontDroidKufi'; }
قم بحفظ الملف الآن ثمّ توجّه للمتصفح وشاهد ” عنوان التدوينة ” بعد الإضافة
والتحرير على الكود السابق سترى النتيجة بهذا الشكل
رائع! ، تقريبًا الأمر سهل وليس مُعقد، كذلك نفس الألية تنطبق على بقية الصيغ، ولكن يُفضل أنْ يكون الخط بجميع الصيغ، لماذا ؟، لكي يعمل على المتصفحات بسهولة ومرونة وذلك بإستخدام الكود التالي
@font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.eot'); src: url('fonts/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'), 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 واستداعاء دالة الخط، فعلى سبيل المثال سنقوم بإختيار الخط التالي :
في الصورة يُبين لنا رابط الإستدعاء ( Link ) وطريقة الإستخدام للخط، وسننفذ ذلك بفتح ملف style.css الخاص بالقالب:
ثمّ وضع الـ Link الخاص بالخط فمنطقة المستطيل الأحمر، الآن يمكنك استخدام كود Example الموجود في الصورة السابقة بأيّ مكانٍ تريد وعلى سبيل المثال “عنوان التدوينة” بنفس الطريقة الأولى ليكون الكود كالتالي :

.entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family: 'Amiri', serif; }
ستحصل على النتيجة التالية :

يمكنك استخدام الطريقة التي تناسبك وتُلبي مُتطلّباتك

المصدر: شبكة همس الشوق - من قسم: همس تطوير المواقع والمنتديات

الموضوع الأصلي :‎ تغيير الخطوط سكربت اللوردبريس || الكاتب : همسه الشوق || المصدر : شبكة همس الشوق

19 - 12 - 2016, 09:32 AM

سلمت اناملك ويعطيك الله العافيه
على مجهودك الرائع
والمزيد من عطائك ومواضيعك الرائعه والجميله
ودائما في إبداع مستمر
لروحك النرجس

19 - 12 - 2016, 09:33 AM

20 - 12 - 2016, 06:11 AM

اميره
أجــمل وأرق باقات ورودى
لردك الجميل ومرورك العطر
تــحــياتي لك
كل الود والتقدير

20 - 12 - 2016, 06:11 AM

همسة الشوق
أجــمل وأرق باقات ورودى
لردك الجميل ومرورك العطر
تــحــياتي لك
كل الود والتقدير

24 - 2 - 2017, 01:05 PM

الله يعطيك الف عافيه لجهودك المبذوله
عاشت الايآآآدي
تحيأآإآتــــي

2 - 3 - 2017, 03:07 AM

نظرة عين
أجــمل وأرق باقات ورودى
لردك الجميل ومرورك العطر
تــحــياتي لك
كل الود والتقدير

6 - 9 - 2017, 07:57 PM

طــرح جميـــــل ..||
دام التألق ... ودام عطاء نبضك
كل الشكر لهذا الإبداع,والتميز
لك مني كل التقدير ...!!
وبآنتظار روائع جديدك بكل شوق...!
ودي وعبق وردي ..||

7 - 9 - 2017, 03:24 PM

الله يْعُطْيَكِ آَلِفَ عْآَفْيُهَ عِلْىَ هْذِآَ آَلأَخْتُيِآَرَ آَلِمْذَهُلَ لِلَغْآَيّهَ وِ آَلِمْبُهِرَ
دْمُتَيَ بْسُعْآَدِهَ دِآَآَئُمْهَ تْمُلأَ قِلْبُكِ بْآَلأَفْرَآَحَ وِآَآَلِمْسُرِآَتَ

19 - 9 - 2017, 01:03 PM

سلمت وسلمت الايادي التي شاركت وساهمت في هذا الطرح الجميل
بارك الله بك ولا تحرمنا من ابداعاتك وتميزك المتواصل
واصل في كل ما هو جديد ومفيد لديــــــــــــــك
فنحن بانتظار جديدك الرائع والجميــــــل
كوجودك المتواصل والجميل معنا

المواضيع المتشابهه لموضوع: تغيير الخطوط سكربت اللوردبريس لموضوع: تغيير الخطوط سكربت اللوردبريس
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
سكربت تصاميم للماسنجر	همس الشوق	همس برامج المسنجر و الاسكايبي والبرامج المشروحه	15	7 - 8 - 2019 07:48 PM
الخطوط السعودية تعلن تغيير اتجاه رحلاتها إلى مسارات بعيدة	شيخة الزين	همس للاخبار العالمية و العربيه والمحليه	4	30 - 6 - 2019 05:53 PM
نبذة عن الخطوط القديمة	همسه الشوق	همس المواضيع العامة	7	27 - 7 - 2015 05:59 AM
رحلة إلى الفردوس على متن الخطوط الإيمانية	صعبة المنال	نفحات اسلاميه	19	16 - 2 - 2013 12:57 AM
سر الخطوط السوداء في الحمار الوحشي	الزهرة البيضاء	همس للصور والغرائب	15	19 - 6 - 2012 05:35 PM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الأعضاء الذين قاموا بتقييم هذا الموضوع : 0
لم يقوم أحد بتقييم هذا الموضوع

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

همس تطوير المواقع والمنتديات

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

تغيير الخطوط سكربت اللوردبريس December 9th, 2016 11:48 يرغب الكثير في تغيير خطوط الموقع بالترميز فيما بينها، وفصل العنوان بخطٍ والمحتوى بخطٍ آخر لتحسين التنسيق ولإتحاف