Warning: include(/var/www/demeneff/data/www/demeneff.ru/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /var/www/demeneff/data/www/demeneff.ru/wp-settings.php on line 84

Warning: include(/var/www/demeneff/data/www/demeneff.ru/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /var/www/demeneff/data/www/demeneff.ru/wp-settings.php on line 84

Warning: include(): Failed opening '/var/www/demeneff/data/www/demeneff.ru/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /var/www/demeneff/data/www/demeneff.ru/wp-settings.php on line 84
Как настроить стиль цитаты на wordpress? — Блог Александра Деменева

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

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

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

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

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

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

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

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

цитаты на 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

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

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

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?