Оформление цитат на WordPress с помощью CSS и плагина

ЦитатаЗдравствуйте, друзья!

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

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

Для чего выделять цитаты на сайте

Назову три причины:

  1. Вы показываете читателям, что данная часть текста является цитатой. Это необходимо для соблюдения авторских прав того человека, которого вы цитируете. С другой стороны, ссылка на авторитетного автора придает вес и вашей статье.
  2. Поисковые системы «любят» уникальные тексты, и, если не будет правильно оформлена цитата, это будет засчитано как плагиат, и рейтинг сайта будет снижен, его позиции в поиске опустятся.
  3. Особый вид цитат делает текст внешне более разнообразным и привлекательным. Его легче читать.

Для того, чтобы выделить часть текста особым образом, можно использовать различные способы.

Редактирование CSS-стилей

Первым и наиболее правильным способом оформления цитаты следует считать использование тега blockquote и его стилей. Хотя с помощью CSS-правил можно выделить любой фрагмент (я об этом писал в статье «Применение стилей CSS в редакторе WordPress»), только тег blockquote дает знать поисковым системам, что этот фрагмент является цитатой, и он не может быть уникальным.

Именно этот тег ставится в код, если мы используем кнопку Цитата кнопкав визуальном редакторе WordPress.

Но, как я уже отметил, не всегда стили этого тега такие, как нам хочется. Чтобы их отредактировать, нужно найти соответствующий код в файле style.css и заменить правила, прописанные для тега blockquote, на свои.

Этот файл можно редактировать двумя способами:

  1. Скачать его с помощью FTP-клиента с сервера на свой компьютер, открыть в текстовом редакторе Notepad++, внести изменения и снова закачать. Файл style.css находится по адресу wp-content/themes/ваша_тема/style.css.
  2. Можно воспользоваться встроенным в WordPress редактором кода. Чтобы его открыть в панели управления WP выбираем Внешний вид – Редактор. К сожалению, этот редактор не показывает номера строк, что затрудняет поиск.

Прежде, чем вносить изменения в файл style.css, отредактируйте код с помощью инструмента Web Tools в браузере Google Chrome или аналогичном в браузере Mozilla Firefox. С помощью этих средств можно сразу визуально увидеть, как будет выглядеть цитата на вашем сайте.

Примеры оформления цитат

Цитата с символом «кавычки»

Этот символ считается общепринятым для обозначения цитат, поэтому применяется чаще всего. Кавычки можно вставить, используя рисунок, что встречается чаще, а можно это сделать, применив код символа «\201C», что и показано в приведенном примере.

Вот изображениеКавычки

А вот соответствующий код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
blockquote {
background: none repeat scroll 0 0 #fea;
color: #009a82;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 50px;
position: relative;
width: 750px;
}
blockquote:before {
color: #009a82;
content: "\201C";
display: block;
font-size: 60px;
left: 1px;
position: absolute;
top: 1px;
}
  • В этом коде во второй строке #fea – цвет фона, можно заменить на свой,
  • 3 строка – цвет шрифта,
  • 4, 5, 6, 7 – параметры шрифта,
  • 8, 9 – положение фрагмента,
  • 10 – ширина блока, ее можно указать в процентах, например, 90%.

Дальше идет описание кавычек

  • 13 – цвет,
  • 16 – размер,
  • 17-19 – положение.

Выделение рамкой

Вот пример:рамка

А вот простой CSS-код для него:

1
2
3
4
5
6
7
blockquote {
color: #333;
font-family: Verdana, Geneva, sans-serif;
border: 1px dashed #999;
background: #F8F4AB;
padding: 10px 20px;
}

Если вас заинтересовала тема оформления цитат, предлагаю скачать мини-книгу «7 примеров оформления цитат на сайте с помощью CSS». В ней подробно разбираются различные примеры выделения фрагментов текста. Изучив эти примеры, вы сможете создать свой собственный стиль оформления.

Скачать мини-книгу


Плагин WP-Note для оформления фрагментов текста на блоге

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

Скачать плагин можно по ссылке.

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

Теги плагина WP-Note

  • Вариант «Заметка». Если заключить текст в теги [note][/note], получится такое оформление:Заметка
  • Вариант «Помощь». Для него используем теги [help][/help]Помощь
  • Вариант «Совет». Теги [tip][/tip]Совет
  • Вариант «Предупреждение». Теги [warning][/warning]Предупреждение
  • Вариант «Запомни». Теги [important][/ important]Запомни

Редактирование плагина

Если варианты оформления, установленные по умолчанию, вам не нравятся, или они не гармонируют с дизайном вашего сайта, их можно изменить. Но для этого уже придется вносить изменения в файл стилей. Найти его можно по адресу wp-content/plugins/wp-note/style.css.

Можно также использовать и встроенный редактор WordPress. Для этого в панели управления выбираем Плагины – Редактор, потом справа в выпадающем списке находим Wp-note и нажимаем кнопку Выбрать, появится список всех файлов плагина.редактирование плагина

Надеюсь, я достаточно хорошо все объяснил, и теперь вам понятно, как оформлять цитаты на сайте. Не забывайте делиться статьей в социальных сетях.

До скорой встречи!

Еще советую почитать по этой теме:

Как узнать ID рубрики на WordPress?
Здравствуйте, уважаемые читатели блога kviter.ru. Сегодня у меня небольшая, но полезная статья о том, как узнать ID рубрики на блоге под управлением Wordpress. Что такое ID? Сначала выясним, ...
Применение стилей CSS в редакторе WordPress
Здравствуйте, дорогие читатели! В сегодняшнем юбилейном, 100-м посте я хочу написать о применении стилей во встроенном редакторе Wordpress для нестандартного оформления контента. Этот материал является ...
Как защитить информацию на сайте от взлома и заражения
Здравствуйте, друзья! Сегодня я хочу еще раз поговорить о том, как защитить информацию на сайте от взлома и заражения. На настоящий момент это весьма актуальный ...
HTML-редактор WordPress и его возможности
Здравствуйте, уважаемые читатели! Для создания статей в Wordpress обычно используют визуальный редактор, о котором я уже писал, но редактировать их можно и во встроенном HTML-редакторе, ...
Редактор изображений WordPress
Здравствуйте, друзья! Ответьте, с помощью каких программ вы готовите изображения к публикации на блоге? Я чаще всего работаю с Фотошопом – это универсальная программа. В ...
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...

5 комментариев к “Оформление цитат на WordPress с помощью CSS и плагина

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *