قلم های گوگل منبع رایگان شگفت انگیزی برای طراحان وب هستند. در WPBv4 ، ما شروع کرده ایم با استفاده از یک ترکیب محبوب قلم Google: Oswald و Lora. برخی از کاربران از ما پرسیده اند که چگونه می توان قلم های وب Google را در مضامین وردپرس اضافه کرد. اگر به یاد داشته باشید ، ما نحوه افزودن قلم های Google در WordPress Post Editor . در این مقاله ، ما به شما نشان خواهیم داد که چگونه Google Web Fonts را به صورت روش درست بهینه شده برای عملکرد در قالب های WordPress خود اضافه کنید
قلم های وب Google را که دوست دارید پیدا کنید h2>
اولین کاری که باید انجام دهید یافتن قلم Google است که دوست دارید. به قلم های Google بروید و کتابخانه را مرور کنید. وقتی فونت مورد علاقه خود را پیدا کردید ، روی دکمه “استفاده سریع” کلیک کنید.
با کلیک بر روی دکمه استفاده سریع ، به صفحه جدیدی منتقل خواهید شد. پایین بروید تا کادر دستورالعمل استفاده با کد را مشاهده کنید که می توانید به وب سایت خود اضافه کنید.
خواهید دید که سه زبانه مختلف برای افزودن قلم به سایت شما وجود دارد. اولین روش استاندارد و پیشنهادی برای افزودن قلم های Google به سایت شما است. در تب دوم از روش CSSimport و در برگه آخر از روش JavaScript استفاده شده است.
ما به شما نحوه استفاده از هر یک از این روش ها و موارد مثبت و منفی را به شما نشان خواهیم داد.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
افزودن قلمهای وب Google در مضامین وردپرس h2>
ما بیشتر افراد را با استفاده از دو روش اول دیده ایم.
ساده ترین راه این است که فایل style.css طرح زمینه خود را باز کنید و کد قلم هایی را که در زبانهimport دریافت کرده اید ، مانند این جای گذاری کنید:
import url (https://fonts.googleapis.com/css؟family=Lora) ؛ import url (https://fonts.googleapis.com/css؟family=Oswald) ؛
همچنین می توانید چندین درخواست قلم را در یکجا ترکیب کنید. نحوه انجام این کار در اینجا است:
@ import url (https://fonts.googleapis.com/css؟family=Lora|Oswald)؛
این روش بسیار آسان است اما بهترین راه برای افزودن فونت های Google به سایت وردپرس شما نیست. استفاده از روشimport بارگیری های موازی را مسدود می کند ، این بدان معناست که قبل از شروع بارگیری بقیه مطالب ، مرورگر منتظر خواهد ماند تا پرونده وارد شده به پایان برسد.
اگر باید ازimport استفاده کنید ، حداقل چندین درخواست را در یکجا ترکیب کنید.
عملکرد بهینه شده عملکرد برای افزودن قلم های وب Google
بهترین روش افزودن قلم های Google استفاده از روش استاندارد است که از روش پیوند به جای روش وارد کردن استفاده می کند. به سادگی آدرس URL قلم خود را که از مرحله 1 دریافت کرده اید بگیرید. اگر چندین قلم اضافه می کنید ، می توانید دو قلم را با یک | شخصیت. سپس کد را در قسمت عنوان طرح زمینه خود قرار دهید.
شما به احتمال زیاد مجبورید فایل header.php خود را ویرایش کنید و کد زیر را در بالای صفحه اصلی خود قرار دهید. مثال به این شکل است:
اساساً هدف این است که درخواست فونت را در اسرع وقت قرار دهید. با توجه به وبلاگ Google Web Fonts ، اگر قبل از اعلامیه @ font-face برچسب اسکریپتی وجود داشته باشد ، تا زمانی که پرونده قلم بارگیری نشود ، اینترنت اکسپلورر چیزی در صفحه ارائه نمی دهد.
پس از انجام این کار ، می توانید به سادگی شروع به استفاده از آن در پرونده CSS طرح زمینه خود کنید:
h1 {
font-family: 'Oswald'، Helvetica، Arial، serif؛
}
اکنون موارد زیادی وجود دارد چارچوب های تم و مضامین کودک در آنجا وجود دارد. اگر از چارچوب مضمونی استفاده می کنید توصیه نمی شود که فایلهای طرح زمینه والدین خود را به ویژه اصلاح کنید زیرا دفعه دیگر که این چارچوب را به روز کنید تغییرات شما از بین می رود. برای افزودن صحیح قلم های Google به مضامین فرزندتان ، باید از قلاب ها و فیلترهای ارائه شده توسط آن موضوع یا چارچوب والدین استفاده کنید.
ایجاد صحیح قلم های Google در وردپرس h4>
روش دیگر برای افزودن فونت های Google به سایت وردپرس شما این است که از قلم موجود در تم خود استفاده کنید فایل توابع. php یا افزونه اختصاصی سایت .
عملکرد wpb_add_google_fonts () {
wp_enqueue_style ('wpb-google-fonts'، 'https://fonts.googleapis.com/css؟family=Open+Sans:300italic،400italic،700italic،400،700،300'، false)؛
}
add_action ('wp_enqueue_scripts'، 'wpb_add_google_fonts')؛
فراموش نکنید که پیوند قلم را با پیوند خود جایگزین کنید.
بارگیری قلم های Google با استفاده از JavaScript h4>
برای این روش باید کد را در برگه JavaScript در بخش دستورالعمل های استفاده از قلم های Google کپی کنید. می توانید بلافاصله پس از برچسب
این کد را در طرح زمینه یا header.php طرح زمینه کودک خود قرار دهید.
آخرین نکته ما در استفاده از Google Web Fonts در سایت شما این است که قلم هایی را که استفاده نمی کنید بارگیری نکنید. به عنوان مثال ، اگر فقط وزن پررنگ و نرمال را می خواهید ، پس همه سبک های دیگر را اضافه نکنید.
امیدواریم که این مقاله به شما کمک کند تا فونت های وب Google را به طرق درست در قالب های WordPress خود اضافه کنید ، بنابراین سایت شما می تواند سریع بارگیری شود. همچنین ممکن است بخواهید راهنمای ما را در نحوه افزودن قلم های Typekit در وردپرس .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/.