
Устранение проблемы обтекания изображений текстом в записях WordPress
Проблема, о которой я сегодня хочу рассказать, по сути не является проблемой глобальной и встречается крайне редко, поэтому назвать ее можно неким недоразумением, встречающимися на пути у пользователей WordPress. Однако и это недоразумение может стать головной болью для тех, кто надеется на то, что WordPress все решит за вас, а если не решит, значит он плохой или в нем что-то не так. Такие мысли посетили меня в тот момент, когда я еще только начинал изучать WordPress и сделал для него свой первый шаблон. При выравнивании изображения в записи по правому или по левому краю у меня не происходило обтекания изображения текстом. Текст упорно пытался располагался сразу же после изображения и обтекать его не стремился.
Ниже привожу пример такого поведения теста и изображения:
“Как же так” – думал я – “Почему в визуальном редакторе при написании записи обтекание изображения текстом происходит, а на выходе на сайте его нет?”. Ответ, довольно-таки, прост: WordPress знает об обтекание и хочет, чтобы оно происходило, вот только об этом не знает сам шаблон, который установлен, потому что об этом ему никто не “сказал”. Почему я назвал этот нюанс недоразумением, а не проблемой? Дело в том, что шаблонов, которые грешат такой явной недоработкой, я за свою практику встретил максимум два и было это очень давно. Да и начинающие веб-мастера могут допустить такую оплошность на первых этапах создания шаблонов для WordPress.
Чтобы, все-таки, задать обтекание изображению текстом и привести запись в удобочитаемый вид, нужно в стилях шаблона WordPress задать свойства, которые заставят текст обтекать изображение. Для этого внесите ниже приведенные строчки в файл style.css вашего шаблона:
.alignleft {float:left;} .alignright {float:right;} .aligncenter {margin-left:auto; margin-right:auto; display:block}
Как вы поняли, эти строки позволяют обтекать изображение текстом при его выравнивании по левому краю, по правому краю и по центру соответственно. Можно немного модифицировать эти строки и добавить небольшой отступ текста от изображения, чтобы он к нему не “прилипал”
.alignleft {float:left; margin-right:10px;} .alignright {float:right; margin-left:10px;} .aligncenter {margin-left:auto; margin-right:auto; display:block}
Кстати, свойство display:block добавлено в класс выравнивания изображения по середине не случайно. Если ваше изображение по ширине будет меньше колонки основного контента, то текст будет пытаться обтекать его с правой или левой стороны, а данное свойство позволит исключить это.
Устранение проблемы обтекания изображений текстом в записях WordPress: 19 комментариев
а как исправить такой случай – вставляешь в пост картинку по центру, публикуешь, а она на странице к левому боку липнет?
Сергей, посмотрите в файле стилей все, что касается выравнивания изображений. возможно, нужно будет видоизменить класс на img.aligncenter {margin-left:auto; margin-right:auto; display:block}, либо внесите изменения в класс записи все, что касается изображений.
а как быть если и в визуальном редакторе текст не обтекает картинку???
Беда прям какая то =(
Не может быть, чтобы текст не обтекал картинку в визуальном редакторе. Возможно, вы просто не задали в нем выравнивание картинки по левому или по правому краю.
Может!
Более того: я сделал пару десятков сайтов на заказ в течение последнего года,и сейчас, дабы проверить – что это за гадость – полез на сайты к своим прошлым клиентам.
И ни сколько не удивился,что у всех почти – именно такая проблема.
Могу записать коротенькое видео и выложить,чтоб вы поняли о чем я.
ОПа.
Появились новые подробности.
Нашел у себя на компе на денвере сайт, у которого та же болезнь-в редакторе какие бы танцы-бубны ни делал – обтекания нет.
Но на сайте этом – присутствует пост,в котором есть и картинка и обтекание её текстом. Я зашел в редактор этого поста, и скопировал содержимое вкладки HTML.
Далее “добавить новый пост”, HTML —> Ctrl+V —> “Визуально” – иии… всё окей. Старый пост,зато с обтеканием. Скопирован и пост,и все его свойства.
Уж как я не ковырял этот копированный код – не понимаю в чем дело!!! Обтекание текста в этом посте пропадает тогда,-когда я стираю старый обтекающий текст и пишу вместо него,либо когда печатаю после этого текста. А код можно менять как заблагорассудится.
Как будто бы – есть ещё какие то свойства или стили,которые не отображаются на вкладке html,но зато могут копироваться…
Отсутствие обтекания изображения в визуальном редакторе – это полностью проблема самого движка wordpress, рекомендую вам обновить его до последней версии, либо переустановить.
Может и в движке проблема – но версия топовая, и переустановка не помогает.
Но всё равно, спасибо за советы.
Если наткнетесь когда либо на ответ – напишите о нем в этой ветке
Спасибо!!!) все четко работает, не думал что это так просто решаемо.
А можно поконкретнее куда вставлять эти строчки? Сижу сейчас в редакторе, с списке стилей, не могу врубиться. Методом тыка вставляю и всё неверно. Явно не туда вставляю 🙂
В любое место в файл стилей вашего шаблона.
В самом конце кода вставила. Получилось! И почему с первого раза не получалось, вимо перемудрила и слишком в коде перековырялась.
Вы просто чудо! Спасибо!!!!!!!!
Огроменное спасибо. Всё работает как надо.
Урааа!!! Спасибо, эх, и намучилась с этим обтеканием, а всё так просто. Вставить строчки нужно, действительно в самом конце кода и, всё работает!!!
Ох и ах… Двое суток искал, в чем проблема – ваш совет помог. Принципиально не оставляю ссылки, не за тем пришел)
Помогите, пожалуйста, новичку! У меня вот такой код в CSS и картинки всё время липнут слева
.postBody blockquote p {
margin:0;
padding:10px;
}
.postBody img, p img {
float:left;
margin:0 10px 10px 0;
border:1px solid #e5e5e5;
}
.postBody p a {
color:#0099cc;
}
Как понял, вставлять нужно сюда .postBody img, p img
вместо {
float:left;
margin:0 10px 10px 0;
border:1px solid #e5e5e5;
}
Но при вставке кода из статьи, как раз и получается разрыв текста в старых записях. Что нужно ввести с учетом всех фигурных скобок? Спасибо!
Тут всё такие старинные записи, может и вопросник уже заброшен…
Обтекание обтеканию рознь. А у меня комбинированная статья, где вперемешку текст, картинки, пояснения, пробелы… Редактор не справляется. Статья из Ворда грузится без картинок. Картинки сопротивляются и лепятся, куда хотят, налезая друг на друга. Пояснения к ним уходят от них подальше. Даже выстроить картинки столбиком с пояснениями справа не удаётся. Хотя есть некая функция “Галерея”. Кстати, что это?
Буду признателен за подсказку по указанному эл. адресу.
Альфред.
спасибо, пост помог разобраться с картинками. у вас самый дельный совет и мусорного кода нет как на других блогах советуют.
Спасибо за статью! Информация помогла. Столько лет работаю с wordpress и впервые встретился, что текст не обтекает картинку.