آخرین بازبینی: ۱۴۰۲/۱۲/۰۷

اضافه کردن Lazy Loading به تصاویر وردپرس بدون افزونه

توجه: اکنون در نسخه‌های جدید وردپرس این قابلیت به صورت پیش‌فرض در تمام سایت‌ها فعال است و نیازی به استفاده از کدهای سفارشی برای دستیابی به مزایای Lazy Loading تصاویر وجود ندارد.

مرورگرهای جدید به صورت پیش‌فرض قابلیت Lazy Loading یا بارگزاری دیرهنگام را برای تصاویر و iframeها در دسترس طراحان سایت قرار داده‌اند. برای اینکه قابلیت Lazy Loading را به تمام تصاویر موجود در نوشته‌ها و برگه‌های سایت وردپرس خودتان اضافه کنید، می‌توانید قطعه کد زیر را در فایل functions.php قالب سایت درج نمایید.

این کد تغییری روی عملکردهای وردپرس انجام می‌دهد و صرفا هنگام نمایش، صفت loading=lazy را به تصاویری که فاقد ویژگی loading باشند، اضافه می‌کند.

add_filter( 'the_content', 'roka_lazy_load_images' );
function roka_lazy_load_images( $content ) {

	if ( is_singular() && in_the_loop() && is_main_query() ) {
		$content = preg_replace_callback( '/<img[^>]+>/', function( $matches ) {

			if( false === strpos( $matches[ 0 ], 'loading=' ) ) {
				$matches[ 0 ] = str_replace( '<img', '<img loading="lazy"', $matches[ 0 ] );
			}

			return $matches[ 0 ];

		}, $content );
	}

	return $content;
}

add_filter( 'the_content', 'roka_lazy_load_images' );

function roka_lazy_load_images( $content ) {

if ( is_singular() && in_the_loop() && is_main_query() ) {

$content = preg_replace_callback( '/<img[^>]+>/', function( $matches ) {

if( false === strpos( $matches[ 0 ], 'loading=' ) ) {

$matches[ 0 ] = str_replace( '<img', '<img loading="lazy"', $matches[ 0 ] );

}

return $matches[ 0 ];

}, $content );

}

return $content;

}

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

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

add_filter( 'the_content', 'roka_lazy_load_images', 9999 );

1	add_filter( 'the_content', 'roka_lazy_load_images', 9999 );

اضافه کردن Lazy Loading به تصاویر وردپرس بدون افزونه

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ