بیگ تم, متفاوت & حرفه ای
مرجع ارائه آموزش وردپرس , قالب وردپرس , افزونه وردپرس بی نظیر


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

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

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

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

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

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

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

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

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

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

باکس دانلود

58 دیدگاه

  1. سلام من تمام این روش هارو درست انجام می دهم ولی فونتام تغییر نمی کنند !!

    khooneyema.com

    چیکار کنم ؟؟

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

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

    • احتمالا طراح از important! استفاده کرده جلوی هر مقدار css اگر این رو بگذارید دیگه بقیه ی جاها تغییرات رو اعمال نمیکنه .. باید اون ها رو پیدا و حذف کنید

  4. با سلام و ادب
    از اموزش بسیار روان شما ممنون
    اگر فونت های ما مثلا سه تا بود، باید سه بار این کد را با هر کدام از فونت ها دوباره بنویسیم؟
    می تونید مثال بزنید؟

    متشکر از پاسخگویی شما

  5. باسلام و خسته نباشید؛
    بنده از پوسته ی BE که از شما دریافت کرده ام ، استفاده می کنم.
    برای افزودن یکسری فونت جدید و دلخواه به این پوسته ، چه اقداماتی را به ترتیب باید انجام دهم؟
    متشکر.

    • این بخث نکات فنی زیادی داره که خارج از حوصله دیدگاه ها هست
      سئوالات مربوط به محصولات بیگ تم رو فقط در بخش پشتیبانی بیگ تم مطرح کنید تا سریعتر به جواب برسید
      ساده ترین روش جایگزین کردن فونت های دلخواهتون با یک یا چند تا از فونت های موجود در پوشه فونت هست

پاسخ دهید

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

دنبال کردن