<
  • Главная
Статьи

Позиціонування зображень в тексті в WordPress

  1. Важливий код теми
  2. стилі зображень
  3. рамки
  4. Відступи і ширина зображення
  5. Зображення по лівому краю, по правому краю і по центру
  6. Приклади з вирівнюємо по лівому краю, по правому краю і по центру
  7. Розмір тексту ALT
  8. Підписи до зображень
  9. очищення виведення

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

Важливий код теми

Щоб скористатися новими CSS-класами в своїх цілях для вирівнювання зображень і обтікання їх текстом, WordPress-тема повинна включати в себе наступний код у файлі style.css:

img.alignright {float: right; margin: 0 0 1em 1em; } Img.alignleft {float: left; margin: 0 1em 1em 0; } Img.aligncenter {display: block; margin-left: auto; margin-right: auto; } .Alignright {float: right; } .Alignleft {float: left; } .Aligncenter {display: block; margin-left: auto; margin-right: auto; }

При додавання зображення в блог WordPress, виберіть вирівнювання зображення по правому краю, по лівому краю або по центру в панелі Image / Media.

Зображення буде вбудовано в вашу запис з обраним стилем для вирівнювання. Наприклад:

<Img src = "http://example.com/images/leaf.jpg" alt = "leaf graphic" title = "leaf graphic" class = "alignright size-medium wp-image-3109" height = "25" width = "30" />

стилі зображень

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

Давайте почнемо з того, що наведемо просте керівництво по використанню зображень в блозі WordPress.

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

<Img src = "http://example.com/images/leaf.jpg" alt = "leaf graphic" title = "leaf graphic" />

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

У вашій папці з темою WordPress знайдіть файл style.css і відкрийте його в текстовому редакторі. Дуже важливо: збережіть копію файлу де-небудь до того, як вносити в нього зміни. Тепер знайдіть по «img». Сподіваємося, що всі ваші селектори зображень згруповані. Якщо немає, то в такому випадку знайдіть всіх їх і об'єднайте їх в одну групу, щоб спростити цей процес.

рамки

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

img {border: 0}

Для безперервної червоної рамки в 1 піксель додайте наступне:

img {border: solid red 1px}

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

a img {border: 0}

Ви можете додати ефект появи рамки при наведенні курсору миші на зображення:

a: hover img {border: solid red 1px; }

Відступи і ширина зображення

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

Ми видалимо відступи навколо зображень в нашому контенті і переконаємося в тому, що вони будуть виводитися на всю ширину. Додамо наступне в стильову таблицю (якщо в ній немає цього коду):

p img {padding: 0; max-width: 100%; }

Зображення по лівому краю, по правому краю і по центру

Коли зображення перебуває з одного боку від вашого тексту, воно має деякий простір між текстом і своїм кордоном, тобто Слова не притискаються до його краю. Оскільки деякі браузери по-різному обробляють поля і відступи, такі стилі дозволять вам добитися того, щоб зображення ніколи не перекривали текст або списки.

img.alignright {padding: 4px; margin: 0 0 2px 7px; display: inline; } Img.alignleft {padding: 4px; margin: 0 7px 2px 0; display: inline; }

Оголошення display: inline дозволить зробити зображення вбудованими в текст, в якому вони знаходяться.

Тепер прийшов час додати оголошення float до зображень. Стоп. Чому ми повинні застосовувати float лише зображень? Чому б не закріпити їх з лівого або з правого боку, і не зробити плаваючим текст? Ви знаєте, це можна реалізувати. Але це вже виходить за рамки даної статті. Ми не будемо витрачати час, тому давайте просто додамо наступні стилі (якщо їх ще немає в таблиці стилів):

.alignright {float: right; } .Alignleft {float: left; }

Зверніть увагу: в стандартній темі використовується та ж сама техніка, але класи названі alignleft і alignright. Використання alignleft і alignright простіше запам'ятати, але взагалі можна застосовувати будь-який підхід.

Як центрувати зображення? Тег center більше не є дійсним, тому вам потрібно створити стилі для центрування зображень:

img.aligncenter {display: block; margin-left: auto; margin-right: auto; }

Приклади з вирівнюємо по лівому краю, по правому краю і по центру

Все це в теорії виглядає досить складно, однак на практиці все стає дуже простим. Як тільки ви один раз зробите це, вам більше вже не здасться це заплутаним. Ми сподіваємося. Щоб використовувати вирівнювання, створіть посилання на ваше зображення і додайте, class = "alignleft», class = "alignright» або class = "aligncenter» або, після чого зображення вирівняється по правому краю, по лівому краю або по центру, і текст буде його обтікати. Все дуже просто.

Все дуже просто

Приклад з вирівнюванням зображення по правому краю

Розмір тексту ALT

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

img {font-size: 60%}

Підписи до зображень

Зображення зазвичай просто розташовуються в контенті. Атрибути Alt і Title, звичайно, дозволяють якось описати зображення, проте їх явно недостатньо. Тому давайте створимо стиль для підписів.

.wp-caption {margin: 5px; padding: 5px; border: solid 1px # E5E5FF; background: # E5F2FF; font-size: 90%; color: black}

В наведеному вище прикладі ми додали рамку і фон, однак ви можете стилізувати підписи, як вважаєте за потрібне. Ми рекомендуємо вам робити текст іншого розміру в порівнянні з рештою контентом, а також додавати відступи.

<Div class = "wp-caption alignright"> <img src = "http://example.com/images/leaf.jpg" alt = "leaf graphic" title = "leaf graphic"> Red Leaf </ div>

очищення виведення

Якщо зображення більше, ніж текст, який оточує його, то в такому випадку зображення нависає як прапор над елементами нижче його. В такому випадку вам знадобиться очистити висновок на певній ділянці тексту. Зверніть увагу, що в блоці div відсутній текст. Однак якщо ви використовуєте WYSIWYG-редактор, вам знадобиться помістити щось в div, інакше WYSIWYG-редактор видалить div цілком (внаслідок особливостей / бага TinyMCE, який використовується в WYSIWYG-редакторі).

<Div style = "clear: both;"> <br /> </ div>

Щоб зробити очистку виведення, яка буде працювати і для HTML-, і для Visual-редактора, введіть наступне:

<Br style = "clear: both;" />

Джерело: codex.wordpress.org

Чому ми повинні застосовувати float лише зображень?
Чому б не закріпити їх з лівого або з правого боку, і не зробити плаваючим текст?
Як центрувати зображення?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью