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

Создание изображения с закругленными углами с помощью атрибута CSS border-radius было тенденцией десять лет назад. Хотя в настоящее время многие люди не обращают внимания на резкие края изображения, изображение с закругленными углами по-прежнему остается привлекательным вариантом. С новым редактором блоков Гутенберга в WordPress вы можете легко добавлять закругленные углы к изображениям. В этой статье мы объясним различные способы создания изображений с закругленными углами на сайте WordPress.

Настройки блока изображения

Последняя версия редактора блоков WordPress Gutenberg откроется в полноэкранном режиме и по умолчанию скроет настройки блока. Следовательно, после загрузки изображения вы можете нажать кнопку с тремя точками (Дополнительные параметры) и выбрать «Показать настройки блока». Это откроет панель настроек блока на боковой панели.

Показать настройки блока

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

Настройки блока изображения
Настройки блока изображения

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

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

1. Округлый стиль изображения Гутенберга.

Используя редактор блоков Гутенберга, вы можете сделать изображение с закругленными углами одним щелчком мыши.

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

Преимущество этого метода в том, что вы можете визуально увидеть округлое изображение внутри редактора.

2. Добавление собственного CSS с существующим классом

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

WordPress использует два класса CSS для изображений – округлый для округлых изображений и is-style-default для стиля по умолчанию. В зависимости от настроек стиля изображения по умолчанию используйте один из этих классов CSS, чтобы добавить собственное значение радиуса границы. Например, если вы используете закругленный стиль изображения по умолчанию, перейдите в «Внешний вид> Настроить> Дополнительные CSS» и вставьте следующий код:

.is-style-rounded img {
border-radius:10%;
}
Добавить собственный CSS в WordPress
Добавить собственный CSS в WordPress

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

.is-style-default img {
border-radius:10%;
}

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

Изображение с закругленными углами с настраиваемым CSS
Изображение с закругленными углами с настраиваемым CSS

3. Добавьте собственный CSS с помощью специального класса.

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

  • После загрузки изображения прокрутите вниз до настроек блока и нажмите на раздел «Дополнительно».
  • Добавьте округленное изображение в качестве дополнительного класса CSS, как показано ниже.
Использовать собственный класс CSS
Использовать собственный класс CSS

Теперь перейдите в настройщик и добавьте приведенный ниже код CSS:

.roundedimage img {
border-radius:10%;
}

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

4. Использование пользовательского HTML для отдельного случая

Проблема с добавлением дополнительного CSS заключается в том, что он загружается на каждой странице. Это нежелательно, если вы хотите использовать закругленные углы только для нескольких изображений на своем сайте. В этом случае вы можете использовать блок Custom HTML для добавления пользовательского кода CSS только для определенного изображения.

  • Загрузите изображение и убедитесь, что вы используете стиль по умолчанию.
  • Нажмите кнопку с тремя точками и выберите опцию «Редактировать как HTML».
Редактировать как HTML
Редактировать как HTML
  • Добавьте следующий код в начало блока HMTL.
<style>
.is-style-default img {
border-radius:10%;
}
</style>
  • В редакторе это должно выглядеть так:
Добавление встроенного CSS
Добавление встроенного CSS
  • Снова нажмите кнопку с тремя точками и выберите опцию «Редактировать визуально».
  • Вы увидите сообщение об ошибке, как показано ниже, о том, что блок содержит недопустимый контент, поскольку вы добавили HTML-код в блок изображения. Нажмите кнопку «Преобразовать в HTML».
Разрешение конфликта блоков
Разрешение конфликта блоков
  • Теперь WordPress преобразует блок изображения в настраиваемый блок HTML.
Преобразовано в HTML
Преобразовано в HTML
  • Нажмите кнопку «Предварительный просмотр», чтобы просмотреть визуальный предварительный просмотр.
Блок предварительного просмотра
Блок предварительного просмотра

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *