По просьбе читательницы блога Людмилы Ворониной выкладываю пост о выравнивании картинок в wordpress.

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

Такое место действительно имеет быть в ряде шаблонов, которые не соответствуют требованиям для разработки wordpress шаблонов (выполнить все требования действительно сложно на самом деле). Т.е. проблема в шаблоне, а именно в незавершенности шаблона. Я расскажу что и куда добавить, чтобы заставить шаблон нормально реагировать на выравнивание картинок, но сначала немного теории.

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

Все такие вызываемые функции, которые заменяются на HTML код, условно четко определены заранее самим движком (API движка, встроенные функции). И заменяются они как правило на примерно один и тот же HTML код (рассматриваем вызов без параметров). Т.е. это уже некая закономерность, которая поддается общим правилам и от нее можно абстрагироваться.

Так вот, вставка картинки в админке wordpress тоже для простоты картины является такой вот функцией условно (на самом деле это не так, там нет вызовов php функция, там регенерируется именно HTML код), которая тоже имеет закономерность. Пользователь выбирает в визуальном режиме режим выравнивая (обтекания) картинки вариантов: по правому краю, по левому краю, по центру или без выравнивая.

Выбор режима выравнивая картинки в wordpress

После вставки в исходном коде картинки можно найти код, который отвечает за картинку. В коде обычно указывается ряд классов, в том числе и класс выравнивания: aligncenter, alignleft, alignright, alignnone. Именно эти классы нас и будут интересовать.

Классы выравнивая изображения в wordpress

Автор шаблона скорее всего просто не написал CSS стили для этих "системных" классов в своем wordpress шаблоне. Придется доделать это за него самостоятельно. Для этого открываем файл style.css в своей активной теме и дописываем в конец такой вот код:


.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
display:block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float:left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin:0;
max-width: 98.5%;
padding:0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

Код взят из кодекса. Тот кто что-то понимает в CSS может написать более компактный и правильный код. Моя задача показать как это сделать, а не искать оптимальный вариант решения. Этот код тоже должен без проблема "как есть" работать в вашей теме.

После этого идем на сайт и смотрим результат. Если все отображается по-прежнему, то пробуем обновить кэш браузера, т.к. css стили кэшируются браузером и могут не обновиться не смотря на обновление файла на сервере.

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

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

Прочтите также: