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

Как добавить подпись к любому элементу - шорткод caption | n-wp.ru

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

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

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

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

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

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

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

Eclectic Method - In Blackest Night (Green Lantern Remix). Это пример подписи с помощью шорткода caption.

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

Eclectic Method - In Blackest Night (Green Lantern Remix) Это пример подписи с помощью шорткода caption.

Обратите внимание, что шорткод 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;
}
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 Комментарии

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*