4.8. Текст не обтекает картинку в WordPress


Во многих темах (шаблонах) WordPress при вставке картинки текст не хочет ее обтекать. Вы вставляете картинку, задаете обтекание текстом справа, смотрите в визуальном редакторе – все отлично, но при переходе на сайт видите, что текст просто разорвался, в разрыв вставлена картинка и никакого обтекания нет и в помине.

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

Поэтому я перескажу содержание статьи, сопровождая их своими комментариями для новичков.

Итак, проблема такая действительно существует. Корень ее в том, что в шаблонах не прописаны  нужные стили в файле CSS.

Вставляем картинку небольшого размера в нашу заметку и указываем выравнивание слева. Другими словами, картинка будет прижата к левому краю страницы, а текст будет располагаться справа от нее.

Кратко напомню порядок Ваших действий (подробно это изложено в уроке «Вставляем картинку в текст»). Заходите в Панель администрирования, открываете «Записи», выбираете «Редактировать», наводите курсор на название статьи и выбираете «Редактировать».

Открывается визуальный редактор с выбранной статьей. Нажимаете на кнопку «Добавить картинку», в открывшемся окне нажимаете «Обзор» и в своей папке с картинками выбираете нужную. Кликаете по ней, в окне «Добавить медиафайлы с вашего компьютера» жмете кнопку «Загрузить файл».

В новом окне устанавливаете выравнивание слева (там еще есть маленькая картинка, где именно будет располагаться Ваша картинка, так что не ошибетесь). При желании – изменяете размер изображения и щелкаете по кнопке «Вставить запись».

Снова открывается редактор и Вы видите, что картинка вставилась именно так, как Вы и хотели, т.е. в левой части страницы. Соответственно, текст ее обтекает справа:

Теперь в разделе «Опубликовать» нажимаем «Обновить». И, нажав «Просмотр сайта», смотрим, что у нас получилось:

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

Для устранения этого, надо вот этот кусок кода вставить в нужное место:

/-- начало вставки кода для обтекания картинок текстом--/
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
margin-right: 5px;
}
.alignright {
float: right;
margin-left: 5px;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
— moz-border-radius: 3px;
— khtml-border-radius: 3px;
— webkit-border-radius: 3px;
border-radius: 3px;
}
trong>margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/-- конец вставки кода для обтекания картинок текстом--/

Примечания – начало вставки кода и конец вставки кода – я написал специально для тех, у кого другой шаблон и коды CSS прописаны по-другому. Им необходимо искать место для вставки путем «научного тыка»: попробовал здесь – посмотрел, что получилось, попробовал там и т.д.

Открываем наш любимый Total Commander, ищем наш шаблон: диск W (тот, где Денвер) --> Home --> имя вашего сайта --> www --> wp-content --> Themes --> название вашего шаблона. Открываете его и один раз (!) щелкаете по файлу Style.css.

После этого кликаете по кнопке «F4 Правка» или нажимаете на клавиатуре F4 и открывается Ваш блокнот NotePad++:

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

Вы уже изучаете (я в этом просто уверен) HTML и CSS и знаете, что в коде картинки обозначаются тремя буквами img (от image – изображение, картинка). Значит, нам надо в нашем файле Style.css искать эти три буквы. Вызываем «Найти». Для этого необходимо нажать на горячие клавиши «Ctrl»+«F», как в Word:

В окне поиска пишем «img» и жмем «Найти далее». Поиск показывает первый результат. Поскольку мы не знаем, является ли это место нужным или нет, попробуем вставить наш код сюда (начало метода «научного тыка»):

Копируйте в этой статье код. Кликаете по строчке 44, выбираете «Вставить» и …

… И наш код вставился. Но это еще не все. В левом верхнем углу блокнота кликаете «Файл» (File), выбираете «Сохранить» (Save).

Теперь надо открыть главную страницу сайта и нажать кнопку «Обновить» (или на клавиатуре нажать F5):

Чего мы и добивались.

Теперь необходимо изучить весь шаблон: не изменилось ли там чего:

М-да, наш шаблон настолько перекосило, что впору говорить о новом шаблоне. Надо срочно все исправлять. Опять заходим в наш блокнот для редактирования. Устанавливаем курсор на нашу метку  «Начало вставки кода для обтекания картинок текстом» (строка 44) и ведем курсор вниз до метки «Конец вставки кода…». Фон текста становится серым.

Кликаем по выделенной области правой кнопкой мыши и выбираем «Вырезать».

Опять вызываем функцию «Найти» («Ctrl»+«F») и нажимаем кнопку «Найти далее». Поиск находит новую строчку с буквами «img»:

Устанавливаем курсор на строчку 369 и два раза нажимаем «Enter» для того, чтобы немного подготовить место для нашей вставки. Должно получиться свободное место (строчки 370, 371), как на скриншоте. После этого кликаем правой кнопкой мыши по строчке 370 и выбираем «Вставить».

Наш кусочек кода вставился на новое место. Опять сохраняем изменения («Файл» --> «Сохранить») и смотрим на сайте, что у нас получилось на этот раз. Нажимаем кнопку «Обновить» и…

…и УРА! – Наш сайт приобрел первоначальный вид. А что с картинкой? Смотрим ниже:

Теперь наше «УРА» уже должно быть протяжным. Можно даже троекратным: и внешний вид сайта не изменился, и текст обтекает картинку.

Кстати говоря, мы могли все это сделать гораздо быстрее, если бы знали HTML и CSS. Ведь тогда мы могли бы сразу определить, что запись «.postContent img» относится к выводу картинок в статьях и не корежить напрасно наш шаблон.

И потом, у нас в шаблоне только две записи включают в себя тэг img, а если бы их было намного больше? Сколько работы нам прибавилось бы тогда. А если бы мы еще и не знали, что картинка = img?

Так что, учите языки, господа. Вам же будет легче.

В этой статье я показал, куда вставлять код методом «научного тыка». Очень трудозатратный  и нервный метод, но другого пути у нас пока нет.

Надеюсь, Ваш сайт стал красивее.

Удачи!

Перейти к следующему уроку.

...Сообщите об этой статье своим друзьям:
Благодарю Вас!
А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

Автор: Сергей Ваулин

Похожие записи по этой теме:

25 thoughts on “4.8. Текст не обтекает картинку в WordPress

  1. Alex

    Огромное спасибо! Все воткнулось с первого раза. Не успел попробовать вставить справа, но судя по коду — должно работать. Просто супер.

    И написано так подробно, что даже суперчайник разберется.

    Reply
  2. Rinat

    Спасибо! Получилось))) ура)

    Reply
  3. Димка

    Привет. Вставил код из твоей статьи, заработало почти всё как надо. Вот только картинки по центру не хотели становиться. Вроде всё верно прописано. Решение нашел тут: my-wordpress.ru/shablony/...ta-wordpress.php После кода той статьи картинки стали по центру. В чем принципиальная разница? Может твой код чуть подкорректировать?

    Reply
    1. admin Post author

      Димка, сейчас разбираться нет времени, но за подсказку спасибо

      Reply
  4. Hunter

    Спасибо всё сработало, а то я уже начал нервничать :)

    Reply
  5. Дмитрий

    Здравствуйте столкнулся с подобной проблеме, на новом блоге который еще на локальном сервере, шаблончик старый и видно кривой,данный код просто скопировал в конец файла CSS

    проблема с обтеканием решилась, вопрос можно ли оставить данный код в конце таблицы CSS или надо вставлять в середину ближе к тегу IMG?

    Reply
    1. admin Post author

      Дмитрий, если у Вас при таком размещении все работает, то — оставьте. Единственно в чем в у Вас в будущем могут возникнуть проблемы — поиск этой вставки. Если она около тега img — искать легче.

      Кстати, кривизна шаблона тут ни при чем, шаблоны почти все такие.

      Reply
  6. Artem

    Сделал все как написано, появилось обтекание картинок текстом, но вместе с тем появилась проблема. Теперь картинки обтекаются всем подряд, в том числе тайтлами и текстами ниже расположенных публикаций на главной блога. Пробовал вставлять вниз блока контента пустой блок со свойством clear: both, но этот блок отжимается вниз правым сайдбаром и комментарии к публикации уползают далеко вниз.

    Reply
    1. admin Post author

      Artem, не видя Вашего сайта, могу предположить, что картинки у Вас расположены в самом низу поста. Поднимите их выше. Кстати, а как дело обстоит в дефолтных темах?

      Reply
  7. zakir

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

    Reply
  8. Михаил

    А мажно просто при публикации в редакторе стиль для img прописать float:left и всего делов.

    Reply
    1. admin Post author

      Каждый раз прописывать? Зачем? Когда можно сделать один раз и навсегда. Но за комментарий спасибо, уверен, он кому-нибудь пригодится

      Reply
  9. Антон

    Спасибо за быстрое и легкое решение! Мучался час, пока не нашел этот пост!

    Reply
  10. Lena

    Спасибо большое. Наконец-то нашла подробное описание, как это делать. Ура! Все получилось!

    Reply
    1. admin Post author

      Правильно, Лена: Главное не сдаваться и искать — в Интернете есть все, надо только проявить настойчивость.

      Reply
  11. Владимир

    Я уже всё перепробовал, сейчас ещё раз буду пробовать, хотя надежды мало. Текст написан просто супер. Никогда не встречал столь старательно написанных инструкций. Благодарю.

    Reply
  12. Олег

    О спасибо за статью)) Я на своем сайте In4cars.ru сделал все как и описано и всё у меня получилось)))

    Reply
  13. михаил

    Огромное спасибо за статью! 2 сайта делал всю голову сломал почему нет align-а.

    Reply

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

Your email address will not be published. Required fields are marked *