Як додати кордону навколо зображень в wordpress

Хотіли б ви додати кордону (border) навколо ваших зображень в WordPress? Нещодавно один з наших користувачів цікавився простим способом додавання кордонів навколо картинок в WordPress. Звичайно ж, ви можете використовувати CSS, але новачків це може налякати. У сьогоднішній статті ми покажемо вам простий спосіб додавання кордонів навколо картинок в WordPress без єдиної строчки коду на HTML або CSS.

Як додати кордону навколо зображень в wordpress

Спосіб 1: Використання плагіна для додавання кордону до картинок в WordPress

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

Як додати кордону навколо зображень в wordpress

Або ж, ви можете вказати певні CSS класи для кордонів. Далі в статті ми покажемо вам як додавати CSS клас до певного зображенню. Зараз же ви можете вписати будь-яку назву для CSS класу на кшталт .border-image.

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

Тепер ви зможете побачити кордону на всіх картинках в ваших записах.

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

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

Якщо ви бажаєте додати кордону тільки для певних вами зображень, то вам потрібно буде вказати WordPress, які саме з них повинні мати межі. Це можна зробити, додаючи CSS клас до зображень, яким потрібні кордону.

Як додати кордону навколо зображень в wordpress

У спливаючому вікні редагування зображення з інформацією про нього. Вам потрібно вибрати Advanced Options, де і вказати css клас для зображення.

Підказка: це буде .border-image. тому як ми вказали його в налаштуваннях плагіна.

Як додати кордону навколо зображень в wordpress

Далі, клацніть на кнопці Оновити для збереження і відновлення налаштувань зображення. Ось і все, ваша картинка тепер має додатковий клас. І, так як ви використовуєте плагін WP Image Borders, у зображення з'явиться кордон.

Спосіб 2: Використання HTML CSS для додавання кордонів зображення в WordPress

Додавання меж у зображення за допомогою CSS / HTML - більш швидкий спосіб отримати кордону у картинок в WordPress. Існує безліч варіантів як це зробити, і ми покажемо вам один з них. Вибирати, який з них використовувати, вирішувати тільки вам.

Додавання меж за допомогою inline стилів в WordPress

Сюди легко можна додати CSS стилі наступним чином:

Не соромтеся змінювати ширину кордонів, їх колір, відступи і margin для того, щоб налаштувати зовнішній вигляд «під себе».

Додаємо над ділянкою в свою тему WordPress

Якщо ж ви хочете додати кордону до всіх зображень в ваших записах і на сторінках назавжди, то зробити це можна за допомогою CSS в вашій темі WordPress.

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

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

Якщо ж ви хочете обрамляти тільки певні картинки, то вам потрібно додати CSS клас до цих зображень (див. Вище). Додайте правила стилів для цього CSS класу в свою або дочірню тему.

Якщо ви тільки починаєте розбиратися з WordPress, то не забудьте відвідати нашу рубрику WordPress для новачків. де ми публікуємо матеріали спеціально для нових користувачів WordPress.

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