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

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

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

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

ریسپانسیو کردن تصاویر

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

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

مرحله 1: تغییر در فایل functions.php (ایجاد عکس در سایز های مختلف)

هنگامی که شما عکسی را بارگذاری می ­کنید، قالب وردپرس آن تصویر را در سایزی که دارد + 3 سایز دیگر (البته سایز های استاندارد) ایجاد می کند:

Thumbnail (150×150)

Medium (300×300)

Large (1024×1024)

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

add_image_size('sml_size', 250);
add_image_size('mid_size', 550);
add_image_size('lrg_size', 1100);
add_image_size('sup_size', 2500);

اضافه کردن سایز به تابع باید از یک نام و یک سایز تشکیل شده باشد. سایز ها می توانند متفاوت باشند که ما در قسمت بالا سایز ها را خودمان تعیین کردیم، اما سایز های استاندارد در اندازه 300، 600، 1200، 2400 هستند. مثالی که برای شما در قسمت بالا آوردیم نشان دهنده این است که ما 4 سایز را به تصویرمان اضافه کردیم اما در قسمت انتخاب سایز شما باید متناسب با طراحی تم وب سایت خود اقدام کنید.

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

مرحله 2: نصب پلاگین 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">

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

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

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

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

مرحله آخر : نصب پلاگین برای تولید مجدد اندازه های تصویر

شما می توانید با نصب و فعال کردن پلاگین Regenerate Thumbnails تمامی تصاویر موجود در وب سایت خود را پیدا کرده و تصاویر جدید را در اندازه های متفاوت بر اساس فایل functions.php تولید می کند.

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