Красивое оформление цитаты css. Плагин WP Note

31/01/2014 Дизайн блога, Плагины

6a00d834535c6c69e20148c69666f8970c-800wi Сегодня я расскажу про оформление цитаты в WordPress разными способами. Посты о дизайне уже были на блоге, читайте, например, как сделать уголок на сайт.
Содержание статьи:

Зачем нужно оформление цитаты на сайте
Css оформление цитаты — примеры
Плагин WP-Note для быстрого и красивого оформления цитаты WordPress блога

Зачем оформлять цитаты на сайте

Предположим, вы хотите использовать в статье великое изречение или чью-то понравившуюся мысль. А может быть просто выдержку из понравившегося поста на другом сайте. Просто заключите данный фрагмент текста в html тег

, нажатием кнопки «цитата» на панели визуального редактора (цитатой станет целиком весь абзац, а не только выделенное слово).

Теперь читателям вашего блога станет понятно, что данный текст вы цитируете. Кроме того, поисковые системы не будут воспринимать этот текст, как не уникальный, потому что это цитата. Информация воспринимается легче, когда она разбита на смысловые блоки, визуально отличающиеся друг от друга. Поэтому очень важно оформить вывод цитаты в WordPress соответствующим образом. Оформление цитаты по умолчанию будет зависеть от того, какую тему вордпресс вы используете. Если у вас рукописная тема, то она может вообще не иметь никакого оформления для цитат. Настроить стилизацию можно двумя способами:

Вручную с помощью css-стилей для цитат. При выборе этого способа придется работать с кодом вручную. Вы сможете поэкспериментировать: задавать нужные вам цвета, толщину линий и отступы.
Плагин цитат WP-Note для wordpress. Этот способ очень прост, он не требует лезть в код, нужно только установить плагин. Варианты оформления будут предложены стандартные и изменить их вы не сможете.

Оформление стиля цитат вручную, используя css.

Данный метод оформления цитат не требует знания html, делайте все по инструкции и проблем не возникнет.
В этом способе нам придется работать с кодом, а именно с главным стилевым css файлом темы вордпресс. Найти его можно следующими способами:

В админке: Внешний вид » Редактор. Внизу правой колонки находим раздел стили, в нем Таблица стилей (style.css) и открываем.
Зайти по FTP: /wp-content/themes/ваша_тема/style.css. Скачиваем файл на компьютер и открываем.

Теперь воспользовавшись поиском (ctrl+F) найдем тег “blockquote”, если для него уже заданы какие-то правила, можно их удалить и написать свои. Несколько примеров возможного оформления цитаты с помощью css:

1. Цитата CSS с кавычками

цитата1 В этом примере кавычки вставлены не с помощью изображения, а при использовании кода символа «кавычки». Цвет фона можно изменить во второй строке, заменив #E1F5FF на свой цвет.

blockquote {
background: none repeat scroll 0 0 #E1F5FF;
color: #383838;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 40px;
position: relative;
width: 450px;
}
blockquote:before {
color: #7A7A7A;
content: "\201C";
display: block;
font-size: 80px;
left: -10px;
position: absolute;
top: -10px;
}
blockquote cite {
color: #999999;
display: block;
font-size: 14px;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}

2. Вертикальная линия слева

цитата2

Внешний вид вертикальной линии вы можете изменить. Строка 11 : Здесь 3px — толщина линии, поставьте любую. Цвет линии задается кодом #FF9300, его так же можно заменить на другой. Параметр dashed означает пунктир. Попробуйте использовать solid (прямая линия), dotted (точечная), double (двойная). Цвет текста можно изменить в строке номер 10.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.28em 0;
padding: 0.85em 40px;
line-height: 1.45;
position: relative;
color: #c06f00;
border-left:3px dashed #ff9300;
background:#ffe0b6;
}

3. Блок с тенью и закругленными краями

цитата3

blockquote {
background-color: #D4F4EA;
border: 1px solid #00B37C;
border-radius: 6px;
box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.4);
font-family: Georgia,serif;
font-size: 16px;
font-style: italic;
margin: 20px;
padding: 20px 15px;
width: 550px;
}

За закругленные края отвечает стока 4, чем больше значение параметра border-radius, тем сильнее закруглены края. Тень добавляется в строке 5, поэкспериментировав c параметрами, можно добиться различного отображения тени.

Обратите внимание, что если какой-то параметр не работает (например, заданный вами цвет текста не отображается), скорее всего он перекрывается другими стилями. Чтобы это исправить, нужно дописать !important после параметра:

color: #d4f4ea !important;

После внесения изменений не забывайте сбрасывать кэш браузера, чтобы изменения отобразились. Для этого обновляйте страницу клавишами ctrl+F5.

Подобный урок написан по теме «Оформление формы подписки с помощью стилей», возможно вам будет интересно.

Плагин WP-Note для оформления цитат wordpress блога

Следующий способ оформления цитат на блоге вордпресс для тех, кто не хочет лезть в html или css код. Плагин WP-Note очень прост в использовании и он не имеет никаких настроек.

Установка.

Способ первый:

Зайдите в админку блога. «Плагины» -> «Добавить новый»
Скопируйте название «WP-Note» и вставьте в поле раздела «Поиск» и нажмите кнопку «Поиск плагинов»
В открывшемся списке выберите плагин «WP-Note» и нажмите «установить»
Кликните «ок» во вплывающем окне, после чего кнопку «активировать».

Способ второй:

Аналогично сп.1
Скачайте архив с плагином с официального сайта вордпресс по ссылке
В меню плагинов кликните «Загрузить», выберите скачанный ранее файл с компьютера и нажмите «Установить»
Аналогично сп.1

Чтобы начать пользоваться плагином, откройте любую запись на блоге. В данном способе не используется тег blockquote и кнопка “цитата” визуального редактора. Для оформления текста в виде цитаты необходимо заключить его в один из тегов: [note][/note], [help][/help], [tip][/tip], [warning][/warning] или [important][/important]. При этом не нужно открывать исходный код, текст вписывается прямо в визуальном редакторе:

Теперь подробнее про теги

«Заметка». Заключите текст в теги [note][/note] и вы получите следующее: «Помощь». Заключите текст в теги [help][/help] и вы получите следующее:

«Важное». Заключите текст в теги [tip][/tip] и вы получите следующее: «Предупреждение». Заключите текст в теги [warning][/warning] и вы получите следующее: «Запомни». Заключите текст в теги [important][/important] и вы получите следующее: Вот такие пять стандартных вариантов оформления цитаты предлагает данный вордпресс плагин. Css-стили прописаны в файле /wp-content/plugins/wp-note/style.css (редактируется по ftp). Поэтому при желании можно изменить вывод цитаты wordpress блога на свой вкус.

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

«Предыдущая