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

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

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

5 / 5
1

حتما برای شما هم تا به حال پیش آمده است که قالبی را متناسب با سلیقه خود یافته اید اما خب در این قالب فونت آن مورد پسند شما نبوده، نگران این موضوع نباشید زیرا ما در این مقاله قصد داریم به شما نحوه تغییر فونت قالب وردپرس را آموزش دهیم. در پوشه قالبی که شما بر روی سایت وردپرسی خود نصب کرده اید فایل هایی موجود می باشد که هر کدام از این فایل ها مربوط به بخشی خاصی می باشند. اگر شما قصد دارید تغییراتی را در ظاهر قالب وردپرس خود ایجاد کنید باید به پوشه قالبی که نصب کرده اید مراجعه کنید، در این پوشه فایل هایی موجود است که هر کدام مربوط به بخش خاصی از قالب می باشد اما شما فقط باید فایل های css را که مربوط به استایل قالب می باشند را تغییر دهید که از قبیل این فایل ها می توان فایل style.css و یا rtl.css و… نام برد.

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

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

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

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

ویژگی های فونت در CSS

تمام فونت های موجود در 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: این گزینه مربوط به فونت نوشته می باشد. شما با استفاده از این گزینه می توانید همان فونت دلخواه خود را برای نوشته مورد نظرتان انتخاب کنید. اگر بخواهیم برخی از این فونت ها را نام ببریم می توانیم به فونت های iransans , bnazanin, byekan و بسیاری فونت های دیگر اشاره کنیم.

شما در این بخش می توانید چند فونت را انتخاب کنید و اولویت بندی کنید و این به آن دلیل است که اگر احیانا فایل فونت اولیه شما یافت نشد فونت هایی که در اولویت های بعدی قرار دارند اجرا شوند. در اینجا همانطور که در بالا مشاهده می کنید ما فونت های Byekan , tahoma , arial را انتخاب کرده ایم که فونت اول و اصلی ما Byekan می باشد که بر روی سایت اجرا می شود و در اولویت بعدی فونت tahoma را انتخاب کرده ایم، حال اگر فونت اول ما یعنی Byekan اجرا نشود اولویت دوم ما یعنی فونت tahoma اجرا می شود و در صورت اجرا نشدن این فونت هم اولیت بعدی ما اجرا می شود.

مطلب پیشنهادی  نصب Google Analytics در وردپرس

font-size: همان طور که از عنوان این ویژگی مشخص است، این ویژگی مربوط به اندازه فونت می باشد. شما به وسیله این ویژگی می توانید اندازه مناسب نوشته را انتخاب کنید.

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

letter-spacing: این ویژگی مربوط به فاصله کاراکتر ها از سمت چپ می باشد یعنی شما می توانید فاصله کاراکتر ها را توسط این گزینه از سمت چپ کم یا زیاد کنید.

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

direction: این ویزگی اکثرا در سایت های فارسی زبان استفاده شده و همانند ویژگی text-align در ارتباط با تراز بندی نوشته می باشد.

text-decoration: این ویژگی مربوط به حذف خط از زیر نوشته های لینک دار می باشد. اگر دقت کرده باشید در نوشته وقتی ما قمستی از نوشته را لینک دار می کنیم در زیر آن خطی ظاهر می شود شاید شما بخواهید آن را حذف کنید، این کار را می توانید از طریق قرار دادن حالت این ویژگی بر روی حالت none انجام دهید.

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

text-indent: توسط این گزینه می توانید مقدار فرو رفتگی متن را مشخص کنید و آن را کاهش یا افزایش بدهید.

text-shadow: شما با استفاده از این ویژگی می توانید متن خود را سایه دار کنید.

font-style: همان طور که از عنوان این ویژگی می توان فهمید، این ویژگی برای مشخص کردن استایل نوشته می باشد. شما می توانید از طریق این ویژگی استایل مورد نظر خود را به نوشته اعمال کنید. این ویژگی دارای حالت هایی می باشد مانند italic و یا bold و حالت هایی از این قبیل که هر کدام این ها استایل خاص خود را به نوشته اعمال می کنند به طور مثال حالت bold نوشته را ضخیم و توپر می کند یا حالت italic مقداری نوشته را کج می کند.

مطلب پیشنهادی  نحوه ساخت و قرار دادن اسلایدر ویدیویی در وردپرس

font-weight: و آخرین ویژگی که این ویژگی می باشد مربوط به عرض کاراتر می باشد.

اضافه کردن فونت مورد نظر به قالب

برای تغییر فونت قالب وردپرس در این مرحله نوبت به اضافه کردن فونت دلخواهمان به قالب مورد نظر می رسیم. برای اضافه کردن فونت به قالب مورد نظر باید آن فونت را در دسترس داشته باشیم و کاری کنیم که فایل css فونت را شناسایی کند برای این کار شما باید فونت را به فایل css معرفی کنید. ما در این مقاله از فونت byeakan استفاده می کنیم، برای اینکه از این فونت در سایت خود استفاده کنید همانطور که گفتیم عواملی را نیاز داریم که یکی از آن ها معرفی فونت به css بود.

فونت ها همانطور که در زیر مشاهده می کنید با 3 فرمت به صفحه وب معرفی می شوند که فرمت هایی که در زیر وجود دارند مربوط به 3 فایل فونت byekan می باشد که باید شما آن ها را داشته باشید.

BYekan.eot
BYekan.ttf
BYekan.woff

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

حال نوبت به در درسترس قرار دادن این فونت برای قالب می رسد. برای این کار شما باید سه فایلی را که در بالا نام بردیم را در پوشه font بگذارید و سپس در مرحله بعد پوشه font را در فایل style.css در پوشه قالب مورد نظر انتقال دهید و در آخر شما باید آدرس فونت ها را در فایل استایل قرار بدهید تا قابل شناسایی باشند.

 

معرفی فونت به فایل style.css

برای معرفی فونت به فایل style.css شما باید در ابتدا این فایل را باز کنید، در این فایل اطلاعات قالب در بخش اولیه قرار دارد که این اطلاعات شامل: نام قالب ، طراح و اطلاعات دیگر است، شما باید کدی که در ادامه گفته ایم را بعد از این اطلاعات کپی کنید البته به این نکته هم توجه کنید که در بخش های قبلی گفتیم باید برای معرفی فونت byekan با سه فرمتش داخل پوشه font به این صورت عمل کنید.

@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+ */
}

حال اگر شما بخواهید فونت های بیشتری را معرفی کنید باید همین کد های بالا را قرار بدهید.

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

اشتراک گذاری

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

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

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