افزودن فونت به وردپرس ( قالب و پیشخوان )

افزودن فونت به وردپرس ( قالب و پیشخوان )

افزودن فونت به وردپرس یکی از مواردی است که برای جذاب تر شدن وب سایتمان به آن نیاز داریم.

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

جالب است بدانید که ما میتوانیم در همه جا چه قالب وردپرس یا یک پلاگین خاص و یا در کل پیشخوان وردپرس فونت دلخواه خود را اضافه کنیم.

حقیقت ماجرا این است که این مورد اصلا ارتباطی با وردپرس ندارد،

روش انجام به دو صورت است میتوانید با پلاگین یا بدون پلاگین به راحتی فونت دلخواه خود را اضافه کنید.

افزودن فونت دلخواه به وردپرس

همانطور که در بالا مطرح شد فونت دلخواه را میتوان با همین روش برای تمامی سایت ها چه با جوملا یا وردپرس طراحی شده باشند اضافه کرد با ما همراه باشید.

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

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

افزودن فونت به وردپرس بدون پلاگین

همانطور که متوجه شدید فونت ها برای شناسایی توسط مرورگر نیاز به فرمت عنوان شده دارند که تمامی فونت ها همین فرمت ها را دارند.

کافیست ابتدا فونتی که میخواهیم اضافه کنیم را پیدا کنیم یا بدانیم چه فونتی میخواهیم.

پیشنهاد ما استفاده از فونت زیبا و رایگان وزیرمتن ( فونت مبنای وردپرس نیز وزیر است ) می باشد.

    1. در ابتدا باید فایل های فونت ها را دانلود کنیم برای دانلود فونت وزیر اینجا کلیک کنید و بسته کامل را دانلود کنید.
    2. وارد پوشه fonts شوید و بعد پوشه webfonts را باز کنید فایل Vazirmatn[wght].woff2 را به صفحه یا پوشه دیگری منتقل کنید.
      نکته مهم: در فونت وزیر امکان استفاده از این نوع فایل وجود دارد شما باید برای سایر فونت ها فرمت های eot ، .woff و .tff را پیدا کنید ولی برای فونت وزیر نیازی نیست و با همین یک فایل تمام کارایی را انجام میدهیم.

      1. فایل را درون یک پوشه در قالب خود اضافه ( آپلود میکنیم )
        1. برای اینکار وارد هاست شوید و به فایل منیجر مراجعه کنید filemanager
        2. سپس به پوشه public_html وارد شوید.
        3. وارد پوشه swp-content شوید
        4. وارد پوشه themes شوید.
        5. با توجه به نام قالب وارد پوشه قالب خود شوید ( mabnawp )
        6. اگر در اینجا پوشه fonts بود وارد شوید در غیر این صورت باید پوشه assets وجود داشته باشد که پوشه fonts در آن قرار دارد.
          اگر در هر دو حالت پوشه fonts را پیدا نکردید ایرادی ندارد میتوانید پوشه را اضافه کنید.
        7. فایل Vazirmatn[wght].woff2 را درون پوشه fonts آپلود کنید.
        8. پس از آپلود برای تست اینکار را انجام دهید
          1. آدرس سایت خود را به صورت کامل در مروگر وارد کنید مانند زیر:

            مبنای وردپرس – پایه و اساس وردپرس

          2. به انتهای آن wp-contents را اضافه کنید. ( مانند زیر )

            https://mabnawp.ir/wp-contents

          3. و بعد پوشه themes را اضاف کنید.

            https://mabnawp.ir/wp-contents/themes/

          4. و بعد پوشه نام قالب را اضافه کنید

            https://mabnawp.ir/wp-contents/themes/mabnawp/

          5. سپس پوشه ای که فونت درون آن قرار دارد را وارد کنید

            https://mabnawp.ir/wp-contents/themes/mabnawp/fonts/
            یا:
            https://mabnawp.ir/wp-contents/themes/assets/fonts/

          6. و در نهایت نام فایل را وارد کنید Vazirmatn[wght].woff2

            https://mabnawp.ir/wp-contents/themes/assets/fonts/Vazirmatn[wght].woff2

            نکته مهم: اگر پس از ساختن این آدرس شما خطای 404 دریافت کردید باید دقت بیشتری داشته باشید چرا که مسیر شما اشتباه است و هدف ما در اینجا تست عملکرد مسیر صحیح فایل فونت می باشد.

      2. بعد از اینکه از مسیر صحیح فایل فونت اطمینان پیدا کردیم فایل style.css در پوشه قالب خود را ویرایش میکنیم و یا پیشنهاد بهتر این است که از طریق پیشخوان وارد منوی نمایش » سفارشی سازی شوید و قسمت css اضافی را باز کنید. ( ما میخواهیم css را اضافه کنیم حالا با هر روش مهم نیست )
        1. و کد زیر را به انتهای آن اضافه میکنیم: 
          @font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
       url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
        2. احتمالا متوجه شدید که باید به جای url(‘fonts/webfonts/Vazirmatn[wght].woff2’) آدرس خود را وارد کنید یعنی فقط در مقدار آن که بین دو علامت ‘ ‘ قرار دارد یعنی دقیقا عبارت fonts/webfonts/Vazirmatn[wght].woff2 را، دقیقا درست است پس به جای این عبارت در کد بالا آدرس خودمان را وارد میکنیم مانند زیر: 
          @font-face {
  font-family: 'Vazirmatn';
  src: url('https://mabnawp.ir/wp-contents/themes/assets/fonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
       url('https://mabnawp.ir/wp-contents/themes/assets/fonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
        3. و بعد تغییرات را ذخیره خواهیم کرد.
      3. نوبت به تغییر فونت المان هاست.
        هر چیزی که ما درون وب سایت مشاهده میکنید چه در پیشخوان یا سمت قالب سایت همه یک المان HTML هستند بنابراین کافیست آنها را انتخاب و فونت را تغییر دهیم یعنی چه؟

        1. دوباره در همان فایل css یا همانجایی که فونت را اضافه کردید وارد می شویم:
        2. کد زیر را به انتهای آن اضافه میکنیم: 
          body {
    font-family: Vazirmatn;

}

          نکته: اگر بعد از ذخیره تغییرات چیزی عوض نشد کد زیر را قرار دهید:

          body {
    font-family: Vazirmatn !important;
}

          نکته: این روش چندان صحیح نیست اما مشکل شما را حل میکند.
          ما در واقع با این کد گفتیم که body یعنی کل بدنه صفحه ما باید فونت وزیر متن را بگیرد و با قرار دادن !important به مروگر فهماندیم که این از درجه اولیت بالایی برخوردار می باشد.
          نکته: اینها موارد css هستند و ارتباطی با وردپرس ندارند بنابراین میتوانید با کمی دقت در تمام سایت ها از آن استفاده کنید.

        3. میتوانید برای هر المان در html همینکار را انجام دهید مانند المان هایی چون h1,h2,h3,h4,p,div,span و … یا میتوانید کد زیر را برای اعمال در همه المان ها استفاده کنید. 
          *{
    font-family: Vazirmatn;

}

          ما با نشانگر * در css به مرورگر میگوییم تمامی المان ها را به این فونت برگردان کن.
          نکته مهم: اگر اینکار را کنید احتمال اینکه فونت آیکون ها از کار بیافتد زیاد است.

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

استفاده از cdn برای افزودن فونت به وردپرس

برای اینکار دقیقا عین مراحل بالا را باید انجام دهیم فقط مرحله 3 و 4 حذف میشوند و به جای آن یک مرحله جایگزین میگردد که باید کد زیر را اضافه کنید.

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

 

وقتی کد بالا را اضافه کنید و بعد فونت المان ها را تغییر بدهید دیگر نیازی به انجام مرحله 3 و 4 ندارید در واقع شما فونت ها را مستقیما از cdn فونت وزیرمتن استفاده میکند.

نکته مهم: برای سایر فونت ها درون گوگل سرچ کنید تا cdn آنها را پیدا کنید .

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

این روش بسیار ساده است و فقط کافیست یکی از افزونه های زیر را از مخزن وردپرس دانلود و نصب کنید ” آموزش نصب افزونه وردپرس ” و تنظیمات را انجام دهید:

  • Font Farsi
  • WP-Persian
  • Dehkadeh Fonts
  • افزونه پارسی دیت
  • Vazir Font

پیشنهاد ما استفاده از پلاگین Vazir Font به دلیل سادگی و حرفه ای بودن آن است که به راحتی فونت سایت خود را به وزیرمتن تغییر میدهید.

افزودن و تغییر فونت پیشخوان وردپرس

برای اینکار ما یک پیشنهاد ویژه داریم و آن استفاده از پلاگین WP-Persian می باشد.

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

اما اگر بخواهید با استفاده از کد اینکار را انجام دهید صبر کنید و عجله نداشته باشید.

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

با تشکر

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پارس وی دی اس