Как настроить стиль цитаты на wordpress?

как сделать собственное оформление вида цитат на вордпрессПривет дорогие друзья, сегодня я расскажу о том, как настроить стиль цитаты на wordpress. Эта идея у меня возникла, просматривая блог Евгения Смецкого, который так же рассказывал, как изменить стандартный вид вывода цитат на wordpress. Но вот если честно, прочитав у него пост, я не нашел ничего нового и интересного, всего лишь маленькая заметка, по принципу скопируй у меня, да еще и с социальным замком. Не знаю кто вообще сейчас использует этот плагин, на сколько я знаю он наоборот многих начал раздражать. Никто не хочет кликать по таким кнопкам и раскрывать контент, для чего Евгений это сделал для меня остается загадкой. Наверное у него на это были свои причины.

Решил написать пост и рассказать более подробно о том, как можно оформить стиль цитат на wordpress. Если честно, вид цитат как у Александра Борисова, уже используется практически на каждом блоге, в том числе и на моем. Думаю рассказывать о том, как сделать подобные цитаты уже не имеет смысла. Нужно придумывать что-то свое. Я для нового дизайна своего блога, пока еще не нашел ничего интересного, но скоро с этим разберусь и сделаю что-то новенькое!

Надеюсь, Евгений на меня не обидится, а возможно даже прочитает пост и будет использовать мои наработки.

Стандартный вид вывода цитат выглядит вот так

wordpress цитатыДумаю, многих это не устраивает, поэтому, прочитав мой пост, вы сможете использовать любой из 8 вариантов вида цитат. Если вы готовы украсить посты своего блога, обязательно читайте пост до конца и в случае возникновения каких-либо проблем пишите вопросы в комментариях!

Немного о том, как собственно менять стили оформления цитат в WordPress шаблонах.

Для того чтобы изменить оформление цитаты, нужно удалить старый код стилей, заменив на те, которые я представлю в данном посте. За вывод цитаты отвечает blockquote, для того чтобы узнать это точно, сделайте следующее, наведите курсор на цитату в посте, и кликните правой кнопкой мыши, затем выберете «просмотр кода элемента», посте этого вы сможете найти нужный вам код, а так же строку в файле style.css отвечающую за вывод цитат. Вот посмотрите на скриншоты.цитаты на вордпрессцитаты на wordpress

Читайте так же:  Страница ошибки 404 и ее создание.

цитаты на wordpress

Только запомните, что при смене кода обязательно должен остаться не тронутым селектор из старого стиля оформления цитаты.

Например:

.entry blockquote

или

.post_content blockquote {

И так далее, этот селектр может быть разным.

Скажу подробнее, если менять код нужно оставлять всегда не тронутым селектор, а менять только код оформления внешнего вида вывода цитат. Надеюсь, что сказал более-менее понятно. Если есть, какие-то трудности, пишите в комментариях, разберемся!

Настраиваем стиль цитаты на WordPress №1

В данном примере, были убраны кавычки и вместо них прописана граница с правой стороны в виде пунктирной линии.

цитаты на wordpress

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

Стиль цитаты №2

Цитаты на вордпресс можно сделать красочными, подобрать каждый цвет по своему вкусу, для этого всего лишь нужно поиграть с кодами цветов в файле style.cssкак настроить стиль цитат на wordpress

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

Стиль цитаты №3

В данном примере цитат используется шрифт Droid Serif из библиотеки Google Веб-шрифты. Для того чтобы разнообразить шрифты в постах блога. стили цитат на wordpress

blockquote {
@import url(http://fonts.googleapis.com/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;
}

Стиль вордпресс цитаты №4

В данном примере приведен код для создания простенького вывода цитаты в рамке со скругленными углами.стили цитат на вордпресс блоге

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

Стиль цитаты для вордпресс №5

В данном случае используется кроссбраузерная градиентная заливка на CSS 3.вывод цитаты на вордпресс

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;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

Стиль цитаты №6

Цитата в виде тетрадного листа. Воспоминания о прошедших школьных годах! Кому-то возможно пригодятся, особенно для тематичных блогов, которые публикуют посты на школьную тему.создание цитат на вордпресс

blockquote {
width: 450px;
background-image:url('ВАШЕ ИЗОБРАЖЕНИЕ');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

Стиль цитаты №7

Отличный вывод цитат, в котором используется несколько фоновых изображений

Читайте так же:  Доска объявлений на WordPress. Как сделать доску объявлений на Вордпресс.

цитаты вордпресс

blockquote {
width: 450px;
background-image:url('ВАШЕ ИЗОБРАЖЕНИЕ');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}
blockquote:before{
position:absolute;
margin-top:-18px;
margin-left:0px;
content:url('ВАШЕ ИЗОБРАЖЕНИЕ');
}

Для тех, кто все-таки хочет сделать на своем блоге такой же стиль цитат как у Александра Борисова, решил добавить стили для оформления

Стиль цитат №8

{
    position: relative;
	padding: 15px 22px 12px 25px;
	margin: 16px 0 19px;
        box-shadow: 0.0em 0.2em 5px rgba(122,122,122,0.5);
	background: #f3f3f3;
	border: 1px solid #dfdfdf;
	border-left: 2px solid #3965a8;
	font: italic normal 14px Arial, sans-serif;
	color: #405778; }

Вот такие замечательные 8 видов вывода цитат для вордпресс я предоставил, надеюсь, они многим пригодятся. Люблю писать посты для того чтобы помочь людям а не только для того чтобы статья вышла в топ или получила лайки в каких-нибудь социальных замках.

Теперь вы знаете, как настроить стили цитат на WordPress и без труда сможете их сменить, не прибегая к помощи фрилансеров или сторонних лиц.

«Все гениальное – просто!»

Поделитесь в комментариях, какие вам больше нравятся стили цитаты на WordPress?