ریسپانسیو عکس‌ های وردپرس

" />

ریسپانسیو عکس‌ های وردپرس


ریسپانسیو عکس‌ های وردپرس

ریسپانسیو عکس‌ های وردپرس

ورد پرس یک پلت فرم فوق العاده قوی ایست.

ساخت یک تم ریسپانسیو و یکپارچه وقتی که اصول اولیه قالب سازی را میدانید واقعا آسان است.

عکس های ریسپانسیو چیزی نیستند که وردپرس خارج از باکس خود به آن بپردازد.

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

این کار میتونه زیاد وقتگیر نباشه ولی میتواند برای هر یوزری که  اطلاعاتی از HTML  ندارد یک مشکل ایجاد کنه.

خوشبختانه یک راه  برای این که ورد پرس خود این کارها را انجام دهد وجود دارد.

وردپرس میتواند تمام سایزهای مختلف از یک عکس را ایجاد کرده

و سپس ( با یک پلاگین ) هر جایی که نویسنده برای قرارگیری عکس انتخاب کند ، تگ و سورس آن را قرار دهد (بیافزاید).

ریسپانسیو عکس‌ های وردپرس

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

هر وقت شما عکسی آپلود می¬کنید ، وردپرس آن را در همان سایز خود عکس ذخیره میکند

همچنین سه نسخه ی دیگر از عکس را به طور خودکار در اندازه های استاندارد ایجاد میکند :

Thumbnail (۱۵۰×۱۵۰)
Medium (۳۰۰×۳۰۰)
Large (۱۰۲۴×۱۰)

این یک ویژگی قوی است که میتواند عکس های با سایز های مختلف تولید کند.

  این بدان معنی است که شما نیاز ندارید که نسخه های مختلفی از عکس در سایزهای مختلف درست کنید،

شما تنها عکس را آپلود می کنید و وردپرس خود عکس در انواع سایز ها تولید می کند.

این کار با اعمال تغییراتی در فایل function.php  انجام میشود.

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

add_image_size( 'sml_size', ۳۰۰ );
add_image_size( 'mid_size', ۶۰۰ );
add_image_size( 'lrg_size', ۱۲۰۰ );
add_image_size( 'sup_size', ۲۴۰۰ );

هر فراخوانی به تابع شامل یک نام ( برای شناسایی اندازه توسط وردپرس ) و یک اندازه است.

سایز جدید پهنای ۳۰۰, ۶۰۰, ۱۲۰۰ ، ۲۴۰۰ دارد . همچنین برای این تابع تعیین ارتفاع  و یا برش مقدور است ، اما در مثال بالا ما نسبت ابعاد تصویر را حفظ کردیم.

 
مثال بالا تنها نشان میدهد چهار اندازه تصویر جدید اضافه شده ، اما شما ممکن است بخواهید اندازه های بیشتر یا کمتری اضافه کنید .

این وابسته به طراحی تم شماست. در حال حاضر هر زمان یک تصویر به وردپرس آپلود می شود،

وردپرس آن را در اندازه جدید تولید میکند . گام بعدی افزودن آنها به 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/۲۰۱۵/۰۵/img۱.jpg" alt="App Screenshot">

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

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

<img class="aligncenter wp-image–۱۳۷ size-full" src="http://somedomain.co.uk/۲/wp-content/uploads/۲۰۱۵/۰۵/onavo.jpg" srcset="http://somedomain.co.uk/۲/wp-content/uploads/۲۰۱۵/۰۵/onavo–۱۶۹x۳۰۰.jpg ۱۶۹w, http://somedomain.co.uk/۲/wp-content/uploads/۲۰۱۵/۰۵/onavo–۵۷۶x۱۰۲۴.jpg ۵۷۶w, http://somedomain.co.uk/۲/wp-content/uploads/۲۰۱۵/۰۵/onavo–۳۰۰x۵۳۴.jpg ۳۰۰w, http://localhost/SebastianGreen/۲۰۱۵/wp_dev/wp-content/uploads/۲۰۱۵/۰۵/onavo–۶۰۰x۱۰۶۷.jpg ۶۰۰w, http://somedomain.co.uk/۲/wp-content/uploads/۲۰۱۵/۰۵/onavo.jpg ۶۰۰w" alt="onavo" width="۶۰۰" height="۱۰۶۷" sizes="(max-width: ۶۰۰px) ۱۰۰vw, ۶۰۰px">

 تمام اندازه تصویر جدید از طریق ویژگی srcset اضافه شده است.

این پلاگین همچنین شامل Picturefill.js است که یک تصویر ریسپانسیو برای هر دو عنصر تصویر و ویژگی های ریسپانسیو جدید برای عنصر IMG اضافه می کند.

این ویژگی در کنار ویژگی srcset در حال حاضر در تگ تصویر باعث ریسپانسیو شدن تصاویر شما میشوند.

ریسپانسیو عکس‌ های وردپرس

تصاویر شما حالا ریسپانسیو شدند !

حال تصاویر بر روی وب سایت شما ریسپانسیو خواهند بود – مرورگر خود مناسب ترین تصویر را انتخاب و دانلود می کند.

کاربران در دستگاه های با صفحه نمایش کوچکتر تصاویر کوچکتر دریافت خواهند کرد.

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

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

تنها یک مشکل بالقوه با این روش وجود دارد:

سایزهای ایجاد شده تنها با تصاویر که  پس از نصب RICG Responsive Images پلاگین به وردپرس آپلود شده است کار خواهد کرد.

اگر یک وب سایت با نام تجاری جدید که شما در حال کار بر روی آن هستید دارید ، مشکلی نیست،

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

خوشبختانه، شما لازم نیست دوباره تمام تصاویر را اضافه کنید – یک پلاگین موجود است که می تواند کمک کند.

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

ریسپانسیو عکس‌ های وردپرس

پلاگین Regenerate Thumbnails تمام فایلهای عکس پیوست موجود در سایت شما را یافته

و به تولید دوباره اندازه تصویر جدید بر اساس آن چه در functions.php جدید قرار دارد اقدام میکند –

این بهینه سازی واقعی است و تنها نیاز به کلیک یک دکمه دارد .

پس از نصب، به Tools -> Regen .Thumbnails بروید سپس “ایجاد مجدد تمام عکسها” را کلیک کنید.

نوار وضعیت ظاهر خواهد شده و شما اطلاعاتی درباره تعداد تصاویری که تغییر اندازه داده شده مشاهده می کنید.

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




برچسب ها:



شما اولین دیدگاه را بنویسید!