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

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

اهمیت تغییر فونت قالب وب سایت

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

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

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

فایل هایی که نیاز به ویرایش دارد برای تعییر فونت قالب فایل های استایل مانند فایل style.css و یا فایل  rtl.css برای قالب هایی که به زبلن های راست به چب طراحی شده اند مانند ربان فارسی و عربی . درون این فایل ها کلاس هایی وجود دارند که باید خاصیت نام فونت آنها را تعریف  کنید .

قالب هایی که خارجی هستند و برای زبان های فارسی ترجمه شده اند یک فایل با نام rtl.css دارند که با ویرایش این فایل متوجه خواهید شد که بخش هایی که نیاز به راستچین سازی داشته اند درون این فایل قرار دارد و قسمت ها و کلاس های متنی که باید برای آنها خاصیت های متنی تعریف میکردید . برای مثال بخش هایی مانند p. span h1 . h2 . h 3 و سایر موارد این چنینی . که برای آنها باید خواصی مانند font-family تعریف کنید اما این خانواده فونت ها چطور به قال اضافه می شوند .

برای افززودن خانواده فونت یا font-family باید ابتدا فونت ها را با دستور font-face تعریف کنید و یا فونت های بهینه شده تحت وب را به صورت رایگان دریافت کنید مانند فونت یکان . کودک و فونت هایی ک وجود دارد و یا فکنتی مانند ایرانسنس را خریداری کنید . پش از افزودن فونت به ابتدای فایل استاید میتوانید از خاصیت font-familyاستفاده کنید .

اگر از بخش توسعه مرورگر یا inspector استفاده کنید بخشی که در کنار . برای مرورگر های فایرفاکس و در مرورگر کروم در بالای این بخش وجود دارد متوجه خواهید شد که تبی با نام فونت وجود دارد که فونت استفاده شده را نمایش می دهد . میتوانید در این قسمت فونت را استفاده کنید و تغییرات را مشاهده کنید و بعد از انجام آن را کپی و در فایل استایل خود جایگزاری کنید در صورتی که کلاس ها را پیدا نکردید برای تغییر میتوانید با همان نام کلاسی را خاصیت دهید و در جلوی خاصیت قبل از سیمیکالون ؛ دستور !important بدهید با اینکار به مرورگر گفته میشود که این خاصیت درجه اولیت بیشتری دارد و باید این را انجام دهد این برای مواردی است که یا کلاس مورد نظر را در فایل استایل پیدا نمیکنیم و یا دو تعریف متفاوت وجود دارد .

font-size خاصیتی است که اندازه فونت را مشخص می کند و با پیکسل و یا em نیز مقدار دهی می شود .

color خاصیتی است که رنگ نوشته را مشخص می کند .

letter-spacing خاصیتی است که فاصله کاراکتر ها را مشخص می کند .

text-align خاصیتی است که تراز بندی متن را تعیین می گند متن راست چین . وسط چین و چپ چین .

direction این خاصیت مانند text-align جهت  متن و تراز بندی را مشخص میکند اما تفاوت این برای استفاده صحیح در زبان های راست به چپ می باشد . این جهت متن را مشخص می کند که از راست به چپ نوشته شود و یا از چپ به راست ولی text-alignتراز متن را مشخص میکند به طور مثال اگر direction متن ltr به معنی چپ به راست باشد هنگام تایپ متوجه خواهید شد که در صورت وجود اعداد یا یک حرف انگلیسی میان متن فارسی بهم ریختگی وجود دارد .

text-decoration خاصیتی است که میتوانید با استفاده از آن خطوط روی متن یا زیر متن را نمایش و یا حذف کنید . مثلا در حالت هاور یک لینک میتوانید مشخص کنید که متن لینک شده یک خط زیر آن بیافتد .

text-transform خاصیتی است که برای بزرگ و کوچک تر کردن حروف انگلیسی استفاده می شود .

text-indent این خاصیت تو رفتگی متن را مشخص می کند .

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

به صورت فرصی ما این فایل ها را درون پوشه fontیا هر پوشه ای با نام دلخواه آپلود کرده ایم . این پوشه باید درون فولدر قالب وب سایت ما باش د پس از اینکه پوشه را ایجاد و فونت ها را بارگزاری کردیم باید درون فایل اشتایل قالبمان آدرس آنها را وارد کنیم . فایل style.css یا rtl.css را ویرایش کرده و آدرس این فونت ها را با دستور font-face می دهیم .

پس از انکه این کد ها را وارد کردسد کافیست تا برای بخش هایی که نیاز دارید با خاصیت font-family فونت مورد نظر را انتخاب کنید .

آدرس دهی فونت ها

آدرس های فونت در css و یا در کل آدرس های استایل به این صورت می باشد که در url میتوانید لینک مستقیم را درون (“”) وارد کنید و یا آدرس فایل های آپلود شده به این شیوه که برای پوشه هایی که در کنار همان فایل استایل هستند به صورت مستقیم وارد میکنیم به فرض مثال ما در حال ویرایش فایل style.css هستیم و این فایل درون پوشه قالب وجود دارد و فایل فونت ها درون پوشه font موجود است برای آدرس دهی به این شکل عمل میکنیم که درون (“”) قرار میدهیم . font/BYekan.eot و در صورتی که این پوشه درون پوشه ای دیگر است به طور مثال درون پوشه css یک پوشه با نام فونت قرار دارد نام این پوشه را نیز در ابتدای آدرس مشخص میکنیم css/font/BYekan.eot و اگر یک پوشه قبل از فایل ویرایش شده است ، مثلا فایل style.css گاها در یک پوشه دیگر وجود دارد و باید درون آن فونت ها را فراخوانی کنید و یا اینکه ما یک فایل با نام font.css ساخته ایم و با دستور @import درون فایل style,css وارد کرده اید برای آنکه آدرس دهی مناسبی را داشته باشید باید قبل از نام پوشه ../ را وارد کنید به معنی اینکه یک پوشه به قبل بازگردد و مجدد به پوشه ای که هدایت می شود برود و فایل را فراخوانی کند. در این صورت خواهیم داشت : ../font/BYekan.eot  .

میتوانید آدرس های فونت را به صورت آنلاین نیز وارد کنید به معنی اینکه درون (“”)  آدرس آنلاین وارد کنید به طور مثال https://digiwp.com/fonts/BYekan.eot برای اینکار باید فونت ها را از قبل درون یک سایت دیگر آپلود کرده باشید و به صورت آنلاین فراخوانی کنید برای سادگی کار میتوانید در صورتی که چند وب سایت دارید که میخواهید از یک فونت استفاده کنید ابتدا درون یک پوشه ای فایل های فونت را آپلود کرده سپس برای آن یک فایل css به طور مثال فایل font.css ایجاد کنید و درون آن دستورات font-face  را وارد کنید بعد در هر وب سایت دیگر که نیاز به فونت داشتید کافیست تا دستور زیر را در ابتدای فایل استایل خود بیاورید و خواص font-famyli به آن بدهید

@import(“https://digiwp.com/fonts/font.css”)

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

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