Як настроїти власний стиль для цитат у темі WordPress

Цитати найчастіше є частиною вашої статті, що найбільше запам'ятовується. Тому газети та великі медіа-сайти зазвичай створюють свій стиль для цитат, щоб виділити їх. У цій статті ми покажемо вам, як зробити свій стиль для блоків цитат WordPress, а також покажемо 9 красивих прикладів стилів для блоків цитат.

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.

Тепер вам потрібно використовувати один із запропонованих нижче стилів і перевизначити стилі ваших блоків цитат. Якщо такого стилю раніше не було, просто додайте його. Також можна і потрібно комбінувати кілька стилів, щоб створити стиль на ваш смак.

1. Класична CSS цитата

Зазвичай для додавання великих лапок використовують Фонове зображення CSS. Так ми зробили у цьому прикладі.

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";
}

5. Цитата зі шрифтами Google Web Fonts

У цьому прикладі CSS для цитати ми використовували шрифт Засічки дроїдів з бібліотеки шрифтів Google.

blockquote {
@import url(https://fonts.bunny.net/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

6. Цитата із закругленими кутами

У цьому прикладі у нас цитата зі округлими кутами, ми також використали тінь для кордонів.

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

7. Градієнтний фон для цитати

У цьому прикладі CSS цитати ми використовували CSS3 градієнт для покращення вигляду фону. Градієнт CSS може бути складною штукою через крос-браузерну сумісність. Ми рекомендуємо використовувати генератор CSS градієнтів Colorlabs.

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

8. Цитата з текстурою на фоні

У цьому прикладі ми використали текстуру на фоні цитати.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

9. Декілька зображень у фоні цитати

Ви можете використовувати кілька зображень у фоновому режимі цитати. У цьому прикладі ми використовували елемент blockquote:before, щоб додати ще одне фонове зображення до цитати.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "2014 2009";
}

Сподіваємося, що ця стаття допомогла вам навчитися створювати свій стиль для цитат WordPress. Якщо у вас є питання або пропозиції, будь ласка, поділіться ними в коментарях.

Джерело: WPBeginner.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/