آموزش جایگزینی فونت‌های Cufon با فونت‌های Google WEB در وردپرس

این آموزش نحوه جایگزینی Cufon با Google font در قالب‌های وردپرس رو نشون میده.

در برخی از منوهای قالب وردپرس، عناوین و متن‌ سرفصل‌ها با فونت‌های Cufon ایجاد میشن.

میتونین با Firebug، یک آیتم مناسب رو بررسی کنین تا مطمئن شین که از فونت Cufon برای متن خاصی استفاده شده:

 

 

اول از همه، شما باید تمام cufon script callها رو در فایل‌های قالب حذف کنین. مطمئن شین که پکیج قالب رو از حالت فشرده خارج کردین:

 

 

نرم‌افزاری که امکان جست‌وجوی متن در فایل‌ها رو فراهم میکنه باز کنین. ما از نرم‌افزار Notepad++ استفاده میکنیم. Ctrl+F رو بزنین تا کادر جست‌وجو باز بشه، گزینه Find in Files رو انتخاب کنین.

cufon رو در قسمت Find What مشخص کنین. محل فایل‌های قالب رو انتخاب کنین. چک کنین که تمام گزینه‌های جست‌وجو مثل مال ما باشن. روی Find All کلیک کنین:

 

 

ما میتونیم لیست فایل‌هایی رو که در اونها از کلمه کلیدی cufon استفاده شده رو مشاهده کنیم. باید فایل‌هایی رو ویرایش کنیم که cufon scriptها رو فراخوانی میکنن. خود cufon scriptها رو تغییر ندین. در مثال ما، فایل‌های زیر باید اصلاح بشن: (XXXX شماره پوسته‌ها هست)

wp-content\themes\themeXXXX\includes\theme-scripts.php

themeXXXX\footer.php

themeXXX\header.php

 

 

تغییراتی که انجام دادین رو در فایل‌ها ذخیره کنین و اونها رو جایگزین کنین. مهم: قبل از جایگزینی، حتما از فایل‌های قالب نسخه پشتیبان تهیه کنین.

سایتتون رو به روز کنین. شما فونت‌های cufon رو حذف کردین:

 

 

حالا باید فونت‌های گوگل رو اضافه کنین. صفحه Google fonts رو باز کنین. یک فونت مناسب رو انتخاب کنین، روی Add to Collection کلیک کنین، بعد روی Use کلیک کنین:

 

 

یک مجموعه کاراکتر مناسب رو انتخاب کنین:

 

 

تب @import رو باز کنین. اونجا میتونین کدی رو که باید به فایل CSS اضافه کنین رو مشاهده کنین. و یک مجموعه فونت مناسب رو هم میبینین. شما باید اون رو برای مورد خاصی مشخص کنین:

 

 

ما می‌خواهیم فونت گوگل رو برای عنوان منو تنظیم کنیم. آیتم‌ها رو با استفاده از Firebug بررسی کنین و کد مناسب رو پیدا کنین. می‌بینیم که تغییرات باید در فایل style.css انجام بشه:

 

 

به Appearance – Editor و فایل style.css رو باز کنین. کد @import رو کپی کنین و به ابتدای فایل css اضافه‌اش کنین:

 

 

کد css رو برای مورد مناسب پیدا کنین. ویژگی font-family رو اضافه کنین:

 

 

تغییرات رو ذخیره کنین و صفحه رو ریفرش کنین. ما فونت گوگل رو برای منو اضافه کردیم:

 

بیاین فونت گوگل رو برای عناوین اضافه کنیم.

عنوان رو بررسی کنین. میبینیم که کد مناسب در فایل themeXXX/css/normalize.css قرار داره:

 

 

ریفرنس @import رو به فونت گوگل اضافه کنین. ویژگی font-family رو اضافه کنین. تغییرات رو ذخیره کنین و فایل اصلاح شده رو آپلود کنین:

 

 

تغییرات رو ذخیره کنین و فایل اصلاح شده رو آپلود کنین. صفحه رو ریفرش کنین. شما فونت گوگل رو برای عناوین اضافه کردین:

 

 

میتونین همین کارها رو برای بقیه متن‌ها و عناوین انجام بدین.