Как добавить границы вокруг изображений в WordPress

Хотели бы вы добавить границы (border) вокруг ваших изображений в WordPress? Недавно один из наших пользователей интересовался простым способом добавления границ вокруг картинок в WordPress. Конечно же, вы можете использовать CSS, но новичков это может испугать. В сегодняшней статье мы покажем вам простой способ добавления границ вокруг картинок в WordPress без единой строчки кода на HTML или CSS.

Способ 1: Использование плагина для добавления границы к картинкам в WordPress

Этот способ для новичков, которые не хотят заниматься редактированием HTML или CSS. Первым делом вам необходимо установить и активировать плагин WP Image Borders. После активации нужно перейти в Настройки » WP Image Borders для конфигурации плагина.

Первый раздел настроек плагина позволит вам указать изображения. Вы сможете добавить границы ко всем изображениями в ваших записях WordPress просто отметим галочку рядом с опцией ‘Add borders to all images in blog posts’.

Или же, вы можете указать определенные CSS классы для границ. Далее в статье мы покажем вам как добавлять CSS класс к определенному изображению. Сейчас же вы можете вписать любое название для CSS класса вроде .border-image.

Второй раздел настроек плагина позволит вам добавить тени к картинкам. Вы можете задавать горизонтальные или вертикальные отступы, размытие и радиус, а также цвет тени. Если вы не хотите теней у картинок, тогда просто оставьте это поле пустым.

Если вы выбрали первую опцию ‘Add borders to all images in blog posts’, то больше ничего делать не нужно.

Теперь вы сможете увидеть границы на всех картинках в ваших записях.

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

Добавляем CSS класс к изображению в WordPress

Если вы желаете добавить границы только для определенных вами изображений, то вам нужно будет указать WordPress, какие именно из них должны иметь границы. Это можно сделать, добавляя CSS класс к изображениям, которым нужны границы.

Просто загрузите вашу картинку и добавьте ее в запись. После добавления, кликните на ней в визуальном редакторе, а затем — на кнопку редактирования на панели инструментов.

Появится всплывающее окно редактирования изображения с информацией о нем. Вам нужно выбрать Advanced Options, где и указать css класс для изображения.

Подсказка: это будет .border-image, потому как мы указали его в настройках плагина.

Далее, кликните по кнопке Обновить для сохранения и обновления настроек изображения. Вот и все, ваша картинка теперь имеет дополнительный класс. И, так как вы используете плагин WP Image Borders, у изображения появится граница.

Способ 2: Использование HTML & CSS для добавления границ изображения в WordPress

Добавление границ у изображения с помощью CSS/HTML — более быстрый способ получить границы у картинок в WordPress. Существует множество вариантов как это сделать, и мы покажем вам один из них. Выбирать, какой из них использовать, решать только вам.

Добавление границ с помощью inline стилей в WordPress

После того, как вы загрузили и вставили свою картинку в запись, переключитесь в текстовый редактор. Здесь вы увидите HTML код для вашего изображения. Он будет выглядеть примерно так:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="" width="300" height="203" class="alignnone size-medium wp-image-36" />

Сюда легко можно добавить CSS стили следующим образом:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />

Не стесняйтесь изменять ширину границ, их цвет, отступы и margin для того, чтобы настроить внешний вид «под себя».

Добавляем границы изображения в свою тему WordPress

Если же вы хотите добавить границы ко всем изображениям в ваших записях и на страницах навсегда, то сделать это можно с помощью CSS в вашей теме WordPress.

Большинство тем WordPress уже содержат эти правила стилей, указанные в таблице стилей темы, которая обычно располагается в файле style.css. Вы можете изменить существующую CSS, или же добавить собственные в дочернюю тему.

WordPress добавляет свои дефолтные классы изображений ко всем картинкам. Для того, чтобы убедиться, что все картинки в ваших записях/на страницах обрамлены границами, вам нужно указать все эти классы. Ниже мы предлагает простой CSS сниппет для начала:

img.alignright {
float:right;
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left;
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone {
border:3px solid #EEE;
}

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

img.border-image {
border: 3px solid #eee;
padding:3px;
margin:3px;
}

Мы надеемся, что эта статья помогла вам добавить границы к изображениям вашего блога WordPress.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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