منوهای نصب در پنل مدیریت

بهینه سازی سایت توسط عکس های قالب !

به احتمال زیاد برایتان پیش آمده که بعضی عکس هایی که در قلب سایتتان دارید نمایش داده نشده و به دفعات سایت و refresh کردین تا این مشکل حل شود ! و یا شاید شما جزء کسانی باشید که از کندی لود شدن بعضی عکس های سایتتان رنج میبرند ! امروز قصد دارم به شما آموزشی بدهم تا با استفاده از اون تمامی عکس هایی که در سایتتان دارید را تنها در یک عکس بگنجانید، در اینصورت سرور شما فقط یک عکس را می خواند ولی تمام عکس های شما را در جای مناسب خود قرار می دهد ، همچنین میتوان این کار را یکی از مراحل بهینه سازی سایت و bandwidth سایتتان نام برد .. با ما همراه باشید !

spritepadm-main

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

توجه : پیش از شروع ، از قالبتان backup بگیرید .

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

.img {
	background: url(images/fman.png);
	width: 194px;
	height: 286px;
	margin: 10px auto 0;
}
.img2 {
	background: url(images/fman2.png);
	width: 196px;
	height: 274px;
	margin: 10px auto 0;
}

 

مرحله اول :

برای شروع کار شما نیاز دارید تمام عکس هایتان را در یک عکس با فرمت png با سایزی نسبت به تعداد عکس هایتان بسازید ! اما این کار خیلی طولانی و وقت گیر است ، برای انجام این کار سایت های زیادی هستند که سرویسی که می خواهیم را ارائه می دهند ، ولی بهترین آن سایت SpritePad است که خدمات خوب،سبک و رایگان طبق نیاز ما را ارئه میدهد .

پس از ورود به این سایت عکس های خودتان را به صورت drag and drop در قسمت مشخص شده قرار دهید ، سپس محل عکس ها را به دلخواه تغییر دهید ( سعی کنید عکس هایتان روی هم قرار نگیرد ) همچنین دقت بفرمایید این صفحه در آخر همان “یک عکس با فرمت png ” مورد نظر ما میشود . در زیر عکسی از این مرحله را مشاهده می کنید .

spritepad-1

 

پس از اینکه عکس هایتان را در جای مناسبی قرار دادید بروی Fit document کلیک کنید تا بخش های اضافه حذف شوند .

سپس بروی download کلیک کنید .

 

مرحله دوم و پایانی :

بعد از دانلود شاهد 2 فایل به نام sprites یکی با فرمت png و دیگری با فرمت css خواهید بود .

sprites.png را در پوشه images قالب خود قرار دهید ، سپس sprites.css را با یک ویراشگر مناسب باز کنید .

تمام کد های موجود در این فایل را در اول استایل قالبتون منتقل کنید ، حال باید یکسری ویرایش در استایل قالب انجام دهیم .

SpritePad به طور پیشفرض اسم عکس هارا به عنوان اسم کلاس قرار میدهد ، بنابراین باید نام آن هارا تغییر دهیم تا مشکلی به وجود نیاید

در زیر نمونه ای از آنچه که در sprites.css وجود دارد را مشاهده می کنید :

.fman2, .fman{
	background: url(sprites.png) no-repeat;
}

.fman2{
	background-position: -206px -7px ;
	width: 196px;
	height: 274px;
}

.fman{
	background-position: 0 0;
	width: 194px;
	height: 286px;
}

 

اما در استایل قالب ، آن را به شکل زیر ویراش میکنیم :

.img, .img2 {
	background: url(images/sprites.png) no-repeat;
}
.img {
	background-position: 0 0;
	width: 194px;
	height: 286px;
	margin: 10px auto 0;
}
.img2 {
	background-position: -206px -7px;
	width: 196px;
	height: 274px;
	margin: 10px auto 0;
}

 

همانطور که در بالا ملاحظه میفرمایید ، اسم کلاس ها تغییر کرده و هر کلاس که عکسی دارد background-position خاص خود را گرفته است .

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

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

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

1 پاسخ در "بهینه سازی سایت توسط عکس های قالب !"

  1. واقعا مطلب جالبی بود خیلی دنبالش بودم

ارسال یک پیغام

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

 

2017 © تمامي حقوق مطالب سايت Developersian محفوظ و همچنین استفاده از مطالب سایت با ذکر منبع بلامانع است.
X