عکس های واکنشگرا در وردپرس ۴٫۴ 0 دیدگاه

wp responsive images

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

در حالی که رشد ثبات عکس های واکنشگرا را نمیتوان رد کرد، سخت است که کاربردی را در محدودیت های یک CMS بزرگ مثل وردپرس جای داد. با این که نوشتن یک برنامه کوچک روی theme شما به وسیله خودتان کاملا ممکن است، اما انجام آن پر از چالش و بسیار وقت گیر است.

خوشبختانه با آمدن وردپرس ۴٫۴ توسعه دهندگان theme و دارندگان سایت ها میتوانند بسیار ساده و راحت پوسته خود را با عکس های واکنشگرا تطبیق دهند. در نسخه ۴٫۴ وردپرس ، پلاگین RICG Responsive Images در هسته وردپرس گنجانده شده که این به معنی این است که عکس های واکنشگرا به صورت پیشفرض یک بخش از وردپرس را تشکیل داده اند. بگذارید نگاهی به این ویژگی جدید وردپرس بیاندازیم و ببینیم چگونه میتوان از آن در پوسته های وردپرس استفاده کرد.

wp responsive images

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

همزمان با به روزرسانی به وردپرس ۴٫۴، تمام محتوا و عکس های شاخص شما دارای خصوصیات srcset و sizes خواهند شد، که برای اطمینان این که تمام سایز های در دسترس عکس هنگام نگهداری ابعاد درخواست شده نمایش داده میشوند فیلتر میشوند. باید توجه شود که عکس های بریده شده با crop  وردپرس اگر نسبت عکس در ابعاد عکس اصلی نباشد در خصوصیت srcset قرار نخواهند گرفت. به علاوه ، تابع wp-get-attachment-image  عکس های واکنشگرا را به ما خواهد داد.

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

یعنی ویژگی جدید عکس های واکنشگرا هیچ واسط کاربری قابل مشاهده ای ندارد.هیچ گزینه ای برای باز کردن، هیچ فرمی برای پر کردن، و یا هیچ چک باکسی برای تسک زدن وجود نخواهد داشت. این به آن معنی خواهد بود که توسعه دهندگان پوسته باید فایل function.php خود را برای اطمینان از اعمال خصوصیت sizes ویرایش نمایند. دلیل آن، این است که زمانی که ما از عکس های واکنشگرا در وردپرس صحبت میکنیم ، دقیقا درباره خصوصیات اچ تی ام الی srcset و sizes  در تگ عکس صحبت میکنیم.

زمانی که وردپرس کار استثنایی وارد کردن سایز های عکس در خصوصیت srcset  را انجام میدهد، خصوصیت sizes برای پیشگویی اندکی سخت تر است. دلیل آن است که خصوصیت sizes به مرورگر میفهماند که عکس چه قدر در viewport های دردسترس عریض است. تا زمانی که اطلاعات نمایش داده شده به style تم کاربر بستگی دارد، بهترین کاری که میتوانیم انجام دهیم قراردادن یک کد پیشفرض در این خصوصیت است:

sizes=”(max-width: {{image-width}}) 100vw, {{image-width}}”

 

این پیشفرض خصوصیت sizes دو چیز را مشخص میسازد : اول ، حتمی بودن وجود خصوصیت sizes بر روی عکس، و دوم ، حتمی بودن این که مرورگر منبع عکس بزرگتری از عرض اصلی خواسته شده را تهیه نکرده است. اگر css ای اندازه عکس را در در viewport های مختلف تعیین کند ، این پیشفرض خصوصیت sizes  کمتر مفید خواهد بود.

تا آنجا که پیشفرض خصوصیت sizes به عکس هایی کمک میکند که css ای برای آنها زده نشده است ، filter hook  ها این امکان را به توسعه دهندگان میدهد که خصوصیت sizes را برای همه عکسها قرار دهند ، برای اطمینان حاصل کردن از یک خصوصیت sizes عالی که در هر breakpoint  ای قابل استفاده است.

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

اگر شما یک توسعه دهنده پوسته هستید یا به کد وردپرس خود دسترسی دارید، عکس های پوسته خود را برای انجام شدن خصوصیت sizes فیلتر کنید که یکی از مهمترین چیز هایی است که میتوانید در نسخه بعدی تم خود قرار دهید. در ادامه فیلتری را مینویسیم که برای تابع wp_calculate_image_sizes نوشته شده که شما میتوانید آن را برای پوسته خود شخصی سازی نمایید :

function adjust_image_sizes_attr( $sizes, $size ) {

$sizes = ‘(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px’;

return $sizes;

}

add_filter( ‘wp_calculate_image_sizes’, ‘adjust_image_sizes_attr’, 10 , 2 );

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

wp responsive images

تنظیم کردن عکس های واکنشگرا برای پوسته شما

با معرفی تابع جدید عکس های واکنشگرا چندین هوک جدید که پشتیبانی از آن که بهترین سایز را روی تم شما نمایش میدهند معرفی شدند. Max_srcset_image_width به توسع دهنده اجازه میدهد تا بیشترین عرض عکس را که در خصوصیت srcset گنجانده شده فیلتر کند. هوک wp_calculate_image_srcset خصوصیت srcset عکس ها را فیلتر میکند ، در حالی که wp_caculate_image_sizes به توسعه دهندگان اجازه شخصی سازی خصوصیت sizes را میدهد که بهترین گزینه در breakpoint  های عکس در پوسته آنهاست.

اگر شما به دنبال یک نمونه از فیلتر بهترین حالت خصوصیت sizes در یک عکس هستید، تم جدید دوهزاروشانزده یک نمونه خوب را برایتان به همراه دارد.

در فایل functions.php این پوسته ، دو تابع آخر خصوصیت sizes را برای اندازه کردن عکس در breakpoint های مختلف در داخل پوسته فیلتر میکنند.

برای عکس های درون محتوا ، ما تابع wp_calculate_image_sizes را فیلتر میکنیم، در حالی که برای عکس های بند انگشتی یا تصویر شاخص، ما تابع wp_get_attachment_image_attributs را فیلتر میکنیم.ما از دو تابع مختلف استفاده میکنیم زیرا این پوسته همانطور که تصاویر شاخص تغییر میکنند، تغییر میکند و بر روی breakpoint های مختلف نمایش داده میشود که با نمایش عکس های داخل محتوا در همان breakpoint در همان شرایط متفاوت است. این مدل جدا کردن عکس ها به وسیله توابع همیشه برای هر پوسته ای لازم نیست، شما با چندین راه مختلف میتوانید عکس های خود را فیلتر کنید و به توسعه دهندگان اجازه میدهد که به صورت عمومی برای همه عکس ها این کار را انجام دهند، یا به صورت اختصاصی برای هر کدام.

بروزرسانی وردپرس به ۴٫۴ به این معنی است که کاربران به راحتی میتوانند از پشتیبانی عکس های واکنشگرا بهره مند شوند و در همه صفحات نمایش با هر سایزی و هر چگالی پیکسلی عکس های شفاف را ارائه دهند. این امکان همچنین باعث افزایش کارایی صفحات وب میشود و صفحات وب دیگر زمان بیشتری برای دانلود عکس های بزرگ نمیگذارند.همچنان که این یک فعالیت اتوماتیک برای کاربران است، توسعه دهندگان خواستار تنظیم کردن خصوصیت sizes عکس های خود در فایل functions.php خود هستند.

مترجم سامان توحیدیان

پاسخ دهید

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


Time limit is exhausted. Please reload CAPTCHA.