تروند وب, متفاوت & حرفه ای
مرجع ارائه خدمات فناوری , طراحی وب سایت , طراحی نرم افزار در خوزستان


خانه / training / theme-design / آموزش ویرایش فونت قالب وردپرس | افزودن فونت به قالب وردپرس
افزودن فونت دلخواه به قالب وردپرس

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

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

برای ویرایش استایل قالب مثل فونت قالب وردپرس یا هر استایل دیگه ای بهتره افزونه Firebag مرورگر فایرفاکس برای ویرایش استایل رو نصب کنید. بخش هایی که نیاز به ویرایش داره فایل های استایل قالب هستش مثل  ( style.css , rtl.css ) قایل rtll اگر قالب شما یک قالب خارجی باشه در زمان فارسی سازی قالب ممکن فارسی ساز براش فایل 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;

برخی خاصیت هایی که یه متن می تونه در css به خودش بگیره به صورت زیر هستش
خاصیت font-family : برای مشخص کردن فونت متن هستش که در اینجا برای فونت مثلا Byekan در نظر گرفته شده که دو تا فونت هم پشت سرش یا کاما از اولی جدا شدن برای این هستش که اگر فونت اول رو پیدا نکردی دومی را برای متن در نظر بگیر و سومی.

خاصیت font-size : این خاصیت سایز فونت را مشخص می کنه.

خاصیت color : این خاصیت رنگ فونت را مشخص می کنه.

خاصیت letter-spacing : ای خاصیت فاصله ی کاراکترها را مشخص میکنه از سمت چپ.

خاصیت text-align : این خاصیت متن را ترازبندی میکنه ( راست , چپ , وسط )

خاصیت direction : این خاصیت هم مثل text-align تراز بندی رو مشخص می کنه که بیشتر در سایت های فارسی زبان استفاده میشه.

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

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

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

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

خاصیت font-style : استایل نمایش فونت مثلا italic کمی متن رو کج می کنه.

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

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

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

برای استفاده از فونت دلخواه در صفحه ی وب باید ابتدا فونت رو به فایل css معرفی کنید تا فونت های شما رو شناسایی کنه در اینجا برای مثال فونت Byekan را نظر می گیریم برای افزودن فونت بی یکان به متن های سایت باید این فونت ها را در دسترس داشته باشید این فونت ها با سه فرمت به صفحه ی وب معرفی میشن برای Byekan به صورت زیر باید سه فایل داشته باشیم

BYekan.eot
BYekan.ttf
BYekan.woff

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

حال به فرض مثال ما این سه فایل را داخل پوشه ی 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+ */
}

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

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

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

مشکل , سوال داشتید در قسمت دیدگاهها مطرح کنید.

پاسخ دهید

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