Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

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

  1. Метод 1. Використовувати плагін для додавання рамок до зображень в WordPress
  2. Метод 2. Використовувати HTML & CSS для додавання рамок до зображень в WordPress

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

У цій статті ми покажемо вам, як як додати рамки до зображень без написання CSS і HTML-коду

Метод 1. Використовувати плагін для додавання рамок до зображень в WordPress

Даний метод призначений для новачків, які не знають, як редагувати HTML або CSS. Перше, що вам потрібно буде зробити - це встановити і активувати плагін WP Image Borders . Після активації вам потрібно буде відвідати сторінку Параметри - WP Image Borders в вашій консолі, щоб задати деякі настройки плагіна.

У першому розділі налаштувань плагіна ви можете визначити цільові зображення. Ви можете додавати рамки до всіх зображень в ваших записах WordPress, поставивши галочку навпроти пункту «Add borders to all images in blog posts».

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

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

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

Не забудьте зберегти зміни.

Якщо ви вибрали першу опцію Add borders to all images in blog posts, то в такому випадку вам не доведеться більше нічого робити.

Ви отримаєте рамки у зображень у всіх ваших записах блогу.

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

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

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

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

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

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

border-image, оскільки саме цей клас ми задали в налаштуваннях плагіна

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

Метод 2. Використовувати HTML & CSS для додавання рамок до зображень в WordPress

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

Додавання рамок через вбудовані стилі в WordPress

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

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

Ви можете легко додати CSS-стилі в HTML-код:

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

Змініть ширину рамки, колір, відступи і краю на власний розсуд.

Додавання рамок до теми WordPress або до дочірньої темі

Якщо ви хочете додати рамки до всіх зображень в записах і на сторінках WordPress, ви можете додати CSS-стилі безпосередньо до вашої теми WordPress або до дочірньої темі.

Більшість тем WordPress вже мають такі стильові правила, задані в таблиці стилів теми. За таблицю стилів зазвичай відповідає файл style.css. Ви можете змінити існуючий 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-клас до ваших зображень. Для цього класу потім вам потрібно буде прописати стилі у вашій основній темі або в дочірньої темі:

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

Джерело: wpbeginner.com

Новости

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

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

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

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

Как сделать из бумаги самолет
 1. Самолеты сделанный по первой и второй схеме являются самыми распространенными. Собирается такое оригами своими руками достаточно быстро, несмотря на это самолет летит достаточно далеко за счет свое

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно

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