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

1. Спосіб 1: Використання плагіна для додавання кордону до картинок в WordPress
2. Додаємо CSS клас до зображення в WordPress
3. Спосіб 2: Використання HTML & CSS для додавання кордонів зображення в WordPress
4. Додавання меж за допомогою inline стилів в WordPress
5. Додаємо над ділянкою в свою тему 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.

З усіх питань і відгуками прохання писати в коментарі нижче.

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

VN: F [1.9.22_1171]

Rating: 4.3 / 5 (4 votes cast)