Сьогодні розглянемо, як просто і ефективно поліпшити роботу з медіа-контентом на вашому сайті. Для реалізації даної функціональності вам навіть не треба буде встановлювати плагін, тому що підтримка додавання такого коду є за умовчанням в самому движку WordPress починаючи з версії 3.4.x, де вперше з’явилася дана опція. Про це та інші зміни ви можете більш детально почитати в Codex.

А йдеться ось про що: коли ви додаєте картинку на сторінку або в пост WordPress, ви можете зробити для неї окремий заголовок. Кожне доданий зображення може супроводжуватися власним заголовком і використовувати для форматування заголовків звичайні HTML-теги (звичайно, ви можете залишити їх пустими і тоді взагалі ніяких заголовків не буде).

Теги, які ви можете використовувати за замовчуванням, будуть такими ж, як ті теги, що ви використовуєте для коментарів. Наприклад, можна виділяти текст жирним шрифтом за допомогою <strong>, курсивом за допомогою <em> або закреслювати за допомогою <strike>.

Врахуйте, що WordPress використовує світло-сіру кольорову стилізацію для фону і темно-сіру – для тексту (за замовчуванням). Ці класи задані в CSS як. Wp-caption і. Wp-caption-text. Якщо ви хочете використовувати свої власні стилі, то включіть їх в CSS вашої теми (зазвичай для цього треба внести зміни до style.css).

У нашому випадку для теми треба додати наступний код:

<br />.wp-caption {<br />    background: #F1F1F1;<br />    line-height: 18px;<br />    margin-bottom: 20px;<br />    padding: 4px;<br />    text-align: center;<br />}<br />.wp-caption-text {<br />    color: #888;<br />    font-size: 12px;<br />    margin: 5px;<br />}<br />

Врахуйте, що ви завжди можете змінити заголовок, клікнувши на зображенні в редакторі постів і перейшовши до параметру Редагувати.

А ось сам код HTML, який я використовую:

<em>This text is italicized.</em> <strong>And this is bold.</strong>

Тепер розглянемо цей же приклад в картинках. Ми просто вставляємо картинку в редакторі запису WordPress і вказуємо підпис.

Ось як виглядає заголовок в редакторі:

А ось так виглядає заголовок на сайті:

Ви можете застосовувати HTML теги до підписів на свій розсуд і оформляти це все додатково за допомогою CSS в файлі style.css.