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

Как добавить подпись к любому элементу - шорткод caption | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

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

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

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

<iframe title="Как вставить шорткод в WordPress в разные места сайта" width="730" height="411" src="https://www.youtube.com/embed/iOR41AneN04?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

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

 

Обратите внимание, что шорткод 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;
}
Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Vitaly

    Как можно сделать подпись в виде ссылки?

    Ответить
    1. Создание сайтов

      прописать в подписи: текст ссылки

      Ответить