آموزش افزودن فونت به فریم ورک گانتری – Gantry

همونطور که در مطلب قبل "افزودن فونت به فریم ورک های طراحی قالب" وعده داده بودم ، قصد دارم در ادامه مطلب قبلی ، در این پست نحوه افزودن فونت دلخواه به فریم ورک طراحی قالب گانتری (Gantry) رو آموزش بدم.

برای افزودن فونت ، در مرحله اول نیاز به یک قالب طراحی شده با فریم ورک گانتری داریم ، (شرکتهای طراحی زیادی از این فریم ورک برای طراحی قالب هاشون استفاده کردند و شما انتخاب های زیادی  برای قالب های طراحی شده با این فریم ورک دارید ) برای این منظور ، من بسته نصب آسان فریم ورک گانتری برای جوملا ۳ که از لینک زیر قابل دریافت هست رو نصب میکنم. در این بسته، فریم ورک و یک قالب طراحی شده بر اساس گانتری وجود داره که میتونیم برای تمرین و یا طراحی یک قالب اختصاصی از اون استفاده کنیم.

دریافت نسخه های گانتری

بعد از نصب بسته ، مثل اموزش "وارپ" (Warp) چند منو و متن نمونه رو فارسی میکنم تا بعد از اضافه کردن فونت ، تغییرات قابل مشاهده باشه.

 

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

از لینک زیر فونت بهینه شده یکان برای وب رو دانلود کنید:

دانلود فونت یکان بهینه شده برای وب

بعد از دانلود فونت ، به پوشه قالبی که قصد اضافه کردن فونت رو داریم میریم ویک پوشه با نام fonts ایجاد می کنیم. (البته ممکنه قبلا پوشه ای با این نام وجود داشته باشه) حالا فونت هایی که دانلود کرده بودید رو از zip خارج کنید و به این پوشه انتقال بدید.

مرحله سوم ، معرفی فونت به قالب (طراحی شده با گانتری)

بعد از انتقال فونت ها به پوشه fonts ، به پوشه css در قالب برید و استایل اختصاصی قالبتون رو با یک ویرایشگر کد مثل notpadd باز کنید. (در قالب هایی که با گانتری طراحی میشن ، شما میتونید یک استایل اختصاصی برای قالبتون داشته باشید ، این استایل باید از نام پوشه قالب + custom تشکیل شده باشه . مثلا در اینجا اسم قالب و نام پوشه قالب من gantry هست ، پس نام استایل اختصاصی قالب من باید gantry-custom.css باشه . ممکنه این فایل در پوشه css قالب شما وجود نداشته باشه ، در این صورت شما باید خودتون یه فایل جدید با این نام ایجاد کنید. )

بعد از باز کردن این فایل ( و یا در صورت نبود، ایجاد و باز کردن) کد زیر رو در فایل کپی کنید:

 @font-face {
    font-family: 'yekan';
    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#BloodyNormal') format('svg');
}
.font-family-yekan {
  font-family: 'yekan',tahoma,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

توجه کنید که من در اینجا کلمه "yekan" رو به عنوان نام فونتم در نظر گرفتم و باید از این کلمه در همه قسمت های مورد نیاز استفاده کنم. کلمه اخر کلاس ".font-family-yekan" نام فونت برای معرفی به قالب و کلمه yekan در مقابل  font-family نام فونت برای صدا زدن و فراخوانی  در css استفاده میشه.

حالا فایل template-options.xml موجود در پوشه اصلی قالب رو با یک ویرایشگر کد باز کنید. حدودا در خط ۴۵ ، قسمت معرفی فونت ها ، یک option جدید در اخر لیست به شکل زیر اضافه کنید:

<option value="yekan">yekan</option>

مرحله چهارم ، انتخاب فونت در مدیریت قالب

وارد مدیریت جوملا بشید و از قسمت مدیریت قالب ها ، قالب مورد نظر رو انتخاب کنید (در اینجا ما از قالب پیشفرض گانتری با نام gantry استفاده میکنیم ) ، بعد از ورود به مدیریت قالب به تب Style بروید و از آپشن  Font Settings گزینه yekan که قبلا به قالب معرفی کرده بودیم رو انتخاب کنید. در آخر با کلیک روی Save قالب رو ذخیره کنید.

فونت یکان به قالب افزوده شد.

اما یک مشکلی وجود داره ، در قالب هایی که از گانتری استفاده میکنند ، وقتی از مدیریت قالب ها فونت رو تغییر میدید ،فونت قسمت منوهای بالای سایت تغییر نمیکند و آپشنی برای تنظیم فونت منوها از قسمت مدیریت در نظر گرفته نشده (یا حداقل من آپشنی برای تنظیم این قسمت پیدا نکردم). به همین دلیل باید به صورت دستی ، یعنی افزودن کد ، این قسمت رو تغییر داد.

این کار رو میشه به دو روش انجام داد، روش اول افزودن کد به gantry-custom.css و روش دوم ، معرفی فونت از طریق فایلهای less در قالب.

برا روش اول کافیه کد زیر رو به فایل gantry-custom.css اضافه کنید:

 .gf-menu .item{
  font-family: yekan,tahoma;
}

برای روش دوم ، به پوشه less برید و فایل variables.less رو با یک ویرایشگر کد باز کنید. @menuFontFamily رو پیدا کنید (تقریبا خط ۴۹) و مقدار مقابلش رو به yekan, tahoma, sans-serif;  تغییر بدید.

حالا وارد مدیریت قالب بشید و از تب  Advanced در قسمت  Less Compiler روی دکمه آبی رنگ Clear Cache کلیک کنید.

تمام شد ، فونت مورد نظر به طور کامل اضافه شد!

 

اموزش افزودن فونت به گانتری ۵