Стилизируем цитаты в темах WordPress. Часть 1

Цитаты в записях обычно самая запоминаемая часть статьи. Они также являются той частью статьи или презентации, которой читатели делятся с друзьями. Именно поэтому газеты и передовые сайты средств массовой информации стилизируют цитаты, дабы те в свою очередь выделялись на фоне основного текста. В этой статье мы покажем вам ка стилизировать цитаты в WordPress, а также покажем множество примеров их, красиво оформленных. WordPress позволяет вам добавлять цитаты в записи и на страницы, используя панель инструментов в окне редактирования поста.

Это действие добавит небольшой HTML код в вашу запись, который мы и будем оформлять. Примечание: мы используем текстовый режим редактирования WordPress. Ниже пример того HTML, который вы должны увидеть.

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

Для того, чтобы стилизировать цитаты в вашей теме WordPress, необходимо изменить style.css в ней. Вы можете сделать это двумя способами: либо перейти во Внешний вид » Редактор в вашей административной панели WordPress, либо же редактировать файлы через FTP.
Далее, выберите один из стилей, предложенных ниже и замените тот, что у вас уже есть в style.css для цитат. Если же его нет, то просто добавьте. Можно также комбинировать стили и настроить внешний вид цитат по-своему.

1. Классические CSS цитаты

Обычно люди используют свойство CSS background-image для добавления больших кавычек в цитаты. В этом примере мы это продемонстрируем.

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

2. Классическая цитата с изображением

В этом примере мы использовали фоновое изображение для кавычек.

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

3. Простая цитата

В этом примере мы добавили фоновый цвет и обрамили пунктиром левую границу вместе цитаты. Поиграйтесь с цветами!

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

4. Белые, синие и оранжевые цитаты

Цитата должна выделяться, и поэтому она может быть настолько «цветастой», насколько вы пожелаете.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

Продолжение статьи — Стилизируем цитаты в темах WordPress. Часть 2