ننتظر تسجيلك هـنـا

اوجد منتدى سكون الشوق للفائده والاستفاده وحتى يكون منبر اعلامي للنشر وليس لتبادل وسائل التواصل والعلاقات بنائآ عليه يمنع منعآ باتآ تبادل وسائل التواصل الاجتماعي بكافة اشكالها ومن يتعدى حدوده سيتم نفيه خارج سكون حتى يكون عبرة للجميع ويعيي مسؤولية المكان ..

إدارة الموقع


 
العودة   منتديات سكون الشوق > ۩۞۩{ منتديآت التقنية }۩۞۩ > ۩۞۩{ هاكات و تطوير المنتديات }۩۞۩
 


إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
#1  
قديم اليوم, 07:39 AM
همــســة امــل غير متواجد حالياً
Palestine     Female
SMS ~
اوسمتي
وسام رمضآن ٢ كل عام وانتم بخير 
لوني المفضل Dimgray
 رقم العضوية : 2156
 قدوٌم آنَيِق : Mar 2014
 فترة الأقامة : 2280 يوم
 أخر زيارة : اليوم (03:27 AM)
 المشاركات : 294,508 [ + ]
 التقييم : 2147483647
 معدل التقييم : همــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond reputeهمــســة امــل has a reputation beyond repute
بيانات اضافيه [ + ]

اوسمتي

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






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


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'); /* متوافق مع اكسبلور 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 واستداعاء دالة الخط، فعلى سبيل المثال سنقوم بإختيار الخط التالي :


في الصورة يُبين لنا رابط الإستدعاء ( 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; }
ستحصل على النتيجة التالية :



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



 توقيع : همــســة امــل


رد مع اقتباس
قديم اليوم, 07:45 AM   #2


الصورة الرمزية بتي
بتي غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 2994
 قدوٌم آنَيِق :  Dec 2014
 أخر زيارة : اليوم (07:53 AM)
 المشاركات : 7,216 [ + ]
 التقييم :  581008
 MMS ~
MMS ~
لوني المفضل : Cadetblue

اوسمتي

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



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


 
 توقيع : بتي




رد مع اقتباس
قديم اليوم, 08:51 AM   #3


الصورة الرمزية شيخة المزايين
شيخة المزايين متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 3545
 قدوٌم آنَيِق :  Jun 2015
 أخر زيارة : اليوم (06:51 PM)
 المشاركات : 123,864 [ + ]
 التقييم :  2147483647
 الدولهـ
United Arab Emirates
 الجنس ~
Female
 MMS ~
MMS ~
 SMS ~
في عالمي أعتزل لأختلف فالمتشابهون كثر
لوني المفضل : White

اوسمتي

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



ابداع في الطرح وروعة في الانتقاء
وجهد تشكر عليه
دمت بروعة طرحك
أكاليل الزهر انثرها بمتصفحك


 
 توقيع : شيخة المزايين



رد مع اقتباس
قديم اليوم, 04:41 AM   #4


الصورة الرمزية سحر العيون
سحر العيون غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 5637
 قدوٌم آنَيِق :  Sep 2016
 أخر زيارة : اليوم (05:40 AM)
 المشاركات : 44,611 [ + ]
 التقييم :  2147483647
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 MMS ~
MMS ~
لوني المفضل : Aliceblue

اوسمتي

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



موضوع رائع ومفيد
طرحتِ فابدعتٍ
دمت ودام عطائكٍ
ودائما بأنتظار جديدكٍ الشيق
لك خالص التقدير
سلمت اناملكِ*
اعذب التحايا لكِ*


 


رد مع اقتباس
قديم اليوم, 01:20 AM   #5


الصورة الرمزية خہَواطہَر
خہَواطہَر غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 1
 قدوٌم آنَيِق :  Dec 2013
 أخر زيارة : اليوم (08:22 PM)
 المشاركات : 159,137 [ + ]
 التقييم :  2147483647
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 MMS ~
MMS ~
 SMS ~
لوني المفضل : Firebrick

اوسمتي

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





-

,
يِعَافيِك ربيِ عَلى زَاويِتك الرَاقيَه

وَشُكْرَا لَطـــرَحُك المُميِز وَإِخْتِيارِك الرَائِع
’’
عَبق الجُــــــوريِ لـ رُوحِك..’


 
 توقيع : خہَواطہَر


..



رد مع اقتباس
قديم اليوم, 08:14 PM   #6


الصورة الرمزية روح
روح غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 5014
 قدوٌم آنَيِق :  Mar 2016
 أخر زيارة : اليوم (06:05 PM)
 المشاركات : 47,793 [ + ]
 التقييم :  2147483647
 MMS ~
MMS ~
لوني المفضل : Cadetblue

اوسمتي

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



شكرآ لطرحك المفيد
تسلم الايادي


 
 توقيع : روح





قُسـمأّ بمنِ أّمر مريم
بهّـز جّـذِع أّلَنخـلةّ
أّنكَ هّـززت قُلبي أّلَف مرة


رد مع اقتباس
قديم اليوم, 11:40 PM   #7


الصورة الرمزية احساس شاعر
احساس شاعر غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 2324
 قدوٌم آنَيِق :  May 2014
 أخر زيارة : اليوم (03:19 AM)
 المشاركات : 193,392 [ + ]
 التقييم :  2147483647
 الدولهـ
Saudi Arabia
 الجنس ~
Male
 MMS ~
MMS ~
 SMS ~
لوني المفضل : Cadetblue

اوسمتي

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



يعطيك الف عافية
على الطرح المتالق
تحياتي لك





 
 توقيع : احساس شاعر





رد مع اقتباس
قديم اليوم, 10:29 PM   #8


الصورة الرمزية البيشى@
البيشى@ غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 2093
 قدوٌم آنَيِق :  Feb 2014
 أخر زيارة : اليوم (05:27 AM)
 المشاركات : 96,800 [ + ]
 التقييم :  1761693907
 MMS ~
MMS ~
لوني المفضل : Cadetblue

اوسمتي

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



سلمت يمناك
على هذا الطرح الجميل والرائع .
البيشى ..


 
 توقيع : البيشى@





رد مع اقتباس
قديم اليوم, 10:37 PM   #9


الصورة الرمزية ألميعآد.
ألميعآد. غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 5319
 قدوٌم آنَيِق :  Jun 2016
 أخر زيارة : اليوم (10:13 AM)
 المشاركات : 35,598 [ + ]
 التقييم :  831505446
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 SMS ~
-

لا اله الا انت سبحانك اني كنت من الظالمين
لوني المفضل : Mediumauqamarine

اوسمتي

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



+





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


 
 توقيع : ألميعآد.

-




مواضيع : ألميعآد.



رد مع اقتباس
قديم اليوم, 03:03 AM   #10


الصورة الرمزية شٌهقـہٌ عًشـقٌ
شٌهقـہٌ عًشـقٌ غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 4438
 قدوٌم آنَيِق :  Nov 2015
 أخر زيارة : اليوم (08:23 PM)
 المشاركات : 279,430 [ + ]
 التقييم :  2147483647
 الدولهـ
Saudi Arabia
لوني المفضل : Black

اوسمتي

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



،/
جَلبَ ممُيَّز جِدَاً
وإنتقِاءَ رآِئعْ
تِسَلّمْ الأيَادِيْ
ولآحُرمِناْ مِنْ جَزيلِ عَطّائك
،/


 
 توقيع : شٌهقـہٌ عًشـقٌ



رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are معطلة
Refbacks are معطلة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
عبر الخطوط القلبيه يوجد رحله حب اشواق ۩۞۩{ سكون العام }۩۞۩ 9 اليوم 04:44 PM
ما هو سر الخطوط الموجودة على ظهر هاتف آيفون؟ فيحاء الشام ۩۞۩{ عالم الجوال وبرامجه }۩۞۩ 20 اليوم 09:55 AM
الخطوط الدفاعيه لدى جسم الانسان سمو الأمير ۩۞۩{ الطب والصحة }۩۞۩ 12 اليوم 04:13 AM


الساعة الآن 07:10 PM


Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
شات دقات قلبي
شات صوتي
شات صوتي
شات صوتي
شات بوابة العرب
شات غرور كام
سعودي كام
صيف كام
TranZ By Almuhajir
HêĽм √ 3.2 OPS BY: ! ωαнαм ! © 2010
جميع الحقوق محفوظـة لـ سكـونْ الشـوق

mamnoa 3.0 by DAHOM