Как добавить рамку вокруг изображения в WordPress

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

Видеоурок(это видео)

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

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

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

Первый раздел в настройках плагина позволяет ориентироваться на изображения. Вы можете добавить границы ко всем изображениям в своих сообщениях WordPress, установив флажок «Добавить границы для всех изображений в сообщениях блога».

Кроме того, вы можете настроить таргетинг на определенные классы CSS. Мы покажем вам, как добавить класс CSS к определенному изображению позже в этой статье. Прямо сейчас вы можете поместить что-нибудь в класс CSS, например .border-image.

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

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

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки плагина.

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

Вы должны увидеть границы изображений на всех ваших изображениях в блоге.

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

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

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

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

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

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

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

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

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

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

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

Вы можете легко добавить стиль CSS в код HTML следующим образом:^

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

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

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

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

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

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

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас в Twitter и Facebook.