مساحة اعلانية


الملاحظات

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

الردود
2

المشاهدات
358
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud of

  • هيلبرنت غير متواجد حالياً

المشاركات
5,275

+التقييم
275

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
12-28-2016, 09:38 PM
المشاركة 1
12-28-2016, 09:38 PM
المشاركة 1
افتراضي شرح تغيير الخطوط في قوالب الووردبريس
السلام عليكم ورحمه الله وبركاته
يرغب الكثير في تغيير خطوط الموقع بالترميز فيما بينها، وفصل العنوان بخطٍ والمحتوى بخطٍ آخر لتحسين التنسيق ولإتحاف العين بجمالِ المظهر، وقوالب ووردبريس كغيرها من القوالب تدعمُ الكثير من الخطوط والتنسيقات الغير محدودة وتعتمد في ذلك على ابداع المستخدم أو المصمم لهذا القالب.
سأشرح في هذه التدوينة طريقتين لتغيير الخطوط في قوالب ووردبريس بالتطبيق على القالب الإفتراضي Twenty Fifteen .

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

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

قم بإنشاء مُجلّد جديد بإسم fonts ضمن مجلدات القالب.

تغيير الخطوط قوالب الووردبريس NqiFM71.png

ضع الخطوط التي تُريدها داخل هذا المُجلّد.

تغيير الخطوط قوالب الووردبريس omI1VJB.png

الخطوط المُدخلة للإختبار فقط .
قم بفتح ملف style.css الخاص بالقالب.
تغيير الخطوط قوالب الووردبريس JxCe1YK.png

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

كود:
@font-face {
 font-family: 'MyFontDroidKufi';
  src:
    url('fonts/DroidKufi-Regular.woff') format('woff');
}
التسمية MyFontDroidKufi ما بين علامة التنصيص لك الحرية في تغييره، ولكن يجب عليك الإحتفاظ به لإستخدمه في النقاط المرغوب إضافة الخط إليها أو تحريرها، وأيضًا هذا الكود والنوع من الخطوط يعمل على متصفحات فايرفوكس، كروم، اكسبلور، و سفاري.
تغيير الخطوط قوالب الووردبريس TeShtnf.png

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

تغيير الخطوط قوالب الووردبريس TLdoah2.png

بالبحث داخل ملف 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';
}
قم بحفظ الملف الآن ثمّ توجّه للمتصفح وشاهد ” عنوان التدوينة ” بعد الإضافة والتحرير على الكود السابق سترى النتيجة بهذا الشكل :

تغيير الخطوط قوالب الووردبريس dBqiiMH.png

رائع! ، تقريبًا الأمر سهل وليس مُعقد، كذلك نفس الألية تنطبق على بقية الصيغ، ولكن يُفضل أنْ يكون الخط بجميع الصيغ، لماذا ؟، لكي يعمل على المتصفحات بسهولة ومرونة وذلك بإستخدام الكود التالي :
كود:
@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 واستداعاء دالة الخط، فعلى سبيل المثال سنقوم بإختيار الخط التالي :

تغيير الخطوط قوالب الووردبريس 1YgaYdl.png

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

تغيير الخطوط قوالب الووردبريس JxCe1YK.png

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

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

تغيير الخطوط قوالب الووردبريس DF2XyoW.png

يمكنك استخدام الطريقة التي تناسبك وتُلبي مُتطلّباتك 🙂 .. شكرًا لقراءتك هذه التدوينة، دمت بخير وسعادة .

المصدر : مُدَوّنَةْ مُحَمَّدْ عُكْفِي
كود:
https://mokfie.com/

قديم 12-29-2016, 11:48 PM
المشاركة 2
abo-karim
.:: Administrator ::.
تاريخ الإنضمام : Jun 2015
رقم العضوية : 1
المشاركات: 1,624
  • abo-karim غير متواجد حالياً
افتراضي رد: شرح تغيير الخطوط في قوالب الووردبريس
شروحات مشرفه رغم انه منقول مشرف لصاحبه ولناقل المعلومه

قديم 01-02-2017, 08:05 PM
المشاركة 3
غاوى مشاكل
.:: عضو فعال ::.
تاريخ الإنضمام : Sep 2016
رقم العضوية : 1057
المشاركات: 199
  • غاوى مشاكل غير متواجد حالياً
افتراضي رد: شرح تغيير الخطوط في قوالب الووردبريس
تسلم اااااالايادى

اضافة رد

العلامات المرجعية

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


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: شرح تغيير الخطوط في قوالب الووردبريس
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ Font ] : الباحث عن الخطوط العربية ( اضافة للفوتشوب تقوم بالبحث عن الخطوط) نسيت النوم ركن ملحقات التصميم 0 07-08-2017 07:10 PM
[wordpress] طريقة تغيير البريد الالكترونى للادمن في مدونة الووردبريس abo-karim ركن تطوير المواقع. 1 06-01-2017 10:23 PM
إضافة الخطوط للمحرر في xenforo SMART ركن شروحات الزين فورو XENFORO 2 10-04-2016 12:00 AM
مشكلة بايقونات الخطوط بعد شرح ابو كريم Mr.Flash.Xx ركن مشاكل تصاميم الاستايلات 6 01-06-2016 09:18 PM
ممكن شرح تكبير هذه الخطوط almagic ركن مشاكل تصاميم الاستايلات 3 12-29-2015 12:48 AM





الساعة الآن 06:57 AM