چهارشنبه ۳۰ آبان ۱۳۹۷

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

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

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

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

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

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

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

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

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

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

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

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

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

برخی خاصیت های فونت در css

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

کلاس هایی که معمولا فونت های قالب و مربوط به متن ها می باشد شامل p,span,h1,h2,h3,h4,h5,h6, و کلاس هایی که برای متون مورد استفاده قرار میگیرد به طور مثال میتوانید یک div ایجاد کنید و برای آن کلاسی تعریف کنید با هر نام دلخواهی و در فایل style.css برای آن کلاس خاصیت تعریف کنید.

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

این خواص باید در فایل استایل که همان style.css و یا فایل rtl.css است وارد کنید .

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
font-family: Byekan , tahoma , arial;
font-size: 13px;
color: #333333;
letter-spacing: 2px;
text-align: right;
direction: rtl;
text-decoration: none;
text-transform: lowercase;
text-indent: 30px;
text-shadow: #FF6600 8px;
font-style: italic;
font-weight: 300px;

font-family خاصیتی است که برای مشخص کردن خانواده فونت و نام آن استفاده میشود برای مثال فونت airal در جلوی خاصیت فونت فامیلی نوشته می شود که میتوانید سایر فونت ها را نیط به آن اصافه کنید و با کاما از هم جدا کنید به صورت معمول در تمامی سیستم ها فونت های استاندارد نصب شده اند مثلا در تمامی سیستم ها فونت آریال نصب است و اگر فونتی خوانده نشود فونت آریال استفاده می شود . به طور مثال ما فونت یکان را نصب کرده ایم در وب سایت و خاصیت فونت فامیلی را داده ایم اگر از کاما استفادا کنیم و فونت دیگری را استفاده کنید در صورت عدم اجرای فونت اول فونت دوم استفاده می شود .

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

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

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

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

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

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

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

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

text-shadow خاصیتی است که به متن سایه می دهد .

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

font-weight خاصیتی است که عرض کاراکتر ها را مشخص میکند .

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

افزودن فونت دلخواه به قالب یا صفحه ی وب

همانطور که در بالا به آن اشاره شد برای افزودن فونت به قالب ها باید فایل استایل را ویرایش کنید  فایل های css و rtl.css در این فایل ها باید فونت ها را فراخوانی و شناسایی کنید . به طور مثال فونت بهینه شده برای وب یکان را در نطر میگیریم برای افزودن فونت Byekan باید فایل های این فونت را داشته باشیم که میتوانید یا در آدرس های دیگر و یا در پوشه ای با نام font آپلود کنید . هر فونتی باید با سه فرمت زیر موجود باشد .

۱
۲
۳
BYekan.eot
BYekan.ttf
BYekan.woff

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

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

معرفی فونت دلخواه به فایل استایل

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

توجه کنید که اگر درون فایل style.css وارد میکنید ابتدای این فایل به صورت توضیح در css که با/* شروع و با */ تمام می شود این توضیحات برای معرفی قالب و نام سازنده آن می باد که شروه و پایان میابد اطلاعات طراح و قالب است شما باید بعد از این کد ها . کد های زیر را وارد کنید . حتما دقت کنید که فونت های نام برده شده باید درون پوشه ای که گفته شد وجود داشته باشد .

۱
۲
۳
۴
۵
۶
@font-face {
font-family: 'BYekan';
src: url('font/BYekan.eot?#') format('eot'),  /* IE6?8 */
url('font/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('font/BYekan.ttf') format('truetype');  /* Saf3?5, Chrome4+, FF3.5, Opera 10+ */
}

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

پس از انکه این کد ها را وارد کردسد کافیست تا برای بخش هایی که نیاز دارید با خاصیت 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”)

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

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

اصلا خوب نبودمیتونه بهتر باشهقابل قبولهخوب بودعالی بود (شما اولین نفر باشید!)

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

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

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

Time limit is exhausted. Please reload the CAPTCHA.