آموزش تغییر فونت قالب وردپرس به صورت دستی

با سلام

بسیای از قالب هایی که فارسی سازی می شوند و  یا حتی قالب های فریم ورکی نیاز به فونت فارسی دلخواه برای نمایش مطالب دارند. من در این نوشته سعی می کنم به صورت ساده و روان تغییر فونت بخش های مختلف یک قالب رو به فونت دلخواه آموزش بدم.

برای تغییر فونت شما نیاز به فایل فونت های مورد علاقه خودتون دارید که در انتهای  مطلب ۴۰ فونت فارسی زیبا قابل دانلود هست.

خوب بعد از اینکه این فایل رو دانلود کردید از حالت فشرده خارج می کنید و فونت های مورد علاقه خودتون رو در سه فرمت (ttf , eot , woff ) انتخاب و در پوشه ای به نام (fonts ) که در اکثر قالب ها وجود داره (وجود نداشت خودتون بسازید ) قرار می دید.

نکته : اگه قالب روی ساییتتون نصبه اون رو آپلود می کنید و داخل پوشه اصلی قالب قرار می دید.

حالا بر می گردید به فایل استایل یا CSS  قالبتون و اون رو باز کرده این کد رو در ابتدای فایل یعنی بعد از نوشته های مربوط به نام قالب ، ورژن و….. قرار می دید:


@font-face {
font-family: ‘BYekan’;
src: url(‘/fonts/BYekan.eot’);
src: local(‘b BYekan’), url(‘fonts/BYekan.woff’) format(‘woff’), url(‘fonts/BYekan.ttf’) format(‘truetype’), url(‘BYekan.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

من به صورت پیش فرض BYekan رو قرار دادم و شما می تونید اسم فونت مورد علاقه خودتون رو که در پوشه fonts قرار داره و آپلود کردید جایگزین اون کنید.

نکته : در صورتی که مایل به استفاده از چند فونت بودید این کد رو در همون قسمت کپی و اسم فونت دلخواه تون رو که آپلود کردید قرار می دید مثل زیر :


@font-face {
font-family: ‘BYekan’;
src: url(‘/fonts/BYekan.eot’);
src: local(‘b BYekan’), url(‘fonts/BYekan.woff’) format(‘woff’), url(‘fonts/BYekan.ttf’) format(‘truetype’), url(‘BYekan.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

خوب تا حالا فایل های اصلی رو داخل قالبتون قرار  دادید و قالب برای تغییر فونت آماده هستش!برای شناسایی و تغییر فونت ها ساده ترین راه اینه که دنبال عبارت : (font-family) داخل کد های استایل (css) باشید و اسم فونتی رو که به صورت پیش فرض قرار داره با فونت هایی که قبلا آماده کردید جایگزین کنید.

مثلا این فونت رو به این صورت تغییر می دید:

قبل از تغییرفونت:


font-family: “Droid Arabic Kufi”,”Verdana”,”Arial”, sans-serif;
font-size: 14px;
font-weight: bold;

بعد از تغییر فونت:


font-family: “BYekan”,”Verdana”,”Arial”, sans-serif;
font-size: 14px;
font-weight: bold;

روال کار در سایر بخش های سایت هم همینه:

حالا سوال اینه که از کجا بدونیم فونت کدوم قسمت در کجای فایل استایل (css) قرار داره؟ چطوری می تونیم تشخیص بدیم که مثلا فونت تیتر مطالب کدومه؟برای اینم یه راهی وجود داره و اون استفاده از افزونه ای هستش که روی مرورگر فایر فاکس نصب می شه و طراحان از اون استفاده می کنند. اسم این افزونه فایر بگه (Firebug)  و شما می تونی از طریق این لینک اون رو به صورت آنلاین روی مرورگرتون نصب کنید.کار کردن با اونم به این شکله که وارد سایتتون می شید و روی مثلا تیتر نوشته ها علامت گذاری می کنید  و بعد راست کلیک می کنید و روی گزینه (Inspect Element with Firebug) کلیک می کنید.این افزونه خطی رو که این فونت قرار داره رو نمایش میده. الیته خودتون می تونید اسم فونت ها رو همون جا تغییر بدید و نتیجه رو به صورت آنلاین مشاهده کنید. (البته موقتی و بعد از رفرش از بین میره!) بنابر این باید از طریق فایل اصلی اقدام به تغییر فونت کنید.

موفق باشید.

دانلود فایل PDF این آموزش

دانلود مجموعه فونت ها با لینک مستقیم

یک پیشنهاد برای شما:

42 دیدگاه

    • نویسنده ·

      با سلام
      لینک دانلود در باکس مربوطه قرار گرفت.
      منظور شما کدام یک از فونت های سایت است ، اسکرین شات تهیه کنید و ارسال نمایید. در ضمن اگر منظور شما فونت یکان هست در پک فونت ها قرار دارد.
      موفق باشید.

    • نویسنده ·

      با سلام کاربر گرامی
      اسم فونت مربوطه ، گوگل می باشد. که به آدرس ایمیلتان ارسال گردید.

  • سلام
    من برای فراخوانی نوشته های صفحه سینگل از کد زیر استفاده می کنم :

    اما وقتی از پیشخوان متن رو Bold می کنم ، متن به صورت Normal نمایش داده می شود !
    به نظر شما مشکل من کجاست ؟

    پاسخ
    • نویسنده ·

      با سلام
      از کدوم فونت استفاده می کنید؟ همچنین کد مربوطه رو هم درج کنید.

  • داداش دمت گرم، عالــــــــــِی بود.
    یه دنیا ممنون….
    واقعاً که حرف نداره، با افزونه any font استفاده کردم کل قالب سایت با byekan، حتی قسمت جست و جو هم درستش کردم اینجوری، خیلی کارمو راه انداختی، واقعاً ممنونم ازت.
    بازم مرسی

    پاسخ
  • سلام
    من اگر بخوام فقط ویژگی های فونت بعضی از لینک هام تغییر کنه چکار باید بکنم ؟سایت رو ببینید من می خوام فقط رنگ و سایز فونت عناوین اصلی فهرست موضوعی سمت چپ عوض بشه (مثلا قران و ادعیه)
    http://www………ir

    پاسخ
    • نویسنده ·

      با سلام
      باید فونت مورد نظر رو تو کلاس کد های css اون بخش قرار بدید.

    • سلام شما فرمودید: “باید فونت مورد نظر رو تو کلاس کد های css اون بخش قرار بدید.”
      ببخشید اگه سوالم اماتوریه ولی جسارتا چه جوری باید به کلاس کد scc دسترسی پیدا کنم
      ممنون

    • نویسنده ·

      سلام
      هر قالب یا یک به نام css دارد یا در همان صفحه اول فایل قالب شما یک فایل css به نام style.css وجود دارد.
      البته این موارد برای قالب های مختلف ، متفاوت است. فایل مربوطه رو از قالب پیدا کنید.

    • آقا من شرمنده ام ، سوال هام خیلی ابتداییه
      همون طور که فرموده بودید style.css رو پیدا کردم
      ۱۳۴ جا فونت نوشته یه قسمتش اینه
      format-link .entry-title {
      color: #ca3c08;
      display: inline;
      font: 300 italic 20px “Source Sans Pro”, Helvetica, sans-serif;
      margin-right: 20px;
      خوب من اولا نمی دونم سایز فونت رو در کدوم قسمت استایل تغییر بدم، از همه مهم تر من فقط می خوام بعضی لینکها فونتشون عوض شه الان اگه سایز فونت رو عوض کنم همه فونتها تغییر می کنه.
      لطف کنید یه نگاه به سایت بندازیدhttp://www.nashrenafari.ir/ من فقط می خوام در سمت چپ در بخش لیست موضوعی فونت بخش های اصلی مثل ” قرآن و ادعیه ” یا “اعتقادی” بزرگتر بشه و رنگش تغییر کنه، نه همه لینک های سایت

      باز هم شرمنده

    • نویسنده ·

      سلام
      در واقع در این کدها : “Source Sans Pro”, Helvetica, sans-serif نام فونت هست ، و عدد قبل از اون یعنی ۲۰px اندازه فونت.
      روی هر مورد که میخواهید تغییر پیدا کنه کلیک کنید و با Inspect Element کدهای css بخش مربوطه رو ویرایش کنید.

    • نویسنده ·

      سلام
      از فونت ایران سانس استفاده شده.
      برای تغییر فونت باید css بلد باشید و کدهای css مربوط به هر قسمت رو ویرایش و فونت دلخواه خودتون رو قرار بدید.

  • سلام،ببخشید من پوسته مولتی نیوز دارم تو قالبم این فونت معرفی شده ولی نمایش داده نمیشه…باید چیکار کنم؟و سوال بعدی اینه که اگه بخوام کل فونتای قالب یکی بشه راه میانبری نداره؟

    پاسخ
    • نویسنده ·

      سلام
      اگر شما مطابق آموزش فونت را به سایت خود اضافه کنید نمایش داده می شود.
      باید هر بخشی که میخواهید فونتش تغییر پیدا کنه رو پیدا کنید و فونت رو اضافه کنید.

  • سلام وقتیکه میخوام فونت یه قسمتی رو تغیر بدم بعد از رفرش شدن صفحه سایت باز کدهای تغیر کرده به حالت پیش فرض درمیاد؟

    پاسخ
    • نویسنده ·

      سلام
      کد css رو بروزرسانی کنید ، کش مروگر رو خالی کنید، نتیجه رو بببنید.

    • نویسنده ·

      نیازی به استفاده از افزونه نیست.
      شما کد css مربوطه را یکی از از فایل های css اصلی قالب اضافه کنید تا تغییر فونت انجام شود.

  • ممنون ولی قالب را آماده خریدم فونت یکان را هم برای همه جای گذاشته درست کار می کند ولی برای متن نوشته کار نمی کند لطفا بگویید قسمتی که کد متن نوشته است کجاست آنجا را تغییر دهم اگر کد کپی کنم مطمئنما به هم می ریزد قالب بازم ممنون

    پاسخ
    • نویسنده ·

      کد مربوط به فونت را در فایل rtl.css قالب باید قرار بدید.

    • نویسنده ·

      سلام
      فونت را از طریق هاست در مسیر مورد نظر آپلود کنید.

    • نویسنده ·

      اگر منظور شما قالب های تجاری است ، بله بصورت بسته نصبی با فیلم آموزشی ارائه شده است خودتان هم میتوانید نصب را انجام دهید.

ارسال دیدگاه

آدرس ایمیل شما منتشر نخواهد شد. فیلد های ضروری با * مشخص شده است.

 

telegram-wpnovin