چطور عکس های وردپرس را ریسپانسیو کنیم؟

چطور عکس های وردپرس را ریسپانسیو کنیم؟
وردپرس یه پلتفرم فوق العاده قویه. ساخت یه تم ریسپانسیو و یکپارچه وقتی که اصول اولیه قالب سازی را می­دونین واقعا آسان است. عکس های ریسپانسیو چیزی نیستن که وردپرس خارج از باکس خود بهشون بپردازه. در پایین ما بهتون یاد میدیم که چطور هر عکس با اندازه دلخواهتون رو بصورت دستی ایجاد کنین و بعد توی ادیتور خود ، تگ عکس و ویژگی srcset رو  برای هر عکسی تعیین کنین. این کار میتونه زیاد وقتگیر نباشه ولی می­تونه برای هر یوزری که  اطلاعاتی از HTML  نداره یک مشکل ایجاد کنه.
خوشبختانه یه راه  برای این که وردپرس خود این کارها را انجام دهد وجود دارد. وردپرس میتواند تمام سایز­های مختلف از یه عکس را ایجاد کنه و بعد ( با یه پلاگین ) هر جایی که نویسنده برای قرارگیری عکس انتخاب کند ، تگ و سورس آن را قرار بده (اضافه کنه).

گام اول : تغییر در فایل functions.php برای ایجاد عکس در سایز های مختلف

هر وقت شما عکسی رو آپلود می­کنین ، وردپرس اونو توی همون سایز خود عکس ذخیره میکنه همینطور سه نسخه ی دیگه از عکس رو به طور خودکار توی اندازه های استاندارد ایجاد می­کنه :

Thumbnail (150×۱۵۰)Medium (300×۳۰۰)Large (1024×۱۰)

این یه ویژگی قویه که میتونه عکس های با سایز مختلف تولید کنه.  این به این معنیه که شما نیاز ندارین که نسخه­ های مختلفی از عکس در سایزهای مختلف درست کنین، شما فقط عکس رو آپلود می­کنین و وردپرس خودش عکس در انواع سایز­ها رو تولید می­کنه.
این کار بااعمال یه سری تغییرات توی فایل function.php  انجام می­شه. برای اضافه کردن عکس در اندازه­ های دیگه شما نیاز دارین که  تابع add_image_size را فراخوانی کنین. برای مثال :

add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );

هر فراخوانی به تابع شامل یک نام ( برای شناسایی اندازه توسط وردپرس ) و یک اندازه ست. سایز جدید پهنای ۳۰۰, ۶۰۰, ۱۲۰۰ ، ۲۴۰۰ داره . همینطور برای این تابع تعیین ارتفاع  و یا برش امکان پذیره، ولی توی مثال بالا ما نسبت ابعاد تصویر رو حفظ کردیم.
 
مثال بالا نشون می­ده چهار اندازه تصویر جدید اضافه شده ، ولی شما ممکنه بخواین اندازه­های بیشتر یا کمتری اضافه کنین . این وابسته به طراحی تم شماست. در حال حاضر هر زمان یک تصویر به وردپرس آپلود می شه، وردپرس اونو در اندازه جدید تولید می­کنه . گام بعدی اضافه کردن اونا به HTML  هست .

گام دوم : نصب پلاگین the RICG Responsive Images .

 برای اینکه وردپرس عکس در اندازه ­های مختلف رو به ما بده نیاز به نصب پلاگین RICG Responsive Images داریم. وقتی اونو نصب و فعال  کردیم تمام عکس­ها در هر سایزی شامل تگ عکس همراه با ویژگی  srcset میشه.
 
معمولا وقتی عکسی توی وردپرس به صفحه اضافه می­شه ، خروجی HTML  به صورت زیر در میآد :

<img class="aligncenter wp-image–۱۷۶ size-full" src="http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg" alt="App Screenshot">

اینجا فقط یک عکس توی سورس آورده شده. 

و وقتی که این پلاگین نصب می­شه ، خروجی HTML  به صورت زیر در می­آد :

<img class="aligncenter wp-image–۱۳۷ size-full" src="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg" srcset="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169x300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576x1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600x1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">

 تمام اندازه تصویر جدید از طریق ویژگی srcset اضافه شده.
این پلاگین همینطور شامل Picturefill.js است که یه تصویر ریسپانسیو برای هر دو عنصر تصویر و ویژگی های ریسپانسیو جدید برای عنصر IMG اضافه می کنه. این ویژگی در کنار ویژگی srcset در حال حاضر در تگ تصویر باعث ریسپانسیو شدن تصاویر شما می­شن.

تصاویر شما حالا ریسپانسیو شدند ! چطور عکس های وردپرس را ریسپانسیو کنیم؟

حالا تصاویر روی سایتتون ریسپانسیو خواهند بود – مرورگر خودش مناسب ترین تصویر رو انتخاب و دانلود می کنه.
کاربرا توی دستگاه­های با صفحه نمایش کوچکتر تصاویر کوچکتر دریافت میکنن. پس این تصاویر سریعتر دانلود می­شن و وب سایت شما هم سریعتر بارگیری می­شه ، پس کمتر به پهنای باند کاربران نیاز پیدا می­شه. کاربرای دستگاه­های با صفحه نمایش بزرگتر تصاویر بزرگتر دریافت خواهند کرد ، چون اونا نمی خوان از کیفیت کمتر برخوردار باشن.
فقط یه مشکل بالقوه با این روش وجود داره: سایز­های ایجاد شده فقط با تصاویری که  بعد از نصب RICG Responsive Images پلاگین به وردپرس آپلود شدن کار خواهد کرد. اگر یک وب سایت با نام تجاری جدید که شما در حال کار روی اون هستین، دارین ، مشکلی نیست، پس اگه اون یه وب سایت موجود با محتوای موجود  باشه اندازه تصویر جدید که شما توی functions.php قرار دادین  به تصویر اضافه نخواهد شد. خوشبختانه، شما لازم نیست دوباره تمام تصاویر را اضافه کنین – یه پلاگین موجوده که می تونه کمک کنه. 

گام سوم : نصب پلاگین برای تولید مجدد اندازه های تصویر(اختیاری)

پلاگین Regenerate Thumbnails تمام فایل­های عکس پیوست توی سایت شما رو پیدا میکنه و به تولید دوباره اندازه تصویر جدید بر اساس محتوای functions.php جدید قرار داره اقدام می­کنه – این بهینه سازی واقعی است و فقط نیاز به کلیک یه دکمه داره .
بعد از نصب، به Tools -> Regen .Thumbnails برین بعد “ایجاد مجدد تمام عکس­ها” رو کلیک کنین.نوار وضعیت ظاهر میشه و شما اطلاعاتی درباره تعداد تصاویری که تغییر اندازه داده شده میبینین.

در این صورت، همه تصاویری که توی وب سایتتون وجود دارن خروجی صحیح ، با استفاده از تگ تصاویر از طریق ویژگی srcset خواهند داشت.