دسته بندی :
تاریخ انتشار : ۲۲ تیر ۱۳۹۴
گردآوری و تالیف : رضا صفری

فعاليتم رو در عرصه ي برنامه نويسي با زبان هاي تحت ويندوز(#c) شروع كردم بعد از مدتي به خاطر گستردگي وجذابيت علاقه مند به زبان هاي برنامه نويسي تحت وب (php) شدم والان تقريبا به css و javascript و php شناخت دارم وسعي ميكنم هر روز بهتر بشم.

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

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

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

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

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

Thumbnail (150×150)
Medium (300×300)
Large (1024×10)

این یک ویژگی قوی است که میتواند عکس های با سایز های مختلف تولید کند.  این بدان معنی است که شما نیاز ندارید که نسخه­ های مختلفی از عکس در سایزهای مختلف درست کنید، شما تنها عکس را آپلود می­کنید و وردپرس خود عکس در انواع سایز­ها تولید می­کند.
این کار با اعمال تغییراتی در فایل 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 );

هر فراخوانی به تابع شامل یک نام ( برای شناسایی اندازه توسط وردپرس ) و یک اندازه است. سایز جدید پهنای 300, 600, 1200 ، 2400 دارد . همچنین برای این تابع تعیین ارتفاع  و یا برش مقدور است ، اما در مثال بالا ما نسبت ابعاد تصویر را حفظ کردیم.
 
مثال بالا تنها نشان می­دهد چهار اندازه تصویر جدید اضافه شده ، اما شما ممکن است بخواهید اندازه­های بیشتر یا کمتری اضافه کنید . این وابسته به طراحی تم شماست. در حال حاضر هر زمان یک تصویر به وردپرس آپلود می شود، وردپرس آن را در اندازه جدید تولید می­کند . گام بعدی افزودن آن­ها به HTML  است .

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

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

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

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

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

<img class="aligncenter wp-image–137 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 خواهند داشت.

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • alireza

    سلام ؛ من از کد زیر استفاده کردم تو قالب:

    .postfix img{max-width:100%; height:50%;display:block; margin-left: auto; margin-right: auto; clear: both;}

    فقط اینکه همه ی عکسا وسط چین میشن! اما کارش عالیه و نیاز به پلاگین و کار دیگه ای نداله :D

    • admin

      سلام خب این کد css که میاد عکس ها رو برای دستگاه های مختلف تنظیم میکنه داخل خود مرورگر
      اما دقت داشته باشین که این عمل سایز اصلی رو کم نمیکنه
      یعنی تصویر با همون سایز اصلی لود میشه که اگه یه مثال از این گفته ام بخوام بزنم به اینصورت عمل میکنه
      مثلا شما یه تصویر با اندازه 1024*1024 و حجم 2 مگابایت دارید
      اگه بخواین از این روشی که گفتین استفاده کنید برای یک مکانی که به همون تصویر با اندازه 128*128 نیاز دارید
      این تصویر با همون اندازه 1024*1024 و حجم 2 مگابایت لود میشه و فقط تو مرورگر به ظاهر میشه 128*128

      اما اگه از بهینه سازی تصویر با این روش یا روش های دیگه استفاده کنید در مکانهای که به یه تصویر با اندازه 128*128 نیاز دارید دیگه مجبور نیستید 2 مگ رو لود کنید و فقط شاید مجبور به لود چند کیلو بایت بشین . که این تو لود کل صفحه تاثیر فوق العاده داره .

  • ابراهیم

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

    • admin

      سلام
      من زیاد در زمنیه وردپرس تخصص و تجربه ندارم اما
      به نظرم تو فایل function.php اگر add_image_size وجود داره اون اندازه های که غیر واقعیه حذف کن بعدم از خود کتابخانه وردپرس ، جای که عکس ها رو آپلود میکنن فکر کنم این تنظیم رو داشته باشه

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :