Ноя
11

Устранение проблемы обтекания изображений текстом в записях 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 добавлено в класс выравнивания изображения по середине не случайно. Если ваше изображение по ширине будет меньше колонки основного контента, то текст будет пытаться обтекать его с правой или левой стороны, а данное свойство позволит исключить это.

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

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

  • Нет аватара
    Сергей 12.11.2011 в 16:38

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 12.11.2011 в 17:17

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Вячеслав 23.02.2012 в 17:00

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 23.02.2012 в 17:03

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
      • Нет аватара
        Вячеслав 23.02.2012 в 21:21

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

        VA:F [1.9.16_1159]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.16_1159]
        Rating: 0 (from 0 votes)
      • Нет аватара
        Вячеслав 23.02.2012 в 21:33

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

        VA:F [1.9.16_1159]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.16_1159]
        Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 23.02.2012 в 21:24

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Вячеслав 23.02.2012 в 21:34

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

      VA:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    zakir 11.04.2012 в 18:49

    Спасибо!!!) все четко работает, не думал что это так просто решаемо.

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Олекси 23.05.2012 в 15:11

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 23.05.2012 в 15:47

      В любое место в файл стилей вашего шаблона.

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Олекси 23.05.2012 в 17:01

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

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Дмитрий 04.11.2012 в 12:34

    Огроменное спасибо. Всё работает как надо.

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Елена 29.01.2013 в 16:42

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Намик 03.03.2013 в 17:57

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Вадим 26.03.2013 в 14:23

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Альфред 05.08.2013 в 18:23

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Яков 26.10.2013 в 10:29

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта