Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62.

در حالی که پذیرش رو به رشد تصاویر پاسخگو را نمی توان نادیده گرفت، استفاده از عملکرد تحت محدودیت های یک CMS بزرگ مانند وردپرس می تواند بسیار دشوار باشد. در حالی که طراحی این ویژگی در تم خود کاملاً امکان پذیر است، انجام این کار کاری دشوار و وقت گیر است.

خوشبختانه با راه اندازی وردپرس 4.4 ، توسعه دهندگان قالب و پلاگین این فرصت را خواهند داشت که از تصاویر پاسخگو در محصولات خود استفاده کنند. از زمان شروع این نسخه ، پلاگین "Responsive Images RICG" در هسته وردپرس ادغام شده است ، به این معنی که پشتیبانی از عکس پاسخ دهنده اکنون به عنوان یک ویژگی پیش فرض داخلی وردپرس است. بیایید نگاهی به نحوه کار آن بیندازیم و اینکه چگونه می توانید با استفاده از آن سایت از وردپرس خود بهترین بهره را ببرید.

پاسخگو تصویر-TRAC وردپرس

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

به محض ارتقا به وردپرس 4.4 ، تمام مطالب و تصاویر شما دارای "srcset" و " اندازه فیلترها برای اطمینان از وجود هر اندازه تصویر موجود ، با حفظ اندازه تصویر درخواست شده اصلی ، فیلتر می شوند. توجه به این نکته مهم است که تغییر اندازه های سفارشی از "" چشم پوشی می شود srcset »اگر نسبت تصویر با تصویر اصلی درخواست شده متفاوت باشد. علاوه بر این ، با فراخوانی یک تصویر از طریق تابع " فایل wp-از-پیوست تصویر این یک تصویر پاسخگو نیز بر می گرداند.

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

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

در حالی که وردپرس یک کار استثنایی انجام می دهد و تمام اندازه های موجود را در این صفت قرار می دهد " srcset "، پیش بینی ویژگی" اندازه ها "کمی دشوارتر است. در واقع ، صفت " اندازه مسئول گفتن نحوه مرورگر با توجه به ابعاد موجود در پنجره به مرورگر است. از آنجا که اطلاعات بسته به سبک تم کاربر متفاوت خواهد بود ، بهترین کاری که می توانیم انجام دهیم ارائه پیش فرض منطقی به شرح زیر است:

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد ایجاد کنید به راحتی و رایگان هر طراحی وب سایت یا وبلاگ با ظاهری حرفه ای. از پرداخت هزینه زیاد برای وب سایتی که خودتان می توانید انجام دهید خودداری کنید.

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

این ویژگی پیش فرض " اندازه دو کار انجام می دهد اول ، اطمینان حاصل می کند که یک صفت معتبر " اندازه در تصویر وجود دارد ، که به تازگی با توجه به مشخصات یکی از الزامات اجباری است. دوم ، اطمینان حاصل می کند که مرورگر منبع تصویری بزرگتر از عرض درخواست شده اصلی ارائه نمی دهد. در صورت دستکاری CSS ، اندازه تصویر بسته به عرض پنجره ها متفاوت خواهد بود ، از طرف دیگر مقدار پیش فرض " اندازه کمتر مفید خواهد بود.

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

در اینجا توجه به این نکته مهم است که ، در صورت امکان ، موضوع شما نباید به مقدار پیش فرض "" متکی باشد اندازه"برای ارائه اطلاعات دقیق در مورد پشتیبانی از عکس پاسخگو." در واقع ، ویژگی پیش فرض " اندازه »وقتی پنجره از اندازه اصلی تصویر درخواست شده کوچکتر است ، به مرورگر اجازه نمی دهد منبع تصویر را تغییر دهد. همچنین اگر تصویر در یک نقطه شکست با CSS ویرایش شود ، وقتی تصویر ممکن است بزرگتر از اندازه اصلی باشد ، همچنین نمی تواند منبع را تغییر دهد.

اگر شما یک توسعه دهنده طرح زمینه هستید یا به یک کد پایه وردپرس دسترسی دارید ، تصاویر را در مضمون خود فیلتر کنید تا با ویژگی صحیح دقت کنید " اندازه یکی از مهمترین کارهایی است که می توانید انجام دهید بعد از اینکه نسخه جدید به زودی ارائه می شود. در زیر مثالی از قلاب در " 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 );

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

بهترین ابزارها را برای وب سایت خود کشف کنید

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

کد منبع، فایل wp-تصویر-پاسخگو

توابع جدید برای ویژگی اضافه شده است " srcset "و" اندازه علاوه بر تصاویر اضافه شده برای نمایش محتوا ، می توانید به تصویری که از طریق Media Manager به WordPress اضافه شده است ، اضافه کنید. عملکرد wp_get_attachment_image_sizes یک ویژگی پیش فرض را برمی گرداند " اندازه که می تواند با فیلتر موضوع شما در پرونده اصلاح شود " functions.php ". عملکرد wp_get_attachment_image_srcset یک ویژگی را برمی گرداند srcset »که شامل تمام اندازه های موجود تصویر درخواست شده است. مستندات و نمونه هایی از نحوه استفاده از این توابع جدید را می توان یافت فهرست مرجع توسعه دهندگان.

پیکربندی تصاویر پاسخگو برای موضوع شما

با ویژگی های جدید ، چندین براکت جدید ارائه شده است که می توانند برای ارائه سطح جدیدی از پشتیبانی از تصاویر پاسخگو ، که به بهترین وجه متناسب با موضوع شما است ، ارائه شوند. قلاب max_srcset_image_width "به توسعه دهنده تم اجازه می دهد حداکثر عرض تصویر را که در آن قرار دارد فیلتر کند" srcset ". قلاب wp_calculate_image_srcset »ویژگی ها را فیلتر می کند« srcset »تصاویر ، در حالی که قلاب (فیلتر)« wp_calculate_image_sizes "به توسعه دهنده قالب اجازه می دهد تا سفارشی کند" اندازه برای تطابق بهتر نقاط تقسیم تصویر در طرح زمینه آنها.

اگر به دنبال مثالی برای فیلتر کردن بهترین ویژگی هستید " اندازه از یک تصویر ، موضوع جدید twentysixteen یک نمونه عالی خواهد بود. در پرونده functions.php این موضوع ، دو عملکرد آخر ویژگی را فیلتر می کنند " اندازه برای پاسخگویی به نقاط تقسیم تصویر مختلف در موضوع.

فیلترهای عکس واکنشگرا آموزش وردپرس#

بیش از 11 میلیون ابزار برای دانلود

Envato Elements بهترین منابع را برای ایجاد و توسعه تمام جنبه های وب سایت شما ارائه می دهد. میلیون ها قالب وردپرس، گرافیک، منابع صوتی و موارد دیگر را خواهید یافت. ایده آل برای مبتدیان.

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

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

 

%d وبنوشتنویس این را دوست صفحه: