Оформление цитат на Wordpress. Способы и примеры
Опубликовано: 01.09.2018
Здравствуйте, друзья!
Написать о красивом оформлении цитат в тексте статей на блоге под управлением WordPress я решил, так как напрямую столкнулся с необходимостью такой работы. Мне пришлось менять шаблон на одном из сайтов. Но выбрать шаблон WP , на самом деле, довольно трудно. Несмотря на то, что сейчас существует огромное количество платных и бесплатных шаблонов, подобрать удовлетворяющий всем нашим требованиям очень сложно. Обязательно в шаблоне найдется что-то, что нам не нравится. Поэтому чаще всего приходится выбирать тему с наименьшим количеством недостатков, и потом ее дорабатывать.
Использование шорткодов для оформления страниц и статей на сайте Вордпресс
Так вот, одним из недостатков выбранной мною темы было невыразительное выделение цитаты. Она выделялась только дополнительным отступом слева. Пришлось дорабатывать CSS-стили, чтобы этот элемент текста стал более заметным и красивым.
Как оформить статью на сайте, чтобы удержать внимание читателей
Для чего выделять цитаты на сайте
Назову три причины:
Вы показываете читателям, что данная часть текста является цитатой. Это необходимо для соблюдения авторских прав того человека, которого вы цитируете. С другой стороны, ссылка на авторитетного автора придает вес и вашей статье. Поисковые системы «любят» уникальные тексты, и, если не будет правильно оформлена цитата, это будет засчитано как плагиат, и рейтинг сайта будет снижен, его позиции в поиске опустятся. Особый вид цитат делает текст внешне более разнообразным и привлекательным. Его легче читать.Для того, чтобы выделить часть текста особым образом, можно использовать различные способы.
Редактирование CSS-стилей
Первым и наиболее правильным способом оформления цитаты следует считать использование тега blockquote и его стилей. Хотя с помощью CSS-правил можно выделить любой фрагмент (я об этом писал в статье «Применение стилей CSS в редакторе WordPress» ), только тег blockquote дает знать поисковым системам, что этот фрагмент является цитатой, и он не может быть уникальным.
Именно этот тег ставится в код, если мы используем кнопку Цитата
в визуальном редакторе WordPress.Но, как я уже отметил, не всегда стили этого тега такие, как нам хочется. Чтобы их отредактировать, нужно найти соответствующий код в файле style.css и заменить правила, прописанные для тега blockquote, на свои.
Этот файл можно редактировать двумя способами:
Скачать его с помощью FTP-клиента с сервера на свой компьютер, открыть в текстовом редакторе Notepad++ , внести изменения и снова закачать. Файл style.css находится по адресу wp-content/themes/ваша_тема/style.css. Можно воспользоваться встроенным в 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; } |
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; } |
blockquote { color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; background: #F8F4AB; padding: 10px 20px; }
Плагин WP-Note для оформления фрагментов текста на блоге
Этот плагин позволяет легко и просто оформить фрагменты статьи. Но сразу следует отметить, что для поисковиков эти фрагменты цитатами не будут считаться, так как в них не используется тег blockquote. Плагин служит только для внешнего оформления, а не для выделения цитат.
Скачать плагин можно по ссылке .
По умолчанию, в настройках плагина есть пять вариантов оформления. Для того, чтобы их применить, не нужно изменять какой-либо код, достаточно не посредственно в визуальном редакторе вписать в начале и конце фрагмента вписать соответствующие теги.
Теги плагина WP-Note
Редактирование плагина
Если варианты оформления, установленные по умолчанию, вам не нравятся, или они не гармонируют с дизайном вашего сайта, их можно изменить. Но для этого уже придется вносить изменения в файл стилей. Найти его можно по адресу wp-content/plugins/wp-note/style.css.
Можно также использовать и встроенный редактор WordPress. Для этого в панели управления выбираем Плагины – Редактор, потом справа в выпадающем списке находим Wp-note и нажимаем кнопку Выбрать, появится список всех файлов плагина.
Надеюсь, я достаточно хорошо все объяснил, и теперь вам понятно, как оформлять цитаты на сайте. Не забывайте делиться статьей в социальных сетях.
До скорой встречи!