Вопрос или проблема
Я пытаюсь реализовать ленивую загрузку страницы изображений в WordPress – я пробовал плагины, но ни один из них не работает (я хочу делать ленивую загрузку изображений только на некоторых страницах).
Теперь я пытаюсь сделать это с помощью плагина – http://www.appelsiini.net/projects/lazyload
Этот плагин требует указания ширины и высоты изображения в теге img.
<img data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”>
Я добавляю изображения из пользовательских полей, как
<img src="https://wordpress.stackexchange.com/questions/97023/<?php echo get_post_meta($post->ID,"img1', true); ?>">
Можно ли получить ширину и высоту изображений из get_post_meta?
Я смотрел на wp_get_attachment_image_src, но не могу понять, как использовать его с get_post_meta.
Похоже, у вас сохранен URL изображения как пользовательское поле, а не ID вложения, так что сначала получите ID вложения, используя URL с помощью замечательной функции Филипа, а затем используйте
wp_get_attachment_image_src(), чтобы получить атрибуты вложения:
$attch_id = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img1', true));
$image_attributes = wp_get_attachment_image_src( $attch_id ); // возвращает массив
//$image_attributes содержит
$image_attributes[0] => URL
$image_attributes[1] => ширина
$image_attributes[2] => высота
Ответ или решение
Для того чтобы реализовать ленивую загрузку изображений на страницах вашего сайта на WordPress, вам потребуется извлечь размеры изображений таким образом, чтобы они соответствовали требованиям плагина, который вы используете. В данном случае, речь идёт о необходимости указания ширины и высоты изображения в теге <img>.
Шаги для получения ширины и высоты изображения:
-
Получите ID вложения: Поскольку у вас изображения хранятся в пользовательских полях (custom fields) как URL, вам необходимо сначала получить ID вложения (attachment ID) из этого URL. Для этого вы можете использовать функцию, описанную в статье Филиппа Ньюкомера.
Пример функции:
function pn_get_attachment_id_from_url($url) { global $wpdb; $id = str_replace(‘https://yourdomain.com/wp-content/uploads/’, ‘’, $url); $id = str_replace(‘.jpg’, ‘’, $id); return $id; } -
Извлеките размер изображения: После того как вы получили ID вложения, вы сможете вызвать функцию
wp_get_attachment_image_src(), чтобы получить необходимую информацию о изображении, включая его ширину и высоту.Пример кода:
$image_url = get_post_meta($post->ID, 'img1', true); $attch_id = pn_get_attachment_id_from_url($image_url); $image_attributes = wp_get_attachment_image_src($attch_id); // возвращает массив // Теперь вы можете использовать полученные размеры $image_src = $image_attributes[0]; // URL изображения $image_width = $image_attributes[1]; // Ширина $image_height = $image_attributes[2]; // Высота -
Вывод изображения с атрибутами для ленивой загрузки: Теперь, когда у вас есть URL, ширина и высота изображения, вы можете вывести его в нужном формате для ленивой загрузки:
Пример разметки:
<img data-original="<?php echo esc_url($image_src); ?>" src="img/grey.gif" width="<?php echo esc_attr($image_width); ?>" height="<?php echo esc_attr($image_height); ?>" class="lazyload">
Рекомендации по SEO и производительности:
-
Используйте атрибуты alt: Не забудьте добавить атрибут alt к изображениям, чтобы улучшить доступность и SEO. Это поможет поисковым системам и пользователям лучше понять содержание изображения.
-
Минимизируйте размеры изображений: Оптимизируйте изображения для веба, чтобы уменьшить время загрузки страницы. Используйте плагины для сжатия изображений, такие как Smush или ShortPixel.
-
Тестируйте производительность: Проводите тестирование скорости загрузки страниц, используя инструменты, такие как Google PageSpeed Insights, чтобы оценить, как ленивое поведение загрузки повлияет на общую производительность вашего сайта.
Следуйте вышеуказанным шагам, чтобы успешно внедрить ленивую загрузку изображений на страницах вашего WordPress-сайта, соответствуя требованиям плагина и улучшая пользовательский опыт.