آمورش افزودن فونت به فریم ورک های طراحی قالب جوملا - warp

بعد از راست چین (rtl) کردن یک قالب ، مهمترین دقدقه طراحان سایت و قالب اضافه کردن فونت هایی است که با زبان فارسی سازگاری بیشتری داشته باشند. البته با توجه به راست چین بودن تمام فریم ورک های طراحی قالب ، افزودن فونت ، تبدیل به اولین موضوع برای فارسی سازی قالب میشه.


آموزش و راهنما های زیادی برای اضافه کردن فونت دلخواه برای قالب های جوملا وجود داره، اما اکثر این اموزش ها فقط درباره اضافه کردن فونت به قالب های معمولی جوملا (منظور قالب های بدون فریم ورک است) صحبت میکنند ، اما من در این پست قصد دارم نحوه اضافه کردن فونت های فارسی دلخواه به قالب های طراحی شده با فریم ورک های طراحی قالب جوملا مثل warp و Gantry و T3 و … رو برای شما شرح بدم و اول از همه از فریم ورک مورد علاقه خودم ، یعنی Warp شروع میکنم.
اموزش اضافه کردن فونت به فریوم رک های دیگه ، به مرور به این پست اضافه و یا در یک پست جدید منتشر میشود.
مرحله اول ، نصب قالب

برای شروع، لازمه که ما یک قالب طراحی شده با فریم ورک وارپ رو نصب کنیم. قالب های شرکت Yootheme و بعضی شرکتهای دیگه از این فریم ورک استفاده میکنند،.
من نسخه خام فریمورک Warp (بسته نصبی رایگان فریم ورک) که به صورت Quickstart منتشر شده و از لینک زیر قابل دریافت هست رو روی لوکال نصب میکنم. (قالب رایگان master 2 رو دانلود کنید)
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

بعد از نصب ، من چند منو و مطلب رو فارسی میکنم (مثلا منوی Home رو به صفحه نخست و …) تا بعد از اضافه کردن فونت فارسی ، بتونیم تغییر رو مشاهده کنیم.

مرحله دوم ، دانلود فونت و افزودن به پوشه قالب

خوب حالا برای اضافه کردن فونت ها ، به اولین چیزی که نیاز داریم ، فونت های فارسی بهینه شده برای وب است. من برای این اموزش از فونت بهینه شده یکان (B Yekan) استفاده میکنم. میتونید این فونت رو از لینک زیر دریافت کنید:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

بعد از دانلود فونت ها ، به پوشه قالبی که نصب کردید رفته و یک پوشه با نام fonts در این محل ایجاد کنید. برای مثال نام پوشه قالب من yoo_master2 است پس باید به مسیر زیر برم و پوشه fonts رو ایجاد کنم:
Templates/yoo_master2
حالا فونتهایی رو که دانلود کرده بودید رو در این پوشه کپی کنید.

مرحله سوم ، معرفی فونت به قالب

بعد از کپی فونتها، باید فونت ها رو به قالب معرفی کنیم ، به پوشه less در قالب برید فایل theme.less رو با یک ویرایشگر متن (کد) مثل notpadd ویا Dreamwiver باز کنید.
کد زیر رو به ابتدای فایل اضافه کنید:
@font-face {
font-family: 'wyekan';
src: url('../fonts/WebYekan.eot');
src: url('../fonts/WebYekan.eot?#iefix') format('embedded-opentype'),
url('../fonts/WebYekan.woff') format('woff'),
url('../fonts/WebYekan.ttf') format('truetype'),
url('../fonts/WebYekan.svg#KreonRegular') format('svg');
font-weight: normal;
font-style: normal;
}
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
توجه کنید که در مقابل font-family از wyekan استفاده کردیم، این نامی است که ما برای فونتمون در هنگام فراخوانی استفاده میکنیم ، این نام میتونه یک کلمه دلخواه باشه ، اما باید در مرحله بعد هم از همین نام استفاده کنیم.
فایل رو ذخیره کنید و ببندید ، دیگه با این فایل کاری نداریم.
حالا فایل customizer.json موجود در پوشه less رو با یک ویرایشگر کد باز کنید. باید فونت مورد نظر رو از قسمت "type": "font" در حدود خط ۲۰ اضافه کنید ، درست در جایی مه System Fonts تمام میشه کد زیر رو به فایلتون اضافه کنید:
"Custom Fonts": [
{"name": "yekan", "value": "WYekan , tahoma"}
],
طبق عکس زیر عمل کنید:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

خوب کار اضافه کردن فونت تمام شد ، حالا باید به مدیریت قالب بریم و از فونتی که اضافه کردیم استفاده کنیم.
مرحله چهارم ، تنظیم فونت قالب روی فونت مورد نظر

وارد مدیریت جوملا بشید و از مدیریت قالب ها ، قالب مورد نظر (اینجا ما از قالب خام فریم ورک با نام yoo_master2 استفاده کردیم ) رو انتخاب کنید.
بعد از ورود به تب Options برید و Settings رو انتخاب کنید، حالا از قسمت Development روی گزینه Compile LESSکلیک کنید و صبر کنید تا مراحل کامپایل less تمام بشه (معمولا چند ثانیه طول میکشه)
بعد از اتمام ، از قسمت Styles روی Customizer کلیک کنید.بعد از کلیک روی این قسمت ، یک صفحه جدید باز میشه که میتونید قسمتهای مختلف قالب رو ویرایش کنید.

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
در ستون سمت چپ ، گزنه Advanced Mode رو فعال کنید، حالا از قسمت Typography گزینه body font family و heading font family رو باز کنید و گزینه yekan رو پیدا و انتخاب کنید.
به پایین تر اسکرول کنید و گزینه Navbar رو پیدا کنید و nav font family رو روی yekan تنظیم کنید.
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
حالا روی دکمه ابی رنگ save کلیک کنید و منتظر بمونید فایلها ذخیره بشوند.
تمام شد، شما فونت yekan رو به فریمورک Warp اضافه کردید، توجه کنید که این روش بر روی قالب های وردپرسی که با warp طراحی شده باشند هم قابل اجراست.

منبع:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]