При создании адаптивной темы для WordPress нужно сделать так, чтобы все изображения, которые пользователь будет добавлять в записи или на страницы, тоже были адаптивными. В этом посте я привожу небольшой код, который поможет добавить к изображениям в WordPress собственный класс, и сделать изображения адаптивными.
Сначала создадим в файле стилей класс .img-responsive:
|
1 2 3 4 5 |
.img-responsive { display: block; height: auto; max-width: 100%; } |
Затем в файл functions.php добавим код, который добавит новый класс к изображениям:
|
1 2 3 4 5 6 7 8 9 |
// images auto class function add_image_responsive_class($content) { global $post; $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i"; $replacement = '<img$1class="$2 img-responsive"$3>'; $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'add_image_responsive_class'); |
После этого ко всем изображениям, которые были добавлены в блог раньше, и тем, которые будут загружены в будущем, добавится класс img-responsive, и изображения станут адаптивными.
Кстати, точно также можно добавить к изображениям любой другой собственный класс.