مدت زمان تقریبی مطالعه: 1 دقیقه و 2 ثانیه

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

جزئیات

دسته بندی
منتشر شده در 1397/10/18
پسندها 0
بازدید 155
نظرات 0
منبع

توضیحات

حتما برای شما هم پیش اومده که در حین انجام یک پروژه طراحی سایت نیاز داشتید که در بخش کدنویسی از سایز تصاویر دلخواه تون استفاده کنید، چون پیشفرض های وردپرس نیاز شما رو برآورده نمی کردن و سایزی که شما میخواستین رو نداشتن.پیشفرض هایی که برای کراپ کردن تصاویر در وردپرس وجود دارند در ۵ سایز تعریف شدند بصورت زیر:

 

thumbnail   : Thumbnail (default 150px x 150px max)
medium      : Medium resolution (default 300px x 300px max)
medium_large: Medium Large resolution (default 768px x 0px max)
large       : Large resolution (default 1024px x 1024px max)
full        : Original image resolution (unmodified)

 

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

 

اگر قالب شما از تصاویر شاخص پشتیبانی نمیکنه می تونید به راحتی با قرار دادن کد زیر در داخل فایل functions.php قالب سایت تون این امکان رو به قالب اضافه کنید

add_theme_support( 'post-thumbnails'); 

 

خیلی راحت می توانید این کار را در کدنویسی اعمال کنید برای مثال تصاویر پست های بخش وبلاگ رو با کد زیر فراخوانی میکنیم:

 

the_post_thumbnail('blog'); 

 

و تصاویر پست های بخش اخبار رو با کد زیر فراخوانی میکنیم:

 

the_post_thumbnail('news'); 

 

اما ما هنوز این سایزهای جدید یعنی blog و news رو تعریف نکردیم و ابتدا باید این دو سایز جدید رو تعریف کنیم و کدهای زیر رو بذاریم داخل فایل functions.php قالب سایتمون:

 

add_image_size( 'blog', 400, 220, true ); // تصویر به عرض ۴۰۰ پیکسل و طول ۲۲۰ پیکسل 
add_image_size( 'news', 600, 340, true ); // تصویر به عرض ۶۰۰ پیکسل و طول ۳۴۰ پیکسل 

 

الان شما می تونید با فراخوانی کد زیر تصاویر خودتون رو در سایزهایی که تعریف کردید داشته باشید.شما حتی اگه هنگام نوشتن یک مطلب از تصاویر بزرگتری نیز استفاده کنید بطور مثال تصویری با مشخصات ۱۰۲۴*۱۰۲۴ پیکسل، چون تصاویر اون مطلب رو با کد و سایز سفارشی خودتون صدا زدین تصویر بزرگ به اندازه های دلخواه شما برش داده شده و در سایتتون نمایش داده خواهد شد.البته شما می تونید در صفحه توضیحات مطلب از تصویر با سایز اصلی استفاده کنید، برش دادن تصاویر و کوچک تر کردن اونها به این دلیل هست که در صفحه اصلی سایت تعداد مطالب و تصاویر زیاد باعث کندی سایت نشود.

the_post_thumbnail('news'); 

نکته پایانی

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

برچسب ها

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

مطالب مرتبط

نظرات

دیدگاه خود را بیان کنید

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

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