بازی با فونت های قالب سایت

3498dbff

سلام دوستان! نوشته ها بخش اصلی سایت ما هستند.معمولا بیشترین چیزی که کاربر میبینه و باید برای دیدنش راحت باشه همین نوشته ها هستند.خود نوشته های سایتمون رو با ویرایشگر متن می تونیم تغییر بدیم اما بقیه متون پوسته ی سایتمون ثابت هستند.

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

ما از فونت ها,رنگ و … برای متفاوت نشان دادن یه متن استفاده می کنیم.این تنظیمات در فایل style.css ذخیره میشه و برای کاربر نشون داده میشه.اما نکته اینجاست که اگه کاربر سایتمون فونتی رو که ما دوست داریم روی کامپیوترش داشت,سایت رو با فونت دلخواه ما می بینه ولی اگه اینطور نبود به صورت خودکار متن سایت ما با فونت های عمومی css دیده میشه.این که نوشته ما با چه فونتی (چه لیستی از فونت ها) نمایش داده بشه با کلید واژه ای در css به نام font – family  مشخص میشه مثل کد زیر:

#menu {font-family: Verdana, Arial, Helvetica,
   sans-serif; font-size:1em; color:blue; }

در این کد مشخص شده که کاربر متن رو با verdana ببینه اگه کسی این فونت رو نداشت با arial اگه اونم نداشت با …
و اگه هیچ کدوم رو نداشت باsans-serif که فونتی عمومی در css هست متن رو ببینه.بعضی از فونت ها نامی دو قسمتی دارند,نام این فونت ها رو داخل “” قرار می دهیم.

#menu {font-family: Verdana, Arial, Helvetica, 
     "Lucida Console", sans-serif;.....

فونت در وردپرس
برای استفاده از فونت در قالب های ودرپرس راه های زیادی هست.می توانیم از چندتا فونت در چند جای سایت استفاده کنیم و سایتمون رو کلا تغییر بدیم.فونت ها رو باید روی قالب سایت اعمال کنیم.البته چون قراره از فونت ها هر جایی که دلمون خواست استفاده کنیم پس بهتره کدهای فونت رو در قسمت body سایت قرار بدیم.

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }

با استفاده از این کد,متونی از سایت ما که با هیچ تگ یا div خاصی مشخص نشدند از کد بالا برای نمایش استفاده می کنند.
اما بعضی از قسمت های مهم سایت مثل نوشته هامون با تگ های زیر در style.css مشخص شدند(البته این همیشگی نیست ممکنه طراح قالب از تگ های دیگه ای استفاده کرده باشه)
content
post
entry
post-entry
مثل:

.content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }

پیدا کردن تگ درست برای یه متن خاص به همین آسونی نیست,خیلی از تگ ها میون کدهای تو در تو گم شدند.بهترین را استفاده از قابلیت inspect element در مرورگر های OPERA یا CHROME هست.به این صورت که روی متنی که دوست دارید تغییر بدید کلیک راست کنید و این قابلیت رو اجرا کنید تا کد CSS رو ببنید.
کدام فونت
این که از چه فونت استفاده می کنید یه نظر شخصی هست,اما بهتر ه از فونت هایی استفاده کنید که در بیشتر کامپیوتر ها وجود داره.
بهترین راه برای اینکه همیشه سایت ما با فونتی که علاقه داریم نمایش داده بشه اینه که فونتی که دوست داریم رو با سایتمون آپلود کنیم و با کد زیرکه در style.css قرار میگیره این فونت رو به قالب معرفی کنیم.

@font-face {
	font-family: Museo300;  
	src: local('Museo300-Regular'), 
		url("fonts/Museo300-Regular.ttf") format('truetype');  
	font-weight: normal;  
}

در مثال بالا من برای فونتم اسم Museo300 رو در نظر گرفتم و فونتم رو در پوشه fonts قالبم ریختم
حالا هرجا که بخوام میتونم جلوی قابلیت font-family اسم Museo300 رو تایپ کنم تا متن مورد نظرم با این کد نمایش داده بشه.

.post-item {font-family: Museo300}

تغییر اندازه متن ها
باز در کدهای css جایی برای اینکار هست.قابلیت font-size که با واحد پیکسل مقداردهی میشه

#menu ul li {font-size: 12px; color: green; }

یه روش خیلی خوب دیگه این است که متنی که در body هست رو به عنوان متن مرجع قبول کنیم و  متون دیگه رو نسبت به اون مشخص کنیم (با درصد)

body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }

با فونت ها بازی کنید
راه های خیلی زیادی برای بازی با فونت ها وجود داره مثلا رنگ کلمات مهم رو تغییر بدیم و … با استفاده از راهنمایی های بالا شما می توانید یکم کدهایی رو که داخل فایل style.css هست رو تغییر بدید تا ظاهر سایتتون کمی عوض بشه اما از من میشنوید اگه زیاد به کارتون مطمئن نیستید به این کدها دست نزنید.

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

400,351 نفر

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

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. دمت گرم خیلی مفید بود

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

  3. سلام و خسته نباشید خواهشا راهنمایی کنید چطور میشه از منوهایی که با فونت Awesome آیکون دارن استفاده کرد کد php این منوها متفاوتن یا نه؟

  4. سلام دوستان خواهشاراهنمایی کنید نیازدارم
    من فونتBnazaninروتوی هاستم آپلودکردمو توفایل cssتغییراتی دادم وهمه فونت های قالب سایتم روبه Bnazaninتغییردادم باموفقیت .اما لامصب این فونت نوشته های داخل مطالب تغییر نمیکنه؟درفایل Cssهمه جاهایی که font familyنوشته بود هم Bnazaninقراردادم ولی فونت داخل پست هاتغییرنمی کنه کسی بلده لطفا جواب بده .دعاتون می کنم.اینم آدرس سایتم garn.ir

  5. با سلام
    افزونه ای هست که بتونم کل فونت قالبو به آسانی تغییر بدم( قالب و مطالب انگلیسی هستند)اگر وجود داره معرفی میکنید لطفا

  6. 7 سال عضو همیار وردپرس

    سلام خسته نباشین یه سوال در مورد تغییر سایز فونت قالب وردپرس در قسمت دیسکرپشن زیر عنوان سایت دارم گزینه فونت سایز این قسمت از inspect element که نگاه میکنم بصورت خط خورده هست و با تغییر عدد سایز فونت در قسمت style.css تغییر نمیکنه علتش چیه و چطور می تونم کاری کنم که این خط خوردگی برطرف بشه تا بتونم سایز فونت اون قسمت رو تغییر بدم قالب accelerate رو از سایت شما نصب کردم . ممنون

    • 8 سال عضو همیار وردپرس

      با احترام برای تغییر سایز اون قسمت باید این کلاس رو تغییر بدید:

      #site-description

      راستی بهتره سوالی اگه درمورد قالبی خاص هست همونجا بپرسید ممنونم 😉

  7. سلام من می خواستم فونت بخش هدر یا منو ها رو به فونت Fyekan تغییر بدم . و این کد ها @font-face {
    font-family: ‘BYekan’;
    src: url(‘ParSiGroup/BYekan.eot’);
    src: local(‘BYekan’), url(‘ParSiGroup/BYekan.woff’) format(‘woff’), url(‘ParSiGroup/BYekan.ttf’) format(‘truetype’), url(‘BYekan.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    به همراه فونت ها اپلود کردم . اما فونتش تغییر نمی کنه ،اگه ممکنه راهنماییم بفرمایید.

    • 8 سال عضو همیار وردپرس

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

  8. 7 سال عضو همیار وردپرس

    عــــــــــــــالــــــــــــــیـــــــــــــــ!!

  9. سلام خسته نباشید

    چطور میتونم فونت به اصطلاح دیداری توی کل سایتم رو اختصاصی کنم
    (فیلد جست و جو ، فیلد نام و ایمیل و متن نظر قبل از ارسال )
    ** مثل همینجا که دارم نظر میدم.. فونتم فرق داره موقع تایپ

    • 8 سال عضو همیار وردپرس

      با سلام باید فونتی که دوست دارید رو از طریق css به هرجایی که می خواهید اضافه کنید.

  10. سلام، من میخوام فونت و سایز عنوان پست ها رو در سایتتغییر بدم باید کدوم کد ها رو دستکاری کنم؟ لطفا راهنمایی کنید

    • 8 سال عضو همیار وردپرس

      سلام
      مسلما تمامی این موارد در فایل شیوه نامه سی اس اس موجوده
      فقط باید ببینید برای قالب شما به چه نامی تعریف شده! که معمولا با عنوان استاتدارد تعریف میشه مثل : برای محتوا content

  11. خیلی ممنون . واقعا به دردم خورد .

  12. برای تغییر فونت قسمت تنظیمات باید چه کار کرد؟
    من فونت ها رو به قالب سایت اضافه کردم ولی نتونستم به قسمت تنظیسمات اضافه کنم؟
    میشه یه راهنمایی بفرمایید؟

    • 8 سال عضو همیار وردپرس

      با سلام قسمت تنظیمات وردپرس از قالب جدا هست و پوشه فونت ان در مسیر root/wp-includes قرار دارد.

  13. سلاممی خواستم صفحه wp-admin برای کاربرا غیرفعال بشه یعنی نشون داده نشهاز جهتی کاربرا باید بتونن پروفایل خودشون رو ویرایش کنند که لازمه اش اینکه با شاخه wp-admin دسترسی داشته باشنبه نظر شما من چیکار کنم که صفحه داشبورد برای کاربرا نمایش داده نشهمممنون

    • 8 سال عضو همیار وردپرس

      سلام
      وقتی کاربر عضو سایت شما هست یک داشبورد معمولی و ساده به هر حال نمایش داده میشه و کاریش نمیشه کرد، طبیعتا باید هم اینطور باشه

      با احترام

    • خب افزونه ای نیست که بشه باهاش بازی کرد.مثلاً بعد از ورود، کاربر به این صفحه هدایت نشهو به انتخاب خودش باشه یا مثلاً چه چیزهایی در این صفحه برای کابرها نمایش داده بشه و چه چیز هایی نمایش داده نشهمن می خوام که صفحه داشبورد رو حذف کنم چون بلا استفاده استهمچنین صفحه پروفایل کاربر برای مسائل امنیتی تو شاخه wp-admin نباشهموفق باشید

    • 8 سال عضو همیار وردپرس

      سلام
      من متوجه صحبت شما نشدم ! آیا سوالی پرسیدید الان ؟
      اینکه شما بخواهید افزونه ای رو نصب کنید تصمیمش با خودتونه
      اینجا هم فقط جهت پرسش سوال هستش

      با احترام

    • سلام.در مورد سوال تغییر مسیر کاربران افزونه Theme My Login به راحتی این کار رو انجام می ده. بعد از نصب ماژول redirection رو فعال و برای کابران مختلف تنظیمش کنید.
      اما در مورد تنظیم فونت. متاسفانه من نتونستم آدرس فونت رو تو سایت تنظیم کنم. وقتی فونت bnazanin رو ویندوز نصب هستش سایت درسته اما وقتی از ویندوز فونت رو پاک می کنم فونتهای سایت به هم می ریزه!. کد مشخص کردن محل فونت رو هم در قسمت body قرار دادم.

  14. با عرض سلام به همه ی دوستان من شدیدا به افزونه ی ارسال خبرنامه با smtp خود هاست نیاز دارم
    لطفا یک افزونه برای انجام این کار معرفی کنید.
    لطفا افزونه ای که معرفی می کنید حتما این ویژگی ها را داشته باشد

    1- با smtp خود هاست کار کند (نه gmail و …)
    2- رایگان باشد.
    3- قابل تنظیم باشد که هر ساعت چند خبرنامه ارسال شود.

    درضمن افزونه newsletter و Email Newsletter رو امتحان کردم، اولی تنظیمات smtp داره ولی کار نمی کنه، دومی رایگان نیست و اکانت یک سالش 99 دلار هست!!!!!!!!!!!!!!!

    منتظر هستم. با تشکر

    درضمن مدت زیادی است مشکلم را در http://www.hamyarwp.com/asks مطرح کرده ام ولی پاسخی دریافت نکرده ام ممنون می شوم پاسخ دهید

    • mailpoet بهترینهموفق باشید

  15. راحت ترین راه اینه که از فونت فیس های آماده استفاده کنید .مثل :
    font-api.ir
    fontonline.ir
    ifont.ir

  16. عالی بود !!

  17. سلام ، این آیکون های متحرکی که در سایت هست رو میگید چی هست و لینکی میدید که در موردشون مطالعه کنم.ممنون

    • 8 سال عضو همیار وردپرس

      سلام
      برای اطلاعات بیشتر میتونید به market.hamyarwp.com مراجعه کنید

      با احترام

دوره‌های آموزشی