آموزش افزودن فونت به فریم ورک گانتری – 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>

 فونت گانتری xml

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

وارد مدیریت جوملا بشید و از قسمت مدیریت قالب ها ، قالب مورد نظر رو انتخاب کنید (در اینجا ما از قالب پیشفرض گانتری با نام 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 کلیک کنید.

قالب گانتری

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

 

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

نظرات (4)

  • Avatar

    mohamadreza

    |

    جامع و کامل!
    ممنون! (;

    Reply

  • Avatar

    حسن صمصامی

    |

    واقعا دمت گرم سه روزه دارم توی سایت های انگلیسی دنبالش میگردم پیدا نکردم راه حلشو که اینجا دیدم.دست مریزاد چی بودی تو!

    Reply

  • Avatar

    سینا

    |

    سلام، شما خیلی خوبید :))))
    از طرفدارای شماره یک سایتتون هستنم

    Reply

    • Avatar

      karim ezoji

      |

      سلام
      خیلی ممنون از لطف شما 🙂
      موفق باشید

      Reply

دیدگاهتان را بنویسید

لینک دوستان

template4
قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

جومپلیت ، مرکز دانلود قالب جوملا و ارائه دهنده قالب رایگان جوملا ، قالب جوملا 2.5 و قالب فارسی جوملا است.

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!