نحوه قرار دادن فونت های متغیر در وردپرس

نحوه قرار دادن فونت های متغیر در وردپرس

فونت های متغیر طراحی وب سایت ها را آسان تر می کند. از این گذشته، آنها روشی انعطاف‌پذیرتر و کارآمدتر برای مدیریت تایپوگرافی ارائه می‌دهند. و با معرفی وردپرس 6.5، استفاده از این فونت ها به لطف ویژگی جدید Font Library آسانتر از همیشه شده است.

چه یک توسعه‌دهنده حرفه‌ای باشید یا یک مالک وب‌سایت DIY، درک نحوه استفاده از فونت‌های متغیر در وردپرس می‌تواند تفاوت بزرگی در نحوه رویکرد شما به زیبایی‌شناسی و عملکرد سایت شما ایجاد کند.

در اینجا نحوه قرار دادن فونت های متغیر در وردپرس با استفاده از جدیدترین ابزارهای موجود آورده شده است.

فونت های متغیر چیست و چرا باید به آن اهمیت دهید؟

فونت های متغیر یک فایل فونت منفرد هستند که دارای تغییرات متعددی مانند وزن، عرض و سبک است. این بدان معنی است که شما می توانید این ویژگی ها را به صورت پویا بدون نیاز به فایل های جداگانه برای هر سبک تنظیم کنید.

به عنوان مثال، به جای بارگیری فایل‌های جداگانه برای «Regular»، «Bold»، «Italic» و «Bold Italic»، یک فونت متغیر می‌تواند همه این سبک‌ها (و بیشتر) را در یک فایل واحد کپسوله کند. و در حالی که فایل‌های فونت به دلیل داشتن داده‌های بیشتر سنگین‌تر می‌شوند، این باعث کاهش تعداد درخواست‌های HTTP سایت شما می‌شود که می‌تواند منجر به بارگذاری سریع‌تر و تجربه کاربری روان‌تر شود.

در عمل، فونت های متغیر به شما این امکان را می دهند:

  • ایجاد تایپوگرافی پاسخگو: ویژگی های فونت مانند وزن و عرض را بر اساس اندازه صفحه یا نوع دستگاه تنظیم کنید، خوانایی و سازگاری طراحی را افزایش دهید.
  • بهبود عملکرد وب سایت: با به حداقل رساندن تعداد فایل های فونتی که سایت شما برای بارگیری نیاز دارد، فونت های متغیر می توانند به بارگذاری سریع تر صفحه و عملکرد کلی بهتر سایت کمک کنند.
  • افزایش انعطاف‌پذیری طراحی: طراحان می توانند با طیف وسیع تری از سبک ها و جلوه ها بدون نگرانی در مورد افزایش اندازه فایل یا زمان بارگذاری صفحه آزمایش کنند.

با تعاریف خارج از مسیر، اکنون می توانیم به چیزهای سرگرم کننده برسیم – با استفاده از کتابخانه قلم وردپرس.

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

کتابخانه فونت وردپرس، معرفی شده در نسخه 6.5، یک ویژگی متمرکز در ویرایشگر سایت است که مدیریت فونت ها را در سراسر سایت شما ساده می کند. عملکرد آن مشابه کتابخانه رسانه است اما به فونت ها اختصاص داده شده است.

وردپرس 6.5وردپرس 6.5وردپرس 6.5
وردپرس 6.5

کتابخانه فونت به شما امکان می دهد:

  • نصب فونت ها: فونت‌ها را مستقیماً از فونت‌های Google اضافه کنید یا فونت‌های سفارشی را برای استفاده در سایت خود آپلود کنید.
  • مدیریت فونت ها: تمام فونت های نصب شده را در یک مکان مشاهده کنید، از جمله گزینه هایی برای فعال یا غیرفعال کردن آنها برای تم های خاص.
  • اعمال فونت: بدون نیاز به CSS یا افزونه های اضافی، فونت ها را به عناصر مختلف سایت، از جمله سرفصل ها، متن بدنه و بلوک های جداگانه اختصاص دهید.

همه اینها خوب و خوب هستند، اما چگونه از آن استفاده می کنید؟ بیایید در ادامه در مورد آن بحث کنیم.

دسترسی به کتابخانه فونت وردپرس

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

  • به داشبورد وردپرس خود بروید.
  • رفتن به ظاهر > ویرایشگر.
  • بر روی کلیک کنید سبک ها نماد سمت چپ صفحه نمایش
به منوی سبک ها دسترسی پیدا کنیدبه منوی سبک ها دسترسی پیدا کنیدبه منوی سبک ها دسترسی پیدا کنید
به منوی Styles دسترسی پیدا کنید.

  • برای ویرایش استایل ها روی نماد مداد کلیک کنید.
ویرایش سبک ها در وردپرسویرایش سبک ها در وردپرسویرایش سبک ها در وردپرس

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

از اینجا می‌توانید فونت‌های محلی را آپلود کنید، فونت‌های Google را مرور کنید و مجموعه‌های فونت موجود را مدیریت کنید. این راه‌اندازی اعمال فونت‌های متغیر را در قسمت‌های مختلف سایت شما آسان می‌کند، چه از تم‌های بلوک یا تم‌های سنتی استفاده می‌کنید – اگرچه تم‌های بلوکی برای عملکرد کامل توصیه می‌شوند.

افزودن و استفاده از فونت های متغیر

برای افزودن یک فونت متغیر به کتابخانه فونت وردپرس، نحوه انجام آن به این صورت است:

  • کتابخانه فونت را باز کنید و آن را انتخاب کنید آپلود کنید برای افزودن یک فونت محلی یا انتخاب آن، برگه را انتخاب کنید فونت ها را نصب کنید برگه برای کشیدن از فونت های گوگل.
فونت ها را آپلود کنید فونت ها را آپلود کنید فونت ها را آپلود کنید

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

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

فونت یک بلوک را تغییر دهیدفونت یک بلوک را تغییر دهیدفونت یک بلوک را تغییر دهید
همچنین می توانید فونت یک بلوک را در ویرایشگر سایت تغییر دهید.

مدیریت پیشرفته فونت: ثبت مجموعه فونت های سفارشی

برای توسعه دهندگان یا کسانی که چندین فونت را مدیریت می کنند، وردپرس 6.5 یک API قدرتمند برای ثبت مجموعه فونت های سفارشی معرفی می کند. این ویژگی برای سایت هایی که نیاز به تایپوگرافی ثابت در صفحات یا بخش های متعدد دارند مفید است. می‌توانید مجموعه‌های فونت را با استفاده از PHP یا JSON ثبت کنید، که امکان مدیریت آسان و استقرار فونت‌های متغیر را فراهم می‌کند.

ثبت مجموعه فونت ها از طریق PHP

برای ثبت یک مجموعه فونت سفارشی، می توانید کد زیر را به تم خود اضافه کنید functions.php فایل:

1
wp_register_font_collection( 'custom-collection', (
2

3
    'name'          => __( 'Custom Collection', 'themeslug' ),
4

5
    'description'   => __( 'A collection of custom fonts.', 'themeslug' ),
6

7
    'font_families' => (
8

9
        (
10

11
            'fontFamily' => 'Example Variable Font',
12

13
            'slug'       => 'example-variable-font',
14

15
            'fontFace'   => (
16

17
                'src'       => '/path/to/font.woff2',
18

19
                'fontWeight'=> '100 900',
20

21
                'fontStyle' => 'normal',
22

23
            ),
24

25
        ),
26

27
        // Additional fonts can be added here
28

29
    ),
30

31
));

این قطعه کد یک مجموعه فونت را با ویژگی های سفارشی ثبت می کند و آن را در سراسر سایت شما در دسترس قرار می دهد.

ثبت مجموعه فونت از طریق JSON

برای مجموعه فونت های گسترده تر، JSON اغلب روش ترجیحی است. این به شما امکان می دهد تا مقادیر زیادی از داده های فونت را در یک قالب ساختاریافته ذخیره کنید. در اینجا نمونه ای از ثبت مجموعه از طریق JSON آورده شده است:

  • یک فایل JSON ایجاد کنید که تمام خانواده ها و ویژگی های فونت را فهرست می کند. می توانید از مثال ارائه شده در صفحه پیروی کنید وبلاگ توسعه دهنده وردپرس برای جزئیات بیشتر
  • این فایل JSON را در طرح زمینه خود پیوند دهید functions.php با استفاده از wp_register_font_collectionتابع

این رویکرد برای حفظ یک سیستم طراحی سازگار در وب سایت های پیچیده ایده آل است.

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

بهینه سازی عملکرد

یکی از مزایای قابل توجه فونت های متغیر بهبود عملکرد است، اما به شرطی که به درستی از آنها استفاده شود. از آنجایی که همه تغییرات در یک فایل ذخیره می‌شوند، تعداد کلی درخواست‌های HTTP کاهش می‌یابد. با این حال، هنوز ضروری است که فونت های متغیر شما برای استفاده در وب بهینه شده باشند تا از نفخ غیر ضروری جلوگیری شود. شما می توانید با غیرفعال کردن سبک های فونت استفاده نشده در کتابخانه فونت برای جلوگیری از بارگذاری آنها در سایت خود، عملکرد را بیشتر افزایش دهید.

عیب یابی مشکلات رایج

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

  • ناسازگاری با تم های کلاسیک: کتابخانه فونت برای تم های بلوک بهینه شده است، به این معنی که تم های کلاسیک ممکن است به طور کامل از ویژگی های آن پشتیبانی نکنند. برای بهترین تجربه، به یک طرح زمینه بلوک بروید.
  • پشتیبانی مرورگر: در حالی که فونت های متغیر به طور گسترده در مرورگرهای مدرن پشتیبانی می شوند، برخی از مرورگرهای قدیمی ممکن است آنها را به درستی ارائه نکنند. همیشه سایت خود را در محیط های مختلف تست کنید تا از سازگاری اطمینان حاصل کنید.
  • تأخیر در بارگذاری فونت: اگر متوجه تاخیر در بارگذاری فونت شدید، از آن استفاده کنید نمایش فونت ویژگی CSS برای کنترل نحوه نمایش فونت ها در زمان بارگذاری. تنظیم آن برای جابجایی تضمین می کند که متن با فونت های بازگشتی نمایش داده می شود تا زمانی که فونت متغیر بارگیری شود و از متن نامرئی جلوگیری می کند.

آیا از فونت های متغیر در وردپرس استفاده می کنید؟

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

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

بنابراین، شیرجه بزنید، ابزارهای جدید را آزمایش کنید و دریابید که این آزادی تایپوگرافی جدید چه چیزی را به همراه خواهد داشت!

منبع: https://webdesign.tutsplus.com/how-to-put-variable-fonts-to-work-in-wordpress–cms-108943a