Как добавить подпись к любому элементу – шорткод caption

В WordPress в фотоблогах часто используется подпись для картинок – под изображением выводится краткая текстовая заметка, поясняющая его смысл. Подпись вставляется при загружке изображения в блог, так же ее можно добавить и в последствии, отредактировав картинку в библиотеке медиафалов. Однако иногда требуется добавлять подпись не только к изображениям, но и к любым другим объектам (например, к видеороликам). Подпись легко можно добавлять с помощью шорткода caption, встроенного в WordPress.

Шорткод выглядит так:

 код элемента HTML 

В шорткоде caption можно использовать несколько параметров:

• id – уникальный ID элемента HTML, который потом можно индивидуально оформить в css. Необязательный параметр.
• align – положение подписи. Можно использовать: alignnone (по-умолчанию), aligncenter, alignright, и alignleft. Необязательный параметр.
• width – ширина подписи с px. Необязательный параметр.
• caption – текст подписи. Обязательный параметр.

Пример шорткода caption:

[omnivideo style="simple" icon="youtube" poster="auto" youtube="https:\/\/youtu.be\/iOR41AneN04"]

Как это будет выглядеть:

Обратите внимание, что шорткод caption можно использовать совместно с другими шорткодами (в примере шорткод embed вставлен в шорткод caption).

Оформление caption зависит от используемой вами темы. Можно сделать его индивидуальным, оформив в файле style.css. Пример:

.wp-caption {
	border:#EEE 1px solid; 
	padding: 10px 20px 10px 30px; 
	border-radius:3px; 
	-moz-border-radius:3px; 
	-khtml-border-radius:3px; 
	-webkit-border-radius:3px; 
	margin: 10px;
}

.wp-caption:hover {
	border:#CECECE 1px solid; 
}

.wp-caption p.wp-caption-text {
	font-size: 14px;
	color:#232323;
	padding:20px 5px 0px 5px;
	margin:0 auto;
	width:90%;
	font-style:italic;
}

.wp-caption img {
	margin: 0;	
	padding: 0;	
	max-width:100%; 
	height:auto; 
}

.wp-caption-dd {
	border:#EEE 1px solid; 
}

.wp-caption-text { 
	color:#000;
}