Сьогодні розглянемо, як просто та ефективно покращити роботу з медіа-контентом на вашому сайті. Для реалізації цієї функціональності вам навіть не потрібно буде встановлювати плагін, так як підтримка додавання такого коду є за замовчуванням в самому движку WordPress починаючи з версії 3.4.x, де вперше з'явилася опція. Про це та інші зміни ви можете докладніше почитати в Кодекс.
А йдеться ось про що: коли ви додаєте картинку на сторінку або пост WordPress, ви можете зробити для неї окремий Заголовок. Кожне додане зображення може супроводжуватися власним заголовком і використовувати для форматування заголовків звичайні HTML-теги (Звичайно, ви можете залишити їх порожніми і тоді взагалі жодних заголовків не буде).
Теги, які ви можете використовувати за промовчанням, будуть такими ж, як і теги, які ви використовуєте для коментарів. Наприклад, можна виділяти текст жирним шрифтом за допомогоюсильний>, курсивом за допомогоюem> або закреслювати за допомогоюудар>.
Врахуйте, що WordPress використовує світло-сіру кольорову стилізацію для фону і темно-сіру - для тексту (за замовчуванням). Ці класи задані в CSS як .wp-caption и .wp-заголовок-текст. Якщо ви хочете використовувати свої власні стилі, то увімкніть їх у CSS вашої теми (зазвичай для цього треба внести зміни до style.css).
У нашому випадку для теми треба додати наступний код:
.wp-caption {
background: #F1F1F1;
line-height: 18px;
margin-bottom: 20px;
padding: 4px;
text-align: center;
}
.wp-caption-text {
color: #888;
font-size: 12px;
margin: 5px;
}Врахуйте, що ви завжди можете змінити заголовок, клацнувши на картинці в редакторі постів і перейшовши до параметра Редагувати.
А ось сам код HTML, який я використовую:
<em>This text is italicized.</em> <strong>And this is bold.</strong>
Тепер розглянемо цей приклад у картинках. Ми просто вставляємо картинку в редакторі запису WordPress та вказуємо підпис.
Ось як виглядає заголовок у редакторі:
А ось так виглядає заголовок на сайті:
Ви можете застосовувати HTML теги до підписів на свій розсуд та оформлювати це все додатково за допомогою CSS у файлі style.css.
Джерело: WP.tutsplus.com
Коментарі до запису: 0