Вопрос или проблема
Я пытаюсь показать миниатюру записи с помощью функции the_post_thumbnail(), но функция автоматически устанавливает размер изображения в инлайн CSS, из-за чего мой CSS не работает должным образом.
the_post_thumbnail() позволяет вам установить размер изображения, которое вы хотите использовать, по умолчанию это миниатюра, но вы можете переопределить его, используя любой из определенных размеров или пользовательский размер, например:
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');
the_post_thumbnail( array(980, 450) );
Изображения, создаваемые WP, используют srcset для указания размеров изображения в зависимости от ширины устройства; вы можете отключить это, используя этот ответ.
Тема twentytwentyone раздражающе добавляет эти инлайн стили к изображениям.
Я сделал следующее, чтобы избежать проблемы:
function remove_inline_style_from_image( $attr ) {
unset( $attr['style'] );
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image', 10, 1 );
$thumbnail = get_the_post_thumbnail( $id );
remove_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image' );
Если вы хотите удалить инлайн стиль из всех последующих изображений, просто уберите строку remove_filter в конце.
Ответ или решение
Проблема с отображением миниатюр постов в WordPress с помощью функции the_post_thumbnail() часто связана с некорректной настройкой размеров и добавлением встроенного CSS, что может повлиять на вашу собственную стилизацию. В данном ответе мы рассмотрим ключевые аспекты, как правильно настроить отображение миниатюры, и предложим решения.
Понимание the_post_thumbnail()
Функция the_post_thumbnail() предоставляет возможность отобразить миниатюру поста заданного размера. По умолчанию используется размер «миниатюра», однако вы можете легко изменить это, указав другие размеры, такие как:
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');
the_post_thumbnail( array(980, 450) );Проблема с встроенными стилями
В некоторых темах, таких как TwentyTwentyOne, для изображений могут автоматически добавляться встроенные стили, что затрудняет индивидуальную настройку стилей через CSS. Это происходит из-за того, что WordPress включает свойства стилей непосредственно в атрибуты HTML, что может перекрывать ваши определения в CSS.
Решения проблемы
Одним из наиболее эффективных решений данной проблемы является использование фильтра, чтобы убрать встроенные стили из атрибутов изображения. Это можно сделать следующим образом:
function remove_inline_style_from_image( $attr ) {
unset( $attr['style'] );
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image', 10, 1 );
$thumbnail = get_the_post_thumbnail( $id );
// Если хотите, чтобы изменения стали глобальными, можете убрать строку с remove_filter:
remove_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image' );Советы по улучшению
-
Использование
srcset: Для оптимизации отображения изображений на разных устройствах WordPress автоматически генерирует атрибутsrcset. Это удобно, но может приводить к путанице. Если вам не нужно это функционал, вы можете отключить его, следуя рекомендациям данного ответа. -
Тестирование изменений: После внесения изменений в код обязательно протестируйте отображение изображений на разных устройствах и браузерах, чтобы убедиться, что всё работает корректно.
-
Сохранение кода: При использовании кода фильтра не забудьте сохранить его в файле
functions.phpвашей темы или в пользовательском плагине, если вы хотите избежать изменений в ядре WordPress.
Завершение
Знание особенностей работы с миниатюрами в WordPress и использование предложенных методов поможет вам избежать проблем с отображением изображений. Правильное управление стилями и атрибутами изображений обеспечит их корректное отображение и стилизацию на вашем сайте. Если вам нужно более детальное объяснение или у вас есть другие вопросы, не hesitate to ask.