Сьогодні розглянемо, як просто та ефективно покращити роботу з медіа-контентом на вашому сайті. Для реалізації цієї функціональності вам навіть не потрібно буде встановлювати плагін, так як підтримка додавання такого коду є за замовчуванням в самому движку WordPress починаючи з версії 3.4.x, де вперше з'явилася опція. Про це та інші зміни ви можете докладніше почитати в Codex.
А йдеться ось про що: коли ви додаєте картинку на сторінку або пост WordPress, ви можете зробити для неї окремий заголовок . Кожне додане зображення може супроводжуватися власним заголовком і використовувати для форматування заголовків звичайні HTML-теги (звісно, ви можете залишити їх порожніми і взагалі ніяких заголовків не буде).
Теги, які ви можете використовувати за промовчанням, будуть такими ж, як і теги, які ви використовуєте для коментарів. Наприклад, можна виділяти текст жирним шрифтом за допомогою <strong> , курсивом за допомогою <em> або закреслювати за допомогою <strike>.
Врахуйте, що WordPress використовує світло-сіру кольорову стилізацію для фону і темно-сіру - для тексту (за замовчуванням). Ці класи задані в CSS як .wp-caption та .wp-caption-text . Якщо ви хочете використовувати власні стилі, то включіть їх у 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