Устранение проблемы обтекания изображений текстом в записях WordPress

Устранение проблемы обтекания изображений текстом в записях WordPress

Устранение проблемы обтекания изображений текстом в записях WordPress
5 (100%) 1 vote

Проблема, о которой я сегодня хочу рассказать, по сути не является проблемой глобальной и встречается крайне редко, поэтому назвать ее можно неким недоразумением, встречающимися на пути у пользователей 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: 18 комментариев

  1. а как исправить такой случай – вставляешь в пост картинку по центру, публикуешь, а она на странице к левому боку липнет?

    1. Сергей, посмотрите в файле стилей все, что касается выравнивания изображений. возможно, нужно будет видоизменить класс на img.aligncenter {margin-left:auto; margin-right:auto; display:block}, либо внесите изменения в класс записи все, что касается изображений.

  2. а как быть если и в визуальном редакторе текст не обтекает картинку???
    Беда прям какая то =(

  3. Не может быть, чтобы текст не обтекал картинку в визуальном редакторе. Возможно, вы просто не задали в нем выравнивание картинки по левому или по правому краю.

  4. Может!
    Более того: я сделал пару десятков сайтов на заказ в течение последнего года,и сейчас, дабы проверить – что это за гадость – полез на сайты к своим прошлым клиентам.
    И ни сколько не удивился,что у всех почти – именно такая проблема.
    Могу записать коротенькое видео и выложить,чтоб вы поняли о чем я.

  5. ОПа.
    Появились новые подробности.
    Нашел у себя на компе на денвере сайт, у которого та же болезнь-в редакторе какие бы танцы-бубны ни делал – обтекания нет.
    Но на сайте этом – присутствует пост,в котором есть и картинка и обтекание её текстом. Я зашел в редактор этого поста, и скопировал содержимое вкладки HTML.
    Далее “добавить новый пост”, HTML —> Ctrl+V —> “Визуально” – иии… всё окей. Старый пост,зато с обтеканием. Скопирован и пост,и все его свойства.
    Уж как я не ковырял этот копированный код – не понимаю в чем дело!!! Обтекание текста в этом посте пропадает тогда,-когда я стираю старый обтекающий текст и пишу вместо него,либо когда печатаю после этого текста. А код можно менять как заблагорассудится.
    Как будто бы – есть ещё какие то свойства или стили,которые не отображаются на вкладке html,но зато могут копироваться…

    1. Отсутствие обтекания изображения в визуальном редакторе – это полностью проблема самого движка wordpress, рекомендую вам обновить его до последней версии, либо переустановить.

      1. Может и в движке проблема – но версия топовая, и переустановка не помогает.
        Но всё равно, спасибо за советы.
        Если наткнетесь когда либо на ответ – напишите о нем в этой ветке

  6. А можно поконкретнее куда вставлять эти строчки? Сижу сейчас в редакторе, с списке стилей, не могу врубиться. Методом тыка вставляю и всё неверно. Явно не туда вставляю 🙂

  7. В самом конце кода вставила. Получилось! И почему с первого раза не получалось, вимо перемудрила и слишком в коде перековырялась.

    Вы просто чудо! Спасибо!!!!!!!!

  8. Урааа!!! Спасибо, эх, и намучилась с этим обтеканием, а всё так просто. Вставить строчки нужно, действительно в самом конце кода и, всё работает!!!

  9. Ох и ах… Двое суток искал, в чем проблема – ваш совет помог. Принципиально не оставляю ссылки, не за тем пришел)

  10. Помогите, пожалуйста, новичку! У меня вот такой код в 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;
    }
    Но при вставке кода из статьи, как раз и получается разрыв текста в старых записях. Что нужно ввести с учетом всех фигурных скобок? Спасибо!

  11. Тут всё такие старинные записи, может и вопросник уже заброшен…
    Обтекание обтеканию рознь. А у меня комбинированная статья, где вперемешку текст, картинки, пояснения, пробелы… Редактор не справляется. Статья из Ворда грузится без картинок. Картинки сопротивляются и лепятся, куда хотят, налезая друг на друга. Пояснения к ним уходят от них подальше. Даже выстроить картинки столбиком с пояснениями справа не удаётся. Хотя есть некая функция “Галерея”. Кстати, что это?
    Буду признателен за подсказку по указанному эл. адресу.
    Альфред.

  12. спасибо, пост помог разобраться с картинками. у вас самый дельный совет и мусорного кода нет как на других блогах советуют.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *